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; }
}

.w-kachel {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  min-height: 44px;
  padding: 14px 15px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein, 12px);
  background: color-mix(in srgb, var(--flaeche) 88%, transparent);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--tempo, .18s) ease,
              background-color var(--tempo, .18s) ease,
              transform var(--tempo, .18s) ease;
}

.w-kachel:hover,
.w-kachel:focus-visible {
  border-color: color-mix(in srgb, var(--akzent) 55%, var(--rand));
  background: color-mix(in srgb, var(--flaeche) 100%, transparent);
  transform: translateY(-1px);
}

.w-kachel__zeichen {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--akzent) 14%, transparent);
  color: 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: 5px;
  font-size: .85rem;
  line-height: 1.56;
  color: var(--text-still);
}

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