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

/* =====================================================================
   willkommen.css — die persoenliche Einfuehrung
   =====================================================================

   Auftrag vom 21.09.2026, Abschnitte 7 und 8.

   DIE SEITE IST EIN TEXT, KEIN ARMATURENBRETT. Wer sie oeffnet, ist
   meist zum ersten Mal hier und weiss noch gar nicht, wonach er sucht.
   Deshalb: eine Spalte, grosszuegige Zeilenhoehe, und die Kacheln
   darunter als Liste mit Erklaerung -- nicht als zweites Kachelraster,
   das wie die Startseite aussieht und doch etwas anderes tut.

   Alle Farben kommen aus den Hausvariablen. Eine eigene Palette hier
   waere die, die beim naechsten Farbwechsel stehen bleibt.
   ===================================================================== */

/* KEIN EIGENER BEHAELTER (berichtigt 21.09.2026).
   Hier stand `.huelle { max-width: 54rem }` -- eine Klasse, die es im
   ganzen Haus nicht gibt. Der Inhalt stand dadurch linksbuendig statt
   mittig, ohne Sicherheitsrand an randlosen Geraeten. Die Seite nimmt
   jetzt `.inhalt` wie jede andere; `befinden.html` ist das Vorbild,
   weil sie ebenfalls eine Lese- und keine Rasterseite ist. */

/* ---------------------------------------------------------------------
   DIE BEGRUESSUNG
   ---------------------------------------------------------------------

   Der Name ist das Erste, was ein Mensch auf einer Seite sucht, die
   "Willkommen" heisst. Er steht deshalb gross und allein. */
/* AUF EIGENER FLAECHE, NICHT AUF DEM BILD (berichtigt 21.09.2026).
   ------------------------------------------------------------------
   Gemessen mit pruef-buehne: Kontrast 1.68:1 am Rechner, 2.23:1 am
   Handy -- noetig sind 4.5. Der Text stand direkt auf dem
   Buehnenbild, und dort ist ein heller Hund.

   Die Hausregel steht in start.css neben dem Schleier und sagt es
   schon: "Der Text braucht das nicht mehr -- er steht auf eigenen
   Flaechen." Genau daran hielt sich diese Seite als einzige nicht. */
.w-gruss {
  margin: 6px 0 28px;
  padding: 20px 22px;
  border: 1px solid var(--rand);
  border-radius: var(--radius, 16px);
  background: color-mix(in srgb, var(--flaeche) 94%, transparent);
}

.w-gruss__titel {
  margin: 0;
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: -.01em;
}

/* Die Rolle als ruhige Marke darunter -- sie ordnet ein, ohne zu
   ranghoeheln. Kein Grossbuchstaben-Schild, das wie ein Ausweis
   aussieht. */
.w-gruss__rolle {
  display: inline-block;
  margin: 10px 0 0;
  padding: 5px 12px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: color-mix(in srgb, var(--akzent) 10%, transparent);
  color: var(--text-leise);
  font-size: .84rem;
}

.w-gruss__was {
  margin: 16px 0 0;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--text);
}

.w-gruss__dazu {
  margin: 8px 0 0;
  font-size: .96rem;
  line-height: 1.62;
  color: var(--text-leise);
  max-width: 46rem;
}

/* ---------------------------------------------------------------------
   DIE HINWEISE ZUR ROLLE
   ---------------------------------------------------------------------

   Ein paar Saetze, die zu keiner einzelnen Kachel gehoeren. Sie stehen
   VOR den Kacheln, weil sie erklaeren, wie man mit ihnen umgeht. */
.w-hinweise {
  display: grid;
  gap: 10px;
  margin: 0 0 30px;
}

.w-hinweis {
  padding: 14px 16px;
  border: 1px solid var(--rand);
  border-left: 3px solid color-mix(in srgb, var(--akzent) 60%, transparent);
  border-radius: var(--radius-klein, 12px);
  background: color-mix(in srgb, var(--flaeche) 90%, transparent);
}

.w-hinweis__titel {
  margin: 0 0 5px;
  font-size: .95rem;
  font-weight: 600;
}

.w-hinweis__text {
  margin: 0;
  font-size: .9rem;
  line-height: 1.58;
  color: var(--text-leise);
}

/* ---------------------------------------------------------------------
   WAS ES HIER GIBT
   --------------------------------------------------------------------- */
/* Auch die Ueberschrift "Was es hier gibt" und ihr Satz standen frei
   auf dem Bild -- sie waren die schlechteste gemessene Stelle. */
.w-bereiche {
  padding: 16px 18px;
  border: 1px solid var(--rand);
  border-radius: var(--radius, 16px);
  background: color-mix(in srgb, var(--flaeche) 90%, transparent);
}

.w-bereiche__titel {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.w-bereiche__satz {
  margin: 0 0 20px;
  font-size: .9rem;
  color: var(--text-leise);
}

.w-gruppe { margin: 0 0 26px; }

.w-gruppe__titel {
  margin: 0 0 10px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-still);
}

/* EINE SPALTE, NICHT ZWEI. Zwei Spalten haetten hier eine Zeile je
   Kachel erzwungen -- und genau die Erklaerung weggekuerzt, wegen der
   es die Seite gibt. Ab Tablet duerfen es zwei sein, weil dann beide
   Spalten breit genug fuer den langen Satz bleiben. */
.w-raster {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .w-raster { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   DIE KACHELN -- IN DEN FARBEN DER STARTSEITE (22.09.2026)
   ---------------------------------------------------------------------

   Filipe: "die kacheln in der willkommens seite sollen die selben
   farben haben wie in der startseite. mach das richtig ultra geil
   bitte. die seite soll mega aussehen."

   DIE FARBE WIRD NICHT NEU VERGEBEN, SONDERN GEERBT. Der Server
   schickt `ton`, die Kachel traegt `data-ton="N"`, und `start.css`
   macht daraus `--ton` -- dieselbe Zeile, aus der die Startseite ihre
   Farbe nimmt. Eine eigene Tabelle hier waere die, die beim naechsten
   Farbwechsel stehen bleibt; genau das ist am 19.09. elf Seiten
   passiert.

   DREI STELLEN TRAGEN DIE FARBE, und keine davon ist eine Flaeche:
   das Zeichen, eine schmale Kante links, und ein ganz leiser Schimmer
   in der oberen Ecke. Eine eingefaerbte Kachelflaeche waere bunt und
   schlecht lesbar -- die Startseite macht es genauso.
   --------------------------------------------------------------------- */
/* HIER STAND `--ton: var(--akzent)` ALS VORGABE -- und hat alles
   kaputtgemacht (berichtigt 22.09.2026).

   `[data-ton="N"] { --ton: … }` steht in start.css und hat dieselbe
   Spezifitaet (0,1,0) wie diese Regel. willkommen.css laedt SPAETER,
   also gewann die Vorgabe, und jede Kachel war blau. Gemessen: 0 von
   14 Kacheln trugen die Farbe der Startseite.

   Der Rueckfall gehoert deshalb an die VERWENDUNG (`var(--ton, …)`)
   und nicht an die Deklaration -- dort greift er nur, wenn wirklich
   nichts gesetzt ist. */
.w-kachel {
  position: relative;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  min-height: 44px;
  padding: 15px 16px 15px 18px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein, 12px);
  overflow: hidden;
  background:
    /* Der Schimmer sitzt oben links, dort, wo auch das Zeichen steht --
       so wirkt er wie Licht auf dem Zeichen und nicht wie ein Fleck. */
    radial-gradient(70% 90% at 0% 0%,
      color-mix(in srgb, var(--ton, var(--akzent)) 13%, transparent), transparent 70%),
    color-mix(in srgb, var(--flaeche) 90%, transparent);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--tempo, .18s) ease,
              background-color var(--tempo, .18s) ease,
              transform var(--tempo, .18s) ease,
              box-shadow var(--tempo, .18s) ease;
}

/* DIE KANTE LINKS -- als eigenes Element, nicht als `border-left`.
   Ein farbiger Rahmenrand haette die Ecken mitgefaerbt und dabei
   getreppt ausgesehen; so laeuft sie sauber durch. */
.w-kachel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg,
    var(--ton, var(--akzent)),
    color-mix(in srgb, var(--ton, var(--akzent)) 35%, transparent));
}

.w-kachel:hover,
.w-kachel:focus-visible {
  border-color: color-mix(in srgb, var(--ton, var(--akzent)) 55%, var(--rand));
  background:
    radial-gradient(70% 90% at 0% 0%,
      color-mix(in srgb, var(--ton, var(--akzent)) 20%, transparent), transparent 72%),
    color-mix(in srgb, var(--flaeche) 100%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -16px color-mix(in srgb, var(--ton, var(--akzent)) 70%, transparent);
}

.w-kachel__zeichen {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 30%, transparent);
  background: color-mix(in srgb, var(--ton, var(--akzent)) 16%, transparent);
  color: var(--ton, var(--akzent));
}

.w-kachel__zeichen svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
}

.w-kachel__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;   /* sonst sprengt ein langes Wort die Spalte */
}

.w-kachel__name {
  font-size: .99rem;
  font-weight: 600;
  line-height: 1.3;
}

.w-kachel__unter {
  font-size: .86rem;
  color: var(--text-leise);
  line-height: 1.4;
}

/* Der lange Satz ist bewusst etwas kleiner und ruhiger: Er ist die
   Vertiefung, nicht die Ueberschrift. */
.w-kachel__lang {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
  font-size: .85rem;
  line-height: 1.56;
  color: var(--text-still);
}

/* DIE BREITE KACHEL bleibt auch hier breit -- sie ist auf der
   Startseite doppelt so gross, und wer von dort kommt, sucht sie an
   derselben Stelle. */
@media (min-width: 900px) {
  .w-kachel[data-gross="ja"] { grid-column: span 2; }
}

/* ---------------------------------------------------------------------
   DIE ZUSTAENDE
   --------------------------------------------------------------------- */
.w-laedt,
.w-leer {
  margin: 18px 0;
  color: var(--text-leise);
  font-size: .92rem;
  line-height: 1.55;
}

/* ---------------------------------------------------------------------
   KONTRASTMODUS UND BEWEGUNGSARMUT
   ---------------------------------------------------------------------

   Im Kontrastmodus werden Fuellfarben ersetzt -- eine Kachel, die sich
   nur durch ihren Hintergrund abhebt, verschwindet dort. Deshalb bekommt
   sie eine echte Kante, die stehen bleibt. */
@media (forced-colors: active) {
  .w-kachel,
  .w-hinweis {
    border: 1px solid CanvasText;
  }
  .w-kachel:hover,
  .w-kachel:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  .w-kachel__zeichen {
    border: 1px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w-kachel { transition: none; }
  .w-kachel:hover,
  .w-kachel:focus-visible { transform: none; }
}