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

/* =====================================================================
   VERTRAULICH MELDEN (19.09.2026)

   Der Ton dieser Seite ist bewusst RUHIGER als der Rest des Hauses.
   Wer hier schreibt, hat meist Ärger — eine Seite, die dabei glitzert,
   wirkt unernst. Keine Verläufe über die ganze Fläche, keine Bewegung,
   keine leuchtenden Kacheln. Die Farbe (Ton 39, #1acae2) kommt nur an
   den Rändern vor.
   ===================================================================== */

:root { --hilfe-ton: #1acae2; }

/* ---- Der Hinweis, wer mitliest -------------------------------------- */
.vertrauen {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin: 1.2rem 0 0;
  padding: 1rem 1.1rem;
  border-radius: .8rem;
  border: 1px solid color-mix(in srgb, var(--hilfe-ton) 32%, transparent);
  background: color-mix(in srgb, var(--hilfe-ton) 7%, transparent);
}
.vertrauen__zeichen {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem;
}
.vertrauen__zeichen svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: color-mix(in srgb, var(--hilfe-ton) 75%, #dceaf8);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.vertrauen__text {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--text-leise, #93a7bd);
}
.vertrauen__text strong { color: #e9f2fb; }

/* ---- Blöcke ---------------------------------------------------------- */
.hilfe-block { margin: 1.6rem 0 0; }
.hilfe-block__kopf {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 .8rem;
}
.hilfe-block__titel { margin: 0; font-size: 1.1rem; }
.hilfe-block__zahl {
  font-size: .8rem;
  padding: .1rem .5rem;
  border-radius: 1rem;
  border: 1px solid var(--rand, #26374b);
  color: var(--text-leise, #93a7bd);
}
.hilfe-block__kopf .knopf { margin-left: auto; }

.hilfe-leer {
  margin: 0;
  padding: 1.1rem;
  border: 1px dashed var(--rand, #26374b);
  border-radius: .7rem;
  color: var(--text-leise, #93a7bd);
}

/* ---- Eine Zeile in der Liste ---------------------------------------- */
.fall-zeile {
  padding: .9rem 1rem;
  margin-bottom: .55rem;
  border: 1px solid var(--rand, #26374b);
  border-left: 3px solid var(--rand, #26374b);
  border-radius: .6rem;
  background: var(--flaeche, rgba(255,255,255,.02));
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}
.fall-zeile:hover,
.fall-zeile:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--hilfe-ton) 35%, var(--rand, #26374b));
}
/* DIE FARBE SAGT, WER DRAN IST — nicht, wie schlimm es ist.
   Ein rotes "dringend" wäre hier falsch: Jede Meldung ist für den,
   der sie schreibt, dringend. */
.fall-zeile[data-stand="wartet_auf_antwort"] { border-left-color: #d9a441; }
.fall-zeile[data-stand="antwort_da"]         { border-left-color: var(--hilfe-ton); }
.fall-zeile[data-stand="geschlossen"]        { border-left-color: #4a5b70; opacity: .72; }

.fall-zeile__oben {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.fall-zeile__titel { margin: 0; font-size: 1rem; line-height: 1.35; }
.fall-zeile__unten {
  display: flex; gap: .75rem; flex-wrap: wrap;
  margin: .45rem 0 0;
  font-size: .8rem;
  color: var(--text-leise, #93a7bd);
}
.fall-zeile__wer { color: #cfe0f0; }

.fall-marke {
  flex: 0 0 auto;
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .12rem .5rem;
  border-radius: 1rem;
  border: 1px solid currentColor;
}
.fall-marke[data-stand="wartet_auf_antwort"] { color: #d9a441; }
.fall-marke[data-stand="antwort_da"]         { color: var(--hilfe-ton); }
.fall-marke[data-stand="geschlossen"]        { color: #7d90a6; }

/* ---- Der Verlauf ----------------------------------------------------- */
.fall-kopf {
  display: flex; gap: .7rem; flex-wrap: wrap; align-items: center;
  margin: 0 0 1rem;
  font-size: .82rem;
  color: var(--text-leise, #93a7bd);
}
.fall-kopf__wer { color: #cfe0f0; }

.blase {
  max-width: 44rem;
  padding: .8rem 1rem;
  margin-bottom: .7rem;
  border-radius: .7rem;
  border: 1px solid var(--rand, #26374b);
}
/* Zwei Seiten, zwei Ausrichtungen. Auf dem Handy genügt der Versatz —
   zwei Spalten wären dort zu eng. */
.blase[data-seite="melder"] {
  background: rgba(255,255,255,.025);
}
.blase[data-seite="leitung"] {
  margin-left: auto;
  border-color: color-mix(in srgb, var(--hilfe-ton) 30%, transparent);
  background: color-mix(in srgb, var(--hilfe-ton) 6%, transparent);
}
.blase__wer {
  margin: 0 0 .3rem;
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-leise, #93a7bd);
}
.blase__text {
  margin: 0;
  /* Zeilenumbrüche aus dem Text erhalten, ohne HTML zuzulassen. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}
.blase__fuss {
  margin: .45rem 0 0;
  font-size: .74rem;
  color: var(--text-leise, #93a7bd);
}

/* ---- Formulare ------------------------------------------------------- */
.hilfe-form { margin: .4rem 0 0; }
.hilfe-form--antwort { margin-top: 1.1rem; }
.hilfe-form .feld { display: block; margin-bottom: .9rem; }
.hilfe-form .feld__schild {
  display: block;
  margin-bottom: .35rem;
  font-size: .86rem;
  color: #cfe0f0;
}
.hilfe-form .feld__pflicht {
  font-size: .76rem;
  color: var(--text-leise, #93a7bd);
}
.hilfe-form input[type="text"],
.hilfe-form textarea {
  width: 100%;
  padding: .7rem .85rem;
  border-radius: .55rem;
  border: 1px solid var(--rand, #26374b);
  background: rgba(0,0,0,.25);
  color: #e9f2fb;
  font: inherit;
  line-height: 1.5;
}
.hilfe-form textarea { resize: vertical; min-height: 6rem; }
.hilfe-form input:focus-visible,
.hilfe-form textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--hilfe-ton) 60%, transparent);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--hilfe-ton) 45%, transparent);
}
.hilfe-form__hinweis {
  margin: 0 0 .9rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-leise, #93a7bd);
}
.hilfe-form__fuss {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.hilfe-form__stand {
  font-size: .82rem;
  color: var(--text-leise, #93a7bd);
}

.fall-warten {
  margin: 1.1rem 0 0;
  padding: .9rem 1rem;
  border-radius: .6rem;
  border: 1px dashed var(--rand-hell, #33465e);
  color: var(--text-leise, #93a7bd);
  font-size: .9rem;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .fall-zeile { transition: none; }
  .fall-zeile:hover { transform: none; }
}