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

/* =====================================================================
   UNTERSTÜTZEN (24.09.2026)
   =====================================================================

   Filipe: „ich brauch auch noch eine kachel im community bereich. wo
   mein paypal und meine amazon liste sein wird. wo die leute alle
   supporten können auf andere art anstatt nur tiktok. … mach das
   richtig geil, übertrieben geil."

   ---------------------------------------------------------------------
   DIE GESTALTUNG HAT EINE AUFGABE, UND DIE IST NICHT „SCHÖN"

   Auf dieser Seite steht eine Bitte um Geld. Solche Seiten sehen
   üblicherweise laut aus: große Knöpfe, Ausrufezeichen, ein Balken mit
   einem Ziel. Das funktioniert einmal und fühlt sich danach unangenehm
   an — für beide Seiten.

   Deshalb hier das Gegenteil, und zwar konsequent:

     DIE DREI ARTEN SIND GLEICH GROSS. „Kostet nichts" bekommt dieselbe
     Kartenform wie PayPal. Wären die freien Wege kleiner oder weiter
     unten, wäre die Aussage „das ist die zweite Wahl" — und die
     Mehrheit derer, die hier lesen, wäre damit zweite Wahl.

     DIE FARBE KOMMT VON DER KANTE, nicht von der Fläche. Ein Streifen
     oben und ein Hauch Verlauf darunter; der Rest bleibt die ruhige
     Hausfläche. Eine vollflächig eingefärbte Karte schreit, und diese
     Seite soll nicht schreien.

     KEIN ZÄHLER FÜR DIE COMMUNITY. Wie oft ein Weg benutzt wurde,
     sieht nur DogFather. Eine öffentliche Zahl wäre Druck („erst 3 von
     100") oder Beschämung — je nachdem, wie sie ausfällt.

   AUGENSCHONEND (Hausregel): keine Leuchtkanten, kein Puls, keine
   Bewegung außer einem kurzen Farbwechsel beim Überfahren.
   ===================================================================== */

/* ---- Die Gruppen ---------------------------------------------------- */
.u-gruppe { margin: 30px 0 0; }
/* DIE ÜBERSCHRIFT STEHT AUF EINER FLÄCHE, NICHT AUF DEM FOTO.

   Gemessen am ersten Bildschirmfoto: Der Text lag direkt auf der Bühne
   — und über einem Bild lässt sich Lesbarkeit nicht ausrechnen, weil
   das Dahinter von Motiv zu Motiv wechselt. Das ist genau der Fall,
   für den die Kontrastmessung des Hauses ihren dritten Ausgang hat
   („konnte nicht nachsehen").

   Die Antwort darauf ist keine hellere Schrift, sondern eine deckende
   Fläche. `--flaeche` ist die des Hauses und mehrfach nachgemessen. */
.u-gruppe__kopf {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 11px;
  margin: 0 0 13px;
  padding: 7px 14px;
  border: 1px solid var(--rand); border-radius: 999px;
  background: var(--flaeche);
}
.u-gruppe__titel {
  margin: 0;
  font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-leise);
}
.u-gruppe__satz { margin: 0; font-size: .82rem; color: var(--text-still); }

.u-gitter {
  display: grid; gap: 14px;
  /* Dieselbe Rechenweise wie bei den Personenkacheln: `auto-fill` legt
     feste Spalten an, damit eine allein stehende Karte in der letzten
     Zeile nicht auf die volle Breite wächst und dadurch wichtiger
     aussieht als die anderen. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* ---- Eine Karte ----------------------------------------------------- */
.u-weg {
  --wton: var(--akzent);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 9px;
  min-width: 0;
  padding: 20px 20px 18px;
  border: 1px solid var(--rand);
  border-radius: var(--radius, 18px);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--wton) 9%, transparent), transparent 48%),
    color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
  transition: border-color .16s ease;
}
.u-weg:hover { border-color: color-mix(in srgb, var(--wton) 38%, var(--rand)); }
/* DIE KANTE IST DIE FARBE. Oben ein Streifen, der nach rechts
   ausläuft — so bleibt die Fläche darunter ruhig lesbar. */
.u-weg::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg,
    var(--wton), color-mix(in srgb, var(--wton) 30%, transparent) 55%, transparent);
}
/* Drei Arten, drei Töne. Sie stehen HIER und nicht in der Datenbank:
   Eine Farbe ist Gestaltung, kein Inhalt — und aus der Datenbank
   käme sie ungeprüft in ein Stilblatt. */
.u-weg[data-art="geld"]     { --wton: #f0b25a; }
.u-weg[data-art="geschenk"] { --wton: #79d1c4; }
.u-weg[data-art="frei"]     { --wton: var(--akzent); }

.u-weg__kopf { display: flex; align-items: center; gap: 13px; }
.u-weg__zeichen {
  flex: none;
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  color: var(--wton);
  background: color-mix(in srgb, var(--wton) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--wton) 28%, transparent);
}
.u-weg__zeichen svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.u-weg__zeichen svg .voll { fill: currentColor; stroke: none; }

.u-weg__namen { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.u-weg__titel {
  margin: 0;
  font-size: 1.06rem; font-weight: 650; color: var(--text);
  overflow-wrap: anywhere;
}
.u-weg__marke {
  align-self: flex-start;
  /* 0,72rem = 11,52 px -- die Lesbarkeitsgrenze des Hauses liegt bei
     11,5. Hier stand 0,68rem (10,88 px), und der Handy-Rundgang hat
     es gemeldet: „zu kleine Schrift: Direkt 10.88px, Schenken 10.88px".

     DER REFLEX, DER DAHINTERSTECKT: Eine Marke soll leise sein, also
     macht man sie klein. Leise wird sie aber durch FARBE und Gewicht,
     nicht durch Groesse -- eine Schrift, die man nicht lesen kann, ist
     nicht leise, sondern weg. Derselbe Griff ist mir am 24.09. dreimal
     an einem Tag passiert (Abzeichen, Uhrzeit, Zaehler). */
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  color: color-mix(in srgb, var(--wton) 72%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--wton) 32%, transparent);
  background: color-mix(in srgb, var(--wton) 8%, transparent);
}
.u-weg__text {
  margin: 0;
  font-size: .87rem; line-height: 1.62; color: var(--text-still);
}

/* Der Knopf steht UNTEN und auf einer Linie mit den Nachbarkarten —
   `margin-top: auto` schiebt ihn ans Ende, egal wie lang der Text
   darüber ist. Ohne das säße er bei jeder Karte auf einer anderen
   Höhe, und das Auge müsste ihn jedes Mal neu suchen. */
.u-weg__knopf {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  /* 44px Höhe — die Fingergrenze des Hauses. Dieser Knopf führt zu
     einer Zahlung; ihn zu verfehlen ist ärgerlicher als anderswo. */
  min-height: 44px; padding: 10px 17px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--wton) 42%, transparent);
  background: color-mix(in srgb, var(--wton) 14%, transparent);
  color: color-mix(in srgb, var(--wton) 78%, #ffffff);
  font: inherit; font-size: .88rem; font-weight: 620;
  text-decoration: none; cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.u-weg__knopf:hover {
  background: color-mix(in srgb, var(--wton) 22%, transparent);
  border-color: color-mix(in srgb, var(--wton) 62%, transparent);
}
.u-weg__knopf svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Was nur DogFather sieht ---------------------------------------- */
.u-leitung {
  margin: 22px 0 0; padding: 15px 17px;
  border: 1px solid color-mix(in srgb, var(--akzent) 26%, var(--rand));
  border-radius: var(--radius-klein, 12px);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--akzent) 7%, transparent), transparent 60%),
    color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
}
.u-leitung__kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.u-leitung__titel {
  margin: 0; flex: 1 1 12rem;
  font-size: .95rem; font-weight: 650; color: var(--text);
}
.u-leitung__satz {
  margin: 7px 0 0; font-size: .83rem; line-height: 1.6; color: var(--text-still);
}
.u-leitung__satz[data-warnung="ja"] {
  color: color-mix(in srgb, var(--warn) 50%, #ffffff); font-weight: 600;
}

.u-zahlen {
  display: grid; gap: 8px; margin-top: 13px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.u-zahl {
  padding: 9px 12px;
  border: 1px solid var(--rand); border-radius: 10px;
  background: rgba(255, 255, 255, .03);
}
.u-zahl__n {
  display: block;
  font-size: 1.3rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.u-zahl__text { display: block; font-size: .75rem; color: var(--text-leise); }

/* Die Zeile an der Karte — nur im Änderungsmodus, nur für ihn. */
.u-weg__zahl {
  font-size: .75rem; color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
.u-weg[data-aus="ja"] { opacity: .62; }
.u-weg__aus {
  align-self: flex-start;
  /* Auch hier: 0,7rem sind 11,2 px und damit unter der Hausgrenze.
     Dieselbe Begruendung wie bei der Marke darueber. */
  font-size: .72rem; font-weight: 650;
  padding: 2px 9px; border-radius: 999px;
  color: var(--text-still);
  border: 1px dashed var(--rand-hell);
}

/* ---- Der Änderungsmodus --------------------------------------------- */
/* Die Felder stehen IN der Karte, nicht in einem eigenen Fenster: Man
   sieht beim Tippen, was dabei herauskommt. Ein Dialog über der Seite
   hätte genau das verdeckt, was man gerade ändert. */
.u-form { display: flex; flex-direction: column; gap: 9px; }
.u-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: .76rem; color: var(--text-leise);
}
.u-form input[type="text"],
.u-form input[type="url"],
.u-form textarea,
.u-form select { width: 100%; }
.u-form textarea { min-height: 76px; resize: vertical; }
.u-form__reihe { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.u-form__an {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; color: var(--text-still);
}
.u-form__knoepfe {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px;
}
.u-form__weg {
  margin-left: auto;
  color: color-mix(in srgb, var(--warn) 55%, #ffffff);
  border-color: color-mix(in srgb, var(--warn) 32%, transparent);
}

.u-neu {
  display: grid; place-items: center; gap: 8px;
  min-height: 150px; padding: 20px;
  border: 1px dashed var(--rand-hell); border-radius: var(--radius, 18px);
  background: transparent;
  color: var(--text-leise); font: inherit; font-size: .88rem;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.u-neu:hover { border-color: var(--akzent); color: var(--text); }
.u-neu__plus { font-size: 1.6rem; line-height: 1; }

/* ---- Rand und Ränder ------------------------------------------------- */
.u-laedt { margin: 26px 0; font-size: .88rem; color: var(--text-still); }
/* Auch dieser Satz stand auf dem Foto — und er ist der wichtigste der
   Seite: Er nimmt den Druck weg. Deshalb ebenfalls auf eine deckende
   Flaeche, und nicht nur eine Trennlinie darueber. */
.u-fuss {
  margin: 34px 0 6px; padding: 14px 17px;
  border: 1px solid var(--rand); border-radius: var(--radius-klein, 12px);
  background: var(--flaeche);
  font-size: .84rem; line-height: 1.65; color: var(--text-still);
  max-width: 68ch;
}

/* Am Handy eine Karte je Zeile — zwei nebeneinander wären hier keine
   Übersicht, sondern zwei halbe Texte. Der Unterschied zur
   Personenliste ist Absicht: Dort steht eine Zahl, hier ein Satz. */
@media (max-width: 620px) {
  .u-gitter { grid-template-columns: 1fr; }
  .u-weg { padding: 16px 16px 15px; }
  .u-weg__titel { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .u-weg, .u-weg__knopf, .u-neu { transition: none; }
}

/* Im Kontrastmodus fällt `color-mix` weg — eine Markierung, die nur aus
   einer Tönung besteht, verschwindet dort komplett. Deshalb echte
   Rahmen, die jeden Farbmodus überleben. */
@media (forced-colors: active) {
  .u-weg, .u-weg__zeichen, .u-weg__knopf, .u-weg__marke, .u-zahl {
    border: 1px solid CanvasText;
  }
}