praxis-methoden/notfall.html at main · shelynx79/praxis-methoden · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { background: transparent; overflow: hidden; }
  body {
    font-family: 'Roboto', sans-serif;
    padding:  0;
  }
  .notfall-block {
    max-width: 680px;
    margin: 0 auto;
    background: #5B8FA8;
    border-radius: 4px;
    padding: 28px 32px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }
  .notfall-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .notfall-inhalt {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .notfall-titel {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #D4B08A;
  }
  .notfall-text {
    font-size: 0.93rem;
    font-weight: 300;
    color: rgba(250,250,247,0.92);
    line-height: 1.75;
  }
  .notfall-text a {
    color: #FAFAF7;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .notfall-text a:hover {
    color: #D4B08A;
  }
</style>
</head>
<body>
<div class="notfall-block">
  <div class="notfall-inhalt">
    <span class="notfall-titel">Notfall</span>
    <p class="notfall-text">
      Wenn Sie dringend psychologische Hilfe benötigen, finden Sie auf unserer
      <a href="/notfall" target="_top">Notfallseite</a> eine Übersicht mit wichtigen Telefonnummern
      und Anlaufstellen. Bitte zögern Sie nicht, in akuten Krisensituationen sofort
      Unterstützung in Anspruch zu nehmen.
    </p>
  </div>
</div>
<script>
  function sendHeight() {
    var el = document.querySelector('.notfall-block');
    var h = el ? el.getBoundingClientRect().bottom : document.body.scrollHeight;
    window.parent.postMessage({ iframeHeight: Math.ceil(h) }, '*');
  }
  window.addEventListener('load', function() { setTimeout(sendHeight, 100); });
  window.addEventListener('resize', sendHeight);
</script>
</body>
</html>