dogfather-universe/workspace/assets/css/report.css

/* ===================================================================
   Reports & Review.
   =================================================================== */

.steuerung { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.steuerung select {
  min-width: 160px; padding: 9px 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit;
}

.block { margin-bottom: 34px; }
.block__titel {
  margin: 0 0 4px; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
}
.block__frage { margin: 0 0 14px; font-size: .86rem; color: var(--text-still); }

.kacheln {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr));
}

.kachel {
  padding: 15px 16px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}
.kachel__wert { display: flex; align-items: baseline; gap: 9px; }
.kachel__zahl { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.kachel__name { display: block; margin-top: 3px; font-size: .78rem; color: var(--text-still); }

/* Vorher/Nachher aus dem Konzept: Eine Zahl allein sagt wenig. */
.trend { font-size: .78rem; font-weight: 600; white-space: nowrap; }
.trend[data-richtung="hoch"]   { color: #79d1a2; }
.trend[data-richtung="runter"] { color: var(--warn); }
.trend[data-richtung="gleich"] { color: var(--text-still); font-weight: 400; }
/* Bei manchen Zahlen ist "mehr" schlecht (z. B. offene Probleme). */
.trend[data-gut="nein"][data-richtung="hoch"]   { color: var(--warn); }
.trend[data-gut="nein"][data-richtung="runter"] { color: #79d1a2; }

.kachel[data-warn="ja"] {
  border-color: rgba(255, 154, 162, .4);
  background: rgba(255, 154, 162, .07);
}
.kachel[data-warn="ja"] .kachel__zahl { color: var(--warn); }

.liste-klein { margin: 0; padding: 0; list-style: none; }
.liste-klein li {
  padding: 10px 14px; margin-bottom: 7px;
  background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  font-size: .88rem;
}
.liste-klein .klein { display: block; margin-top: 2px; font-size: .77rem; color: var(--text-still); }


/* ---------- Entscheidung ------------------------------------------------ */

.entscheidung {
  margin-top: 8px; padding: 22px 24px;
  background: linear-gradient(100deg, rgba(63, 189, 245, .09), rgba(138, 118, 255, .05));
  border: 1px solid rgba(63, 189, 245, .35);
  border-radius: var(--radius);
}
.entscheidung__titel { margin: 2px 0 6px; font-size: 1.15rem; font-weight: 700; }
.entscheidung__text { margin: 0 0 18px; font-size: .88rem; color: var(--text-leise); max-width: 62ch; }
.entscheidung__raster {
  display: grid; gap: 14px; margin-bottom: 6px;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}
.entscheidung input {
  width: 100%; padding: 11px 13px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit;
}
.entscheidung input:focus {
  outline: none; border-color: rgba(63, 189, 245, .7);
  box-shadow: 0 0 0 3px rgba(63, 189, 245, .16);
}

@media (max-width: 620px) {
  .entscheidung__raster { grid-template-columns: 1fr; }
}

/* ===================================================================
   JEDER ABSCHNITT IST EINE GROSSE KACHEL (08.09.2026)

   Filipe, mit Bildschirmfoto: "die ganzen kacheln sollen viel geiler
   aussehen und spezieller. mach auch vielleicht 2 größere kacheln wo
   die anderen kleineren drin sind und richtig geil angepasst."

   `.block` war bisher ein reiner Behaelter -- eine Ueberschrift und ein
   Rand nach unten, sonst nichts. Die kleinen Zahlenkarten standen damit
   frei auf dem Hintergrundbild, und bei vier Abschnitten hintereinander
   verlor man, welche Karte zu welcher Frage gehoert. Genau das zeigt
   Filipes Bild: siebzehn Karten in einer Flaeche, ohne sichtbare
   Zugehoerigkeit.

   Jetzt traegt jeder Abschnitt eine eigene Kachel in derselben Sprache
   wie die Startseite: gefraeste Fase, Rasterhintergrund, Innenschatten.
   Die kleinen Karten liegen sichtbar DARIN.

   NICHT ueber die Modulliste in module.css, obwohl es dieselbe Optik
   ist: `.block` gibt es auch auf automation.html, und dort sind es
   Formularbloecke, keine Sammelkacheln. Die Regel steht deshalb in
   report.css -- diese Datei wird nur von report.html geladen, die
   Datei selbst ist die Bedingung. */
.block {
  position: relative;
  margin-bottom: 20px;
  padding: 16px 18px 18px;
  clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
  background:
    var(--raster),
    linear-gradient(178deg, rgba(19, 26, 38, .82), rgba(10, 14, 22, .88));
  box-shadow:
    inset 0 1px 0 rgba(160, 195, 230, .10),
    inset 7px 7px 14px -10px rgba(0, 0, 0, .9),
    0 10px 26px -18px rgba(0, 0, 0, .9);
}
/* Die Ueberschrift wird zum Kopf der Kachel: eine Linie darunter statt
   nur Abstand. Sie trennt die Frage von ihren Antworten. */
.block__titel {
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg,
    color-mix(in srgb, var(--akzent) 45%, transparent), transparent 68%) 1;
}

/* ---- Die kleinen Karten bekommen Luft ----------------------------

   Gemessen: In ALLEN 17 Karten lagen Name und Zahl weniger als sechs
   Pixel auseinander, bei langen Namen ("LIVE-Schnitt aus 0
   Bewertung(en)") sah es aus, als ueberlappten sie. Echte Ueberlappung
   war es nicht -- knapp genug, um wie eine auszusehen, und das ist
   dasselbe Problem.

   Zwei Aenderungen: 180 px Mindestbreite statt 158 (der Name bekommt
   eine Zeile mehr, bevor er umbricht) und ein fester Abstand zwischen
   Name und Zahl, den kein langer Text aufbrauchen kann. */
.kacheln {
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}
.block .kachel__name { padding-right: 14px; }

/* DIE ZAHL BRAUCHT PLATZ, DEN DIE KARTE NICHT KENNT (08.09.2026).

   Filipes Bildschirmfoto zeigte abgeschnittene Zahlen: Unter "Was
   blockiert?" standen 5, 2, 1 und 0 nur zur oberen Haelfte da, den Rest
   verdeckte die Aufgabenliste darunter.

   NACHGEMESSEN, und es war nicht das, wonach es aussah. Die Liste liegt
   sauber unter dem Raster (543..594 gegen 594..802, kein Ueberlappen).
   Herausgeragt ist die ZAHL SELBST: `.kachel__zahl` ist
   `position: absolute` und damit fuer die Hoehenrechnung der Karte
   unsichtbar. Bei 27 px Schrift in einer 51 px hohen Karte steht sie
   17 px unten ueber -- und was ueber den Rand steht, verdeckt das
   naechste Element.

   Sechs von siebzehn Karten waren betroffen: genau die in Bloecken, in
   denen das Raster nur eine Zeile hat und deshalb niedriger ausfaellt.
   In den anderen Bloecken war die Zeile hoch genug, dort fiel es nie
   auf -- der Fehler war da, aber nur manchmal sichtbar.

   Die Mindesthoehe ist der ehrliche Weg: Sie sagt der Karte, wie viel
   Platz ihr Inhalt WIRKLICH braucht. Die Zahl kleiner zu machen waere
   die bequemere Antwort und die falsche -- sie ist die Aussage der
   Karte. */
.block .kachel { min-height: 74px; }