dogfather-universe/workspace/anruf-probe.html

<!DOCTYPE html>
<html lang="de" data-haus="crew">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Anruf-Probe · Team Dogi</title>
<meta name="robots" content="noindex, nofollow" />
<!-- KORRIGIERT AM 19.09.2026. Hier standen `basis.css` und `kopf.css` --
     zwei Dateien, die es im Haus gar nicht gibt. Die Seite lud sie bei
     jedem Aufruf ins Leere und stand damit OHNE die Hausfarben da; die
     Angaben darunter (var(--text-leise) usw.) liefen ins Nichts.

     Ausgerechnet auf dieser Seite faellt das nicht auf: Sie hat ihre
     eigene Stilangabe im Kopf, damit sie auch dann noch etwas anzeigt,
     wenn die Stilvorlagen klemmen -- und genau die hat den Mangel
     verdeckt. Gefunden hat es pruef-struktur.

     Richtig sind `gate.css` (die Farbwerte des Hauses) und `haus.css`. -->
<link rel="stylesheet" href="assets/css/gate.css?v=202609191035" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609191035" />
<!-- Ohne diese drei nimmt ein iPhone einen Bildschirmausschnitt als
     Symbol, Android zeichnet die Leiste weiss, und die Seite oeffnet
     ausserhalb der App -- auf einer Seite, die genau erklaeren soll,
     WARUM das Telefon nicht klingelt, ist das besonders unpassend. -->
<link rel="manifest" href="/workspace/crew.webmanifest?v=202609191018" />
<meta name="theme-color" content="#06090f" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609191035" />
<style>
  /* Bewusst in der Seite und nicht in einer eigenen Datei: Diese Seite
     soll auch dann noch etwas anzeigen, wenn genau das schiefgeht,
     was sie untersucht -- eine Stilvorlage, die aus dem
     Zwischenspeicher kommt. */
  .probe { max-width: 46rem; margin: 0 auto; padding: 1.4rem 1rem 3rem; }
  .probe h1 { margin: .2rem 0 .3rem; }
  .probe__unter { color: var(--text-leise); margin: 0 0 1.4rem; }
  .punkt {
    display: flex; gap: .8rem; align-items: flex-start;
    padding: .85rem 1rem; margin-bottom: .6rem;
    border: 1px solid var(--rand); border-radius: .7rem;
    background: rgba(255,255,255,.02);
  }
  .punkt__zeichen { font-size: 1.1rem; line-height: 1.4; flex: 0 0 1.4rem; }
  .punkt__text { flex: 1; min-width: 0; }
  .punkt__titel { font-weight: 600; margin: 0 0 .15rem; }
  .punkt__satz { margin: 0; color: var(--text-leise); font-size: .9rem; }
  .punkt[data-stand="gut"]   { border-color: rgba(120, 200, 150, .4); }
  .punkt[data-stand="warn"]  { border-color: rgba(220, 180, 110, .45); }
  .punkt[data-stand="schlecht"] { border-color: rgba(230, 140, 140, .5); }
  .probe__knopf { margin: 1.2rem 0 .4rem; }
  .probe__ende {
    margin-top: 1.6rem; padding: 1rem;
    border-radius: .7rem; border: 1px dashed var(--rand-hell);
    color: var(--text-leise); font-size: .92rem;
  }
</style>
</head>
<body class="haus">
<header class="kopfleiste">
  <a class="kopfleiste__zurueck" href="chat.html">‹ Zum Chat</a>
  <div class="kopfleiste__mitte"><span class="kopfleiste__titel">Anruf-Probe</span></div>
  <div class="kopfleiste__rechts"></div>
</header>

<main class="probe">
  <h1>Warum klingelt es nicht?</h1>
  <p class="probe__unter">
    Diese Seite geht der Reihe nach durch, was ein Anruf braucht – und sagt,
    an welcher Stelle es hakt. Sie ruft niemanden an.
  </p>

  <div id="ergebnis"></div>

  <button type="button" class="knopf probe__knopf" id="ton-probe">Klingelton anhören</button>

  <p class="probe__ende" id="rat"></p>
</main>

<script src="assets/js/anruf-probe.js?v=202609191035" defer></script>
</body>
</html>