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 ------------------------------------------------ */

/* =====================================================================
   DER ENTSCHEIDUNGSBLOCK (screen14, 09.09.2026)

   Filipe: "das soll auch bitte viel geiler und spezieller sein."

   ZWEI DINGE WAREN FALSCH, UND NUR EINES DAVON SIEHT MAN IM CODE.

   1. DIE FLAECHE WAR FAST DURCHSICHTIG -- 9 und 5 Prozent Deckkraft.
      Auf einer Seite mit Hintergrundbild heisst das: Das Motiv scheint
      mitten durch den Text. Auf Filipes Bildschirmfoto liest man den
      Satz "Ein Review endet nicht mit einer Zusammenfassung" quer
      ueber einem gespiegelten SPICY-MEDIA-Schriftzug. Ein Kasten, den
      man nicht sieht, ist keine Fassung -- er ist ein Rand um nichts.

   2. `border-radius` UND `border` STANDEN NOCH HIER -- wirkungslos,
      weil `.entscheidung` in der Modulliste von module.css steht und
      die spaeter geladen wird. Zwei Angaben, die aussehen, als taeten
      sie etwas, und es seit dem Umbau nicht mehr tun. Wer sie liest,
      sucht die abgerundete Ecke im Bild und findet sie nicht.

   ER IST DIE HANDLUNG DER SEITE, nicht einer von vier Abschnitten:
   Alles darueber ist Auskunft, hier wird etwas entschieden und sofort
   als Aufgabe angelegt. Deshalb bekommt er einen EIGENEN Ton fuers
   Kantenlicht (die Modulliste faerbt es ueber `--ton`) statt des
   Seitentons -- und eine kraeftigere Flaeche als die Sammelkacheln
   darueber. Er soll auffallen, ohne zu blenden: Der Ton ist dasselbe
   Babyblau des Hauses, nur bekommt hier die Kante ihn voll.

   Warum kein Rot: Rot heisst in diesem Haus "ueberfaellig". Eine
   Entscheidung ist kein Alarm. */
.entscheidung {
  --ton: #7ec8f2;
  margin-top: 8px; padding: 22px 24px;
  background:
    var(--raster),
    linear-gradient(100deg, rgba(63, 189, 245, .10), transparent 46%),
    linear-gradient(178deg, rgba(21, 30, 44, .93), rgba(11, 16, 25, .96));
}
.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);
}
/* Die Felder sind EINGELASSEN, nicht aufgesetzt: Schatten von oben
   nach innen. Dieselbe Sprache wie das Codefeld auf der Anmeldeseite --
   wo man etwas hineinschreibt, ist eine Vertiefung. */
.entscheidung input {
  width: 100%; padding: 11px 13px;
  background: rgba(0, 0, 0, .34);
  border: 1px solid rgba(150, 186, 220, .16); border-radius: var(--radius-klein);
  box-shadow: inset 0 2px 5px -2px rgba(0, 0, 0, .9);
  color: var(--text); font: inherit;
  /* Sonst zeichnet Chrome den Datumswaehler hell in eine dunkle
     Flaeche -- ein weisses Kaestchen mitten im Feld. */
  color-scheme: dark;
}
.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; }

/* =====================================================================
   DIE ZAHLENKARTEN STEHEN GERADE (screen3, 09.09.2026)

   Filipe: "perfektionnier auch noch bitte die kacheln die schriften
   drin und die zahlen. ich will dass alles passt, nicht bedeckt ist,
   schief steht oder zu tief oder zu hoch."

   NACHGEMESSEN, ALLE 17 KARTEN. Der Befund war eindeutig und deckt
   sich genau mit dem, was er beschreibt:

     * Name und Zahl lagen 12 bis 28 px auf VERSCHIEDENEN Hoehen.
     * Sie ueberlappten sich waagerecht (gemessener Abstand -183 bis
       -524 px, also weit ineinander).
     * Karten in derselben Reihe waren verschieden hoch.

   DIE URSACHE IST EINE EINZIGE ZEILE: `.kachel__zahl` steht
   `position: absolute` bei top 13 / right 13. Auf der Startseite ist
   das richtig -- dort sind die Kacheln gleich gross und der Name
   einzeilig. Hier bricht der Name auf zwei Zeilen um ("Community:
   neue Eintraege"), die Karte waechst nach unten, und die Zahl bleibt
   oben kleben. Sie ist ausserdem fuer die Hoehenrechnung unsichtbar,
   weshalb es vorher schon einmal eine `min-height` als Pflaster
   brauchte.

   JETZT EIN ECHTES RASTER, ohne absolute Position:

     Spalte 1   Name (Zeile 1), Trend darunter (Zeile 2)
     Spalte 2   die Zahl, ueber beide Zeilen, mittig

   `display: contents` auf `.kachel__wert`: Der Wrapper verschwindet
   als Kasten, seine Kinder werden selbst zu Rasterfeldern. So kommt
   die Zahl nach rechts und der Trend unter den Namen, OHNE dass am
   HTML etwas geaendert werden muss -- und ohne dass die Startseite,
   die dieselben Klassen benutzt, davon etwas mitbekommt.

   `align-items: center` statt der alten Mindesthoehe: Die Zahl ist
   jetzt Teil des Flusses, also rechnet die Karte ihre Hoehe mit ihr
   aus. Die `min-height` bleibt trotzdem stehen -- sie sorgt dafuer,
   dass eine Karte mit kurzem Namen nicht flacher wird als ihre
   Nachbarn.
   ===================================================================== */
.block .kachel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
}
/* Der Wrapper verschwindet, seine Kinder werden Rasterfelder. */
.block .kachel__wert { display: contents; }
.block .kachel__zahl {
  position: static;
  grid-column: 2; grid-row: 1 / -1;
  align-self: center;
  /* Rechtsbuendig und mit gleichen Ziffernbreiten: Untereinander
     stehende Zahlen sollen eine Spalte bilden, keine Treppe. */
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.block .kachel__name {
  grid-column: 1; grid-row: 1;
  margin: 0;
  padding-right: 0;          /* der Abstand kommt jetzt aus column-gap */
  align-self: center;
}
.block .kachel .trend {
  grid-column: 1; grid-row: 2;
  justify-self: start;
}
/* Ohne Trend soll die zweite Zeile keinen Platz belegen. */
.block .kachel:not(:has(.trend)) { row-gap: 0; }

/* =====================================================================
   WOMIT ANFANGEN? (15.09.2026)

   Vier Felder plus das fuenfte fuer alles ohne Schaetzung. Die
   Reihenfolge ist die Aussage: "Sofort" steht oben links, "Spaeter"
   unten. Wer von links oben nach rechts unten liest, liest die
   Rangfolge.

   Die Kante links sagt die Dringlichkeit -- aber der NAME sagt sie
   auch. Farbe allein waere hier besonders schlecht: Es geht um eine
   Entscheidung, nicht um eine Stimmung.
   ===================================================================== */

.womit {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.womit__feld {
  padding: 14px 16px;
  background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--rand-hell);
}
.womit__feld[data-feld="sofort"]    { border-left-color: #6f9e77; }
.womit__feld[data-feld="einplanen"] { border-left-color: #8ec9ff; }
.womit__feld[data-feld="nebenbei"]  { border-left-color: var(--rand-hell); }
.womit__feld[data-feld="spaeter"]   { border-left-color: var(--rand); }
.womit__feld[data-feld="offen"]     { border-left-style: dashed; }

.womit__kopf { display: flex; align-items: baseline; gap: 10px; }
.womit__name { margin: 0; font-size: 1rem; font-weight: 660; color: var(--text); }
.womit__zahl {
  margin-left: auto; font-size: 1.15rem; font-weight: 700;
  color: var(--text-leise); font-variant-numeric: tabular-nums;
}
.womit__satz {
  margin: 5px 0 10px; font-size: .82rem; line-height: 1.55; color: var(--text-still);
}
.womit__liste { margin: 0; padding: 0 0 0 16px; display: grid; gap: 4px; }
.womit__eintrag { font-size: .84rem; }

/* ==== MIT DEM DAUMEN ZU TREFFEN (25.09.2026) =====================

   Gemessen von `pruef-breiten` auf 320, 390 und 430 px: 27 x 18 px.
   Das ist ein Link, der am Rechner mit der Maus gut funktioniert und
   auf dem Handy nicht -- 18 px hoch, waehrend eine Fingerkuppe rund
   45 px breit ist. Man trifft den daneben oder gar keinen.

   DER LINK WIRD ZUR ZEILE, statt eine Zeile mit einem Link darin zu
   sein: `display: block` plus Polsterung macht die ganze Breite
   antippbar, und `min-height: 44px` ist das Mass, das im Haus ueberall
   gilt. Der negative Rand links holt die Polsterung optisch zurueck,
   damit die Liste nicht einrueckt -- sie sieht also unveraendert aus
   und ist trotzdem doppelt so hoch zu treffen.

   AM RECHNER BLEIBT ES SCHLANK: Dort ist die Maus genau, und 44 px je
   Eintrag wuerden aus fuenf Aufgaben eine halbe Bildschirmseite
   machen.

   ZWEI BEDINGUNGEN, MIT ODER VERKNUEPFT -- und die zweite habe ich
   beim ersten Anlauf vergessen:

     (pointer: coarse)   ein grobes Zeigegeraet, also ein Finger
     (max-width: 700px)  ein schmaler Bildschirm

   `pointer: coarse` allein waere die genauere Regel und hat trotzdem
   nicht gereicht: Ein Browser, der ein Handy-Fenster oeffnet, ohne
   Beruehrung zu melden, bekommt sie nicht -- und genau so hat
   `pruef-breiten` gemessen. Der Link blieb 27 x 21 px. Eine Regel,
   die nur unter idealen Bedingungen greift, hilft niemandem auf dem
   halben Weg dorthin. */
.womit__eintrag a {
  color: var(--text-leise); text-decoration: none;
  display: inline-block;
}
.womit__eintrag a:hover { color: var(--text); text-decoration: underline; }

@media (pointer: coarse), (max-width: 700px) {
  .womit__liste { gap: 0; }
  .womit__eintrag a {
    display: block;
    min-height: 44px;
    padding: 12px 8px;
    margin: 0 -8px;
    display: flex; align-items: center;
    border-radius: 10px;
  }
  .womit__eintrag a:active { background: rgba(255, 255, 255, .05); }
}
.womit__mehr { margin: 8px 0 0; font-size: .78rem; color: var(--text-still); }