/* cog.css — nur das, was die Übung „Konzentration" zusätzlich braucht.
   engine.css bleibt unangetastet: Test 1 und 2 laufen damit im Feld. */

/* Die Bühne ist SCHWARZ — wie im Original. Das ist hier kein Geschmack: Weiße Striche auf
   Schwarz haben einen härteren Kontrast als schwarz auf weiß, und die Figuren stehen
   dadurch näher an dem, was der Übende in der Begutachtung sieht.
   Der Rest der Seite bleibt hell; nur das Aufgabenfeld dreht sich um. */
.cog-buehne {
  background: #0e1418;
  border-radius: 10px;
  padding: 18px 16px 22px;
  margin: 0 auto 14px;
  max-width: min(94vw, 760px);
}

.cog-ueberschrift {
  color: #c8d2da;
  text-align: center;
  font-size: 14px;
  margin: 0 0 14px;
}

/* Die vier Referenzfiguren nebeneinander. Auf schmalen Schirmen dürfen sie schrumpfen,
   aber NICHT umbrechen: Zwei oben und zwei unten wäre eine andere Aufgabe — man würde in
   zwei Blicken vergleichen statt in einem. */
.cog-referenzen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
}

/* Die Vergleichsfigur mittig darunter — im Original sitzt sie unter den Rahmen 2 und 3. */
.cog-vergleich {
  display: flex;
  justify-content: center;
  margin: 14px auto 0;
  max-width: 520px;
}
.cog-vergleich .cog-figur { width: calc(25% - 8px); }

.cog-figur {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Die zwei Antwortknöpfe ---
   Rot links, grün rechts — wie am Antwortgerät des Originals. Wer dort geübt hat, greift
   hier an dieselbe Stelle. Beide gleich groß: Keine der beiden Antworten ist die
   naheliegendere, und nichts an der Gestaltung darf das behaupten. */
.cog-knoepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: min(94vw, 760px);
  margin: 0 auto 8px;
}
.cog-knoepfe .lt-knopf { width: 100%; min-height: 62px; font-size: 1.02rem; }
.cog-nein { background: #c0392b; }
.cog-ja   { background: #1f7a4d; }
.cog-nein:hover, .cog-ja:hover { filter: brightness(1.08); }

.cog-tastenhinweis {
  text-align: center;
  color: #6b7787;
  font-size: 12.5px;
  margin: 0 0 14px;
}

.cog-regelkasten {
  border-left: 3px solid #1f6feb;
  background: #f5f8fd;
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin: 16px 0;
}
.cog-regelkasten strong { display: block; margin: 10px 0 6px; }
.cog-regelkasten p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; }
.cog-regelkasten p:last-child { margin-bottom: 0; }

/* --- Die 85-Prozent-Hürde im Ergebnis ---
   Sie bekommt einen eigenen Kasten, weil sie im echten Verfahren etwas anderes ist als
   eine Note: eine Sperre. Wer sie reißt, hat nicht schlecht abgeschnitten — sein Ergebnis
   gilt gar nicht. Das muss man sehen, ohne es zu suchen. */
.cog-huerde {
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
}
.cog-huerde strong { display: block; margin-bottom: 6px; font-size: 15px; }
.cog-huerde p { margin: 0 0 8px; }
.cog-huerde p:last-child { margin-bottom: 0; }
.cog-huerde--gut  { background: #eaf4ee; border-left: 3px solid #2f7d4f; }
.cog-huerde--riss { background: #fdf1e7; border-left: 3px solid #e8730c; }

.cog-kennzahlen { margin: 0 0 18px; border-top: 1px solid #e3e8ee; }
.cog-kennzahlen p {
  display: flex; justify-content: space-between; gap: 12px;
  margin: 0; padding: 8px 2px; border-bottom: 1px solid #f0f3f6; font-size: 14px;
}
.cog-kennzahlen b { font-variant-numeric: tabular-nums; }

.cog-laengen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 18px;
}
@media (min-width: 520px) {
  .cog-laengen { grid-template-columns: repeat(3, 1fr); }
}
.cog-wahl { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cog-wahl .lt-knopf { width: 100%; }
.cog-wahl small { color: #6b7787; font-size: 12px; }

/* --- Das Dach-Beispiel auf dem Regelschirm ---
   Zwei Paare nebeneinander: eines passt, eines nicht. Auf schwarzem Grund, weil die
   Figuren im Test auch dort stehen — ein Beispiel auf weißem Grund sähe anders aus als
   das, worauf es vorbereitet. */
.cog-beispiele {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 16px 0;
}
@media (min-width: 560px) {
  .cog-beispiele { grid-template-columns: 1fr 1fr; }
}
.cog-beispiel {
  background: #0e1418;
  border-radius: 8px;
  padding: 12px 14px 10px;
}
.cog-beispiel-reihe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cog-beispiel-reihe .cog-figur { width: 40%; max-width: 96px; }
.cog-beispiel-zeichen {
  color: #c8d2da;
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
}
.cog-beispiel small {
  display: block;
  color: #c8d2da;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
  padding-top: 6px;
}

/* --- Übungs-Kenntlichmachung ---
   Martin (21.07.): In der Übung war nicht klar, dass der Test noch nicht läuft. Zwei
   Maßnahmen: ein Band ÜBER der Aufgabe (nicht nur die Kopfzeile), und ein grüner Rahmen
   um die ganze Bühne, damit der Übungszustand auch am Rand sichtbar ist. Grün = „läuft
   noch nicht scharf", abgesetzt von der schwarzen Test-Bühne. */
.cog-buehne--uebung {
  outline: 3px solid #2f9e44;
  outline-offset: 3px;
}
.cog-uebungsband {
  background: #2f9e44;
  color: #fff;
  border-radius: 6px;
  padding: 9px 14px;
  margin: 0 0 14px;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
}
.cog-uebungsband strong { font-weight: 700; }

/* Der Übergangsschirm zwischen Übung und Test. Ein farbiger Balken oben signalisiert den
   Wechsel, bevor man den Text liest. */
.cog-uebergang {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #2f9e44 0 50%, #1f3a4d 50% 100%);
  margin: 0 0 18px;
}

/* 3 – 2 – 1 – Start vor dem ersten Reiz: groß und mittig, damit klar ist, wann die Uhr
   losläuft (Martin, 21.07.). */
.cog-countdown {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; margin: 12px 0;
  font: 700 84px/1 Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1f3a4d; letter-spacing: 1px;
}
.cog-countdown--start { color: #2f9e44; font-size: 60px; }