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=202609211701" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609211701" />
<!-- 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" />
<meta name="theme-color" content="#06090f" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609211701" />
<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. */
  /* DIE KOPFLEISTE WAR NIE GESTALTET (nachgetragen 19.09.2026).

     Gefunden von pruef-css-klassen: `.kopfleiste`, `.kopfleiste__zurueck`,
     `.kopfleiste__mitte` und `.kopfleiste__titel` stehen in KEINER
     Stilvorlage des Hauses -- sie leben in start.css bzw. crew-haus.css,
     und genau die lädt diese Seite absichtlich nicht.

     Ergebnis war eine Leiste aus nacktem Text: der Zurück-Weg ein
     blasser Link irgendwo links oben, der Titel daneben in Fließtext.
     Ausgerechnet auf der Seite, die man aufruft, WEIL schon etwas nicht
     funktioniert -- da sieht unfertig aus wie kaputt.

     Sie stehen hier und nicht in einer Datei, aus demselben Grund wie
     alles andere auf dieser Seite: Sie soll auch dann noch etwas
     anzeigen, wenn genau das schiefgeht, was sie untersucht. */
  .kopfleiste {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .9rem;
    border-bottom: 1px solid var(--rand);
    background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
  }
  .kopfleiste__zurueck {
    /* 44 px hoch: Das ist die Größe, die ein Daumen sicher trifft.
       Auf einem Handy ist dieser Knopf der einzige Weg zurück. */
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 .7rem 0 .2rem;
    color: var(--text-leise); text-decoration: none;
    font-size: .92rem; border-radius: .5rem;
  }
  .kopfleiste__zurueck:hover,
  .kopfleiste__zurueck:focus-visible { color: var(--text); }
  .kopfleiste__mitte { flex: 1; min-width: 0; text-align: center; }
  .kopfleiste__titel {
    font-size: .92rem; font-weight: 600; color: var(--text);
    letter-spacing: .01em;
  }
  /* Gleich breit wie der Zurück-Weg, damit der Titel wirklich mittig
     steht statt nur ungefähr. */
  .kopfleiste__rechts { flex: 0 0 4.5rem; }
  @media (max-width: 420px) {
    .kopfleiste__rechts { flex-basis: 0; }
    .kopfleiste__mitte { text-align: right; }
  }

  .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); }
  /* 44 px auf Geraeten, die mit dem Finger bedient werden
     (19.09.2026). Diese Seite laedt module.css bewusst nicht --
     sie soll auch dann noch stehen, wenn Stilvorlagen klemmen.
     Also gilt die Regel hier eigens. */
  .probe__knopf { margin: 1.2rem 0 .4rem; }
  @media (pointer: coarse) { .probe__knopf { min-height: 44px; } }
  .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" id="zurueck-weg" href="start.html">‹ Zurück</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=202609211701" defer></script>
</body>
</html>