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

/* =====================================================================
   module.css — DIE FORM ALLER MODULE

   Herausgeloest aus start.css am 07.09.2026. Diese Datei beschreibt die
   SILHOUETTE der ganzen Anwendung: die abgeschnittene Ecke, das
   Kantenlicht, die Eckwinkel und das Raster.

   Sie wird von JEDER Seite geladen -- ausser von der Anmeldeseite
   (index.html), die unangetastet bleibt.

   SIE WIRD ALS LETZTE GELADEN, und das ist keine Kosmetik. Bis zum
   07.09.2026 stand sie an dritter Stelle, VOR den Seitendateien. Dort
   hat sie auf vier Seiten schlicht nichts bewirkt: `.call` in
   calls.css, `.regel`/`.zustand`/`.ki-kasten` in automation.css,
   `.unterweisung` in bereich.css und `.fortschritt` in dateien.css
   setzen alle selbst `border-radius` und `box-shadow` -- gleiche
   Spezifitaet, spaeter im Ladeweg, also gewinnen sie. Ergebnis war
   genau das, was Filipe zu Recht bemaengelt hat: die neue Form auf
   manchen Seiten, die alte auf anderen, "ueberall ein bisschen".
   Als letzte Datei gewinnt die Form ueberall.

   WER EINE NEUE KARTE BAUT, traegt ihren Klassennamen in die Listen
   unten ein. Die Liste steht siebenmal in dieser Datei (Grundform,
   Kantenlicht, Raster, Handy und dreimal Kontrastmodus) -- das ist die
   schwache Stelle dieser Bauart, denn eine vergessene Kopie faellt
   niemandem auf. Deshalb steht vor jeder Kopie die Marke
   MODULLISTE, und `pruef-css-klassen.mjs` vergleicht alle sieben
   Vorkommen miteinander: Weicht eines ab, wird die Pruefung rot.
   ===================================================================== */

/* =====================================================================
   HUD-MODULE — die FORM ändert sich, nicht der Lack (07.09.2026)

   Filipe: "DU HAST WIEDER EINE KLEINE ÄNDERUNG ÜBERALL GEMACHT ANSTATT
   EINE RIESEN ÄNDERUNG."

   ---------------------------------------------------------------------
   ER HAT RECHT, UND DER GRUND WAR IMMER DERSELBE

   Ich habe dreimal das MATERIAL getauscht -- Mattglas, Leuchtschiene,
   Verlauf mit Schatten -- und dreimal die FORM gelassen. Ein
   abgerundetes Rechteck bleibt ein abgerundetes Rechteck. Die
   Silhouette ist aber das Einzige, was man aus fünf Metern erkennt;
   deshalb sah jede Änderung "wie vorher" aus.

   DIE NEUE FORM:

     1. DIE ECKE OBEN LINKS IST ABGESCHNITTEN. Eine Schräge statt einer
        Rundung -- eine andere geometrische Klasse, und genau deshalb
        fällt sie auf. Gebaut mit `clip-path`, also eine echte
        Silhouette und kein aufgemalter Fleck.
     2. EIN LICHT LÄUFT AUF DER KANTE, oben und über die Schräge, in der
        Farbe der Kategorie -- nicht ein Rahmen rundherum (das wäre
        wieder ein Kasten), sondern eine beleuchtete Oberkante.
     3. ECKWINKEL UNTEN RECHTS. Zwei kurze Striche, die eine Ecke
        andeuten, ohne sie zu zeichnen -- die Sprache von Peilung und
        Zielmarke.
     4. EIN FEINES RASTER statt Körnung. Körnung sagt "Papier", ein
        Raster sagt "Messgerät".

   ---------------------------------------------------------------------
   DREI DINGE, DIE BEIM ERSTEN ANLAUF SCHIEFGINGEN

   `clip-path` SCHNEIDET DEN SCHLAGSCHATTEN AB. Deshalb liegt die Höhe
   hier in `filter: drop-shadow()` und nicht in `box-shadow`: drop-shadow
   folgt der WIRKLICHEN Form, box-shadow immer dem Rechteck -- er würde
   einen Schatten für eine Ecke zeichnen, die es nicht mehr gibt.

   DIE REGELN STANDEN IN `:where()`. Das hat Spezifität NULL, also
   gewann jede ältere `.kachel::before`-Regel. Die Silhouette kam durch
   (die setzt sonst niemand), das Kantenlicht nicht -- heraus kam ein
   Zwitter aus neuer Form und alter Kante. Jetzt steht hier `:is()`:
   Das übernimmt die Spezifität seines stärksten Arguments, also die
   einer einzelnen Klasse. Damit liegt die Form gleichauf mit
   `.kachel` und gewinnt über den Ladeweg -- deshalb muss diese Datei
   zuletzt kommen (siehe oben).

   UND SIE STAND ZU FRÜH IM LADEWEG. Siehe der Absatz ganz oben; das
   war derselbe Fehler noch einmal, nur eine Ebene höher.
   ===================================================================== */

:root {
  /* Die Schräge steht als Größe da, damit Silhouette, Kantenlicht und
     Eckwinkel garantiert dieselbe benutzen. */
  --fase: 18px;
  --raster:
    repeating-linear-gradient(0deg, rgba(150, 186, 220, .26) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(150, 186, 220, .26) 0 1px, transparent 1px 26px);
}

/* MODULLISTE */
:is(.eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu) {
  position: relative;
  clip-path: polygon(var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase));
  border-radius: 0;
  border: 0;
  /* STUFE 1: DIE SCHRAEGE WIRD EINE ECHTE FASE.

     Bisher war die abgeschnittene Ecke ein Loch -- Material, das fehlt.
     Eine gefraeste Fase ist etwas anderes: Sie hat eine FLAECHE, und
     auf der liegt Schatten, weil sie schraeg zum Licht steht. Genau
     das macht dieser Innenschatten aus der Richtung der Schraege. Der
     Unterschied ist klein zu beschreiben und gross zu sehen: Aus einer
     weggeschnittenen Ecke wird ein bearbeitetes Werkstueck.

     `inset` und nicht aussen: Ein aeusserer Schatten liegt hier im
     `filter` (siehe unten), weil `clip-path` einen `box-shadow` nach
     der Form abschneiden wuerde. Ein INNERER Schatten wird von
     derselben Form sauber begrenzt -- er soll ja hineinreichen. */
  box-shadow: inset 7px 7px 14px -10px rgba(0, 0, 0, .95);
  filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, .55))
    drop-shadow(0 12px 22px rgba(0, 0, 0, .55));
}

/* DAS KANTENLICHT. Ein Layer mit derselben Silhouette, 1,6 px kleiner --
   was übrig bleibt, ist eine Linie, die exakt der Form folgt, Schräge
   inklusive. Ein `border` könnte das nicht: Er folgt dem Rechteck. */
/* MODULLISTE */
:is(.eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  width: auto; height: auto;
  opacity: 1;
  background: linear-gradient(158deg,
    color-mix(in srgb, var(--ton, var(--akzent)) 90%, #ffffff) 0%,
    color-mix(in srgb, var(--ton, var(--akzent)) 60%, transparent) 15%,
    rgba(150, 186, 220, .20) 45%,
    rgba(150, 186, 220, .07) 100%);
  clip-path: polygon(
    var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase),
    1.6px calc(var(--fase) + 0.7px), 1.6px calc(100% - 1.6px),
    calc(100% - 1.6px) calc(100% - 1.6px), calc(100% - 1.6px) 1.6px,
    calc(var(--fase) + 0.7px) 1.6px, 1.6px calc(var(--fase) + 0.7px),
    0 var(--fase));
}

/* RASTER UND ECKWINKEL. Beides auf ::after -- ein drittes Element gibt
   es nicht, und beides ist reine Optik ohne Klicks. */
/* MODULLISTE */
:is(.eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  /* STUFE 2: ECKWINKEL AN DREI ECKEN STATT AN EINER.

     Eine einzelne Ecke unten rechts liest sich als Verzierung. Drei
     Ecken lesen sich als RAHMUNG -- das Auge schliesst sie zu einem
     Ausschnitt, und genau diese Sprache benutzen Peilung, Zielmarke
     und Messgeraet.

     Die vierte Ecke bleibt frei, und das ist Absicht: Dort sitzt die
     Fase. Ein Winkel auf einer abgeschnittenen Ecke waere ein Winkel,
     der ins Leere zeigt.

     Sechs Verlaufsebenen fuer sechs Striche. Jede Ebene ist eine
     einfarbige Flaeche, die durch `background-size` auf einen Strich
     zusammenschrumpft -- billiger als sechs Elemente im Baum, und sie
     wandern beim Groessenwechsel automatisch mit. */
  --winkel: linear-gradient(var(--ton, var(--akzent)), var(--ton, var(--akzent))) no-repeat;
  background:
    var(--winkel), var(--winkel),      /* unten rechts */
    var(--winkel), var(--winkel),      /* oben rechts  */
    var(--winkel), var(--winkel),      /* unten links  */
    var(--raster);
  background-size:
    18px 1.5px, 1.5px 18px,
    18px 1.5px, 1.5px 18px,
    18px 1.5px, 1.5px 18px,
    26px 26px, 26px 26px;
  background-position:
    right 10px bottom 10px, right 10px bottom 10px,
    right 10px top 10px,    right 10px top 10px,
    left 10px bottom 10px,  left 10px bottom 10px,
    0 0, 0 0;
  /* .3 war zu laut: Das Raster soll man nicht LESEN, sondern spueren.
     Bei 26 px Abstand und einem Viertel Deckkraft bleibt der Eindruck
     "Messgeraet", ohne dass die Linien mit dem Text konkurrieren. */
  opacity: .26;
  transform: none;
}

/* Der Inhalt gehört ÜBER Raster und Kantenlicht. Ohne diese Zeile
   liegt bei Karten ohne eigenen Stapelwert der Text unter dem Raster
   und wird von ihm überzeichnet.

   `:not(.licht)` IST KEINE FEINHEIT, SONDERN DIE REPARATUR EINES
   FEHLERS, DEN DIESE ZEILE SELBST VERURSACHT HAT (07.09.2026).

   Das Licht, das dem Zeiger folgt, ist ein <span class="licht"> und
   damit ein direktes Kind jeder Karte. `position: relative` hat ihm
   sein `position: absolute` genommen: Aus einer Fläche über der ganzen
   Karte wurde ein leerer Inline-Span ohne Ausdehnung. Im Browser
   gemessen -- `display: inline`, obwohl in start.css `absolute`
   steht -- und genau deshalb war das Licht weg, das Filipe
   zurückhaben wollte.

   Merksatz: Eine Regel auf `> *` trifft auch das, was gar kein Inhalt
   ist. Wer sie schreibt, muss wissen, was sonst noch als Kind in
   diesen Karten liegt. */
:is(.eintrag-karte, .call, .datei, .kachel, .leer-hinweis,
    .team-karte, .zahl, .k-listentag, .person, .creator) > *:not(.licht) {
  position: relative;
  z-index: 1;
}

/* Beim Anfassen kommt das Modul NÄHER, es leuchtet nicht auf. */
:is(.kachel, .datei, .pdf, .creator, .person, .kk, .call, .team-karte):hover {
  transform: translateY(-3px);
  box-shadow: none;
  filter:
    drop-shadow(0 4px 6px rgba(0, 0, 0, .6))
    drop-shadow(0 20px 34px rgba(0, 0, 0, .6))
    drop-shadow(0 0 14px color-mix(in srgb, var(--ton, var(--akzent)) 30%, transparent));
}
:is(.kachel, .datei, .pdf, .creator, .person, .kk, .call, .team-karte) {
  transition: transform var(--tempo), filter var(--tempo);
}

@media (max-width: 620px) {
  /* Dieselbe Form, kleiner -- keine zweite Gestaltung. */
  :root { --fase: 12px; }
  /* MODULLISTE */
  :is(.eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu) {
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .7));
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.kachel, .datei, .pdf, .creator, .person, .kk, .call, .team-karte):hover {
    transform: none;
  }
}
@media (forced-colors: active) {
  /* Im Kontrastmodus zählt die Kante, und die muss ein echter `border`
     sein. Die Schräge bleibt: Sie ist Geometrie, keine Farbe. */
  /* MODULLISTE */
  :is(.eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu) {
    filter: none; border: 1px solid CanvasText;
  }
  /* MODULLISTE */
  :is(.eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::after {
    display: none;
  }
  /* MODULLISTE */
  :is(.eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::before {
    display: none;
  }
}


/* =====================================================================
   STUFE 3: DAS ZEICHEN BEKOMMT EINE METALLFASSUNG (07.09.2026)

   Filipe: "perfektionier alle kacheln die du vorhin gewechselt hast auf
   der ganzen website, mach sie alle noch geiler und geiler und noch
   spezieller. sie gehen aber in eine gute richtung schon."

   Die Plakette war ein abgerundetes Quadrat mit einem Farbschleier --
   also dieselbe Form wie ueberall sonst im Netz. Sie wird jetzt zu
   einem GEFASSTEN Schild:

     * dieselbe abgeschnittene Ecke wie die Karte, nur kleiner. Ein
       Bauteil, das zu seinem Gehaeuse passt.
     * ein 2 px breiter Ring aus gebuerstetem Metall -- dieselbe
       Handschrift wie die Luenette der Uhr und die Fassung der
       Konsole. Damit spricht die ganze Anwendung EINE Materialsprache
       statt drei.
     * die Farbe der Kategorie liegt INNEN, im Schild, nicht im Ring.
       So bleibt der Ring ueberall gleich und das Schild verschieden --
       genau die Aufteilung, die ein Typenschild auf einem Geraet hat.

   Diese Regeln stehen HIER und nicht in start.css: module.css wird
   zuletzt geladen und ist der Ort fuer die FORM. In start.css
   beschriebe man dieselbe Sache noch einmal an zweiter Stelle, und die
   beiden liefen beim naechsten Mal auseinander.
   ===================================================================== */
.kachel__zeichen {
  --z-fase: 9px;
  position: relative;
  border: 0;
  border-radius: 0;
  padding: 2px;
  overflow: visible;
  clip-path: polygon(
    var(--z-fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--z-fase));
  /* Gebuerstetes Metall, rund gedreht -- rund heisst conic. Die Lehre
     von heute Nachmittag: Die Verlaufsart muss zur FORM passen. */
  /* GEDAEMPFT, aber mit demselben Wechsel. Der erste Anlauf war fast
     weiss -- auf 2 px Breite las sich das als greller Rahmen, und die
     Fassung zog mehr Aufmerksamkeit als das Zeichen darin. Eine
     Fassung ist Beiwerk; sie soll das Schild halten, nicht mit ihm
     konkurrieren. Also dieselben Stopps, nur eine Blende dunkler --
     der Wechsel hell/dunkel bleibt, und mit ihm das Metall. */
  background:
    conic-gradient(from 210deg,
      #b9c8da 0deg, #5a6b80 44deg, #d6e2ef 88deg, #44536a 140deg,
      #aebdd0 196deg, #64758c 244deg, #cddaea 296deg, #4e5d73 340deg,
      #b9c8da 360deg);
  box-shadow:
    0 6px 16px -8px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(6, 10, 18, .55);
}
/* Das Schild IM Ring -- hier liegt die Farbe der Kategorie. */
.kachel__zeichen::before {
  content: "";
  position: absolute; inset: 2px;
  z-index: 0;
  pointer-events: none;
  clip-path: polygon(
    calc(var(--z-fase) - 2px) 0, 100% 0, 100% 100%, 0 100%,
    0 calc(var(--z-fase) - 2px));
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .04) 26%, transparent 52%),
    radial-gradient(120% 100% at 22% 8%,
      color-mix(in srgb, var(--ton, var(--akzent)) 58%, transparent) 0%,
      color-mix(in srgb, var(--ton, var(--akzent)) 26%, transparent) 48%,
      color-mix(in srgb, var(--ton, var(--akzent)) 10%, transparent) 100%),
    linear-gradient(#0a0f18, #0a0f18);
}
/* Beim Anfassen hebt sich das Schild leicht -- kein Leuchten, nur
   Naehe. Dieselbe Sprache wie bei der Karte selbst. */
.kachel:hover .kachel__zeichen {
  transform: translateY(-1px);
  border-color: transparent;
  box-shadow:
    0 10px 22px -9px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(6, 10, 18, .55),
    0 0 14px -4px color-mix(in srgb, var(--ton, var(--akzent)) 55%, transparent);
}
/* DIE GROSSE KACHEL FUEHRT IHRE EIGENE RUNDUNG -- zweimal sogar
   (start.css, 21 px und 18 px), und beide sind mit `.kachel[…] .x`
   staerker als eine einzelne Klasse. Gemessen: `border-radius: 18px`,
   obwohl module.css `0` setzt und zuletzt geladen wird. Die Fase kam
   durch (die setzt sonst niemand), die Rundung blieb -- heraus kam ein
   Schild mit abgeschnittener Ecke UND runden Ecken.

   Dieselbe Falle wie heute schon zweimal: `:where()` war zu schwach,
   `body.start .willkommen` zu stark, und hier ist es die Verschachtelung.
   Deshalb steht die Antwort hier mit derselben Gewichtung wie die
   Rundung, die sie ersetzt. */
.kachel[data-gross="ja"] .kachel__zeichen,
.kachel .kachel__zeichen {
  --z-fase: 11px;
  border-radius: 0;
}

@media (forced-colors: active) {
  /* Im Kontrastmodus zaehlt die Kante. Die Fase bleibt -- sie ist
     Geometrie, keine Farbe. */
  .kachel__zeichen { background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
  .kachel__zeichen::before { display: none; }
}