/*
 * Notruf Daheim — Gestaltung
 *
 * Zielgruppe sind ältere Menschen und ihre Angehörigen. Daraus folgen:
 * große Grundschrift, hoher Kontrast, große Klickflächen, keine Animationen,
 * keine Schriften von fremden Servern (Systemschrift, damit kein Abruf bei
 * Google o. Ä. in der Datenschutzerklärung erklärt werden muss).
 *
 * Farben nur aus dem Logo: Rot, Dunkelblau, Weiß – dazu ein kühles Hellgrau
 * für ruhige Flächen. Kein Grün oder Petrol (am 22.10.2026 verworfen: biss
 * sich mit dem Rot).
 */

:root {
  --tinte: #0d2340;
  --tinte-weich: #4a5a70;
  --tinte-hell: #e9edf3;
  --grund: #ffffff;
  --flaeche: #f5f7fa;
  --linie: #e1e6ed;
  --rot: #d10a1f;
  --rot-dunkel: #a8081a;
  --rot-hell: #fdecee;
  --fokus: #f2a900;
  --breite: 1120px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1875rem; /* 19 px */
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--rot); text-underline-offset: 3px; }
a:hover { color: var(--rot-dunkel); }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 20px; }
.schmal { max-width: 780px; }
.mittig { text-align: center; }
.klein { font-size: 1rem; color: var(--tinte-weich); }

.sprungmarke {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinte); color: #fff; padding: 12px 18px; z-index: 100;
}
.sprungmarke:focus { left: 12px; top: 12px; }

/* --- Kopf ---------------------------------------------------------------- */
.kopf {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 10;
}
.kopf .huelle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 72px;
}
.marke {
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  text-decoration: none; color: var(--tinte); font-weight: 800; font-size: 1.55rem;
  letter-spacing: -.02em;
}
.marke:hover { color: var(--tinte); }
.marke svg { width: 42px; height: 42px; flex: none; }
.marke span em { font-style: normal; color: var(--rot); }
.kopf nav { display: flex; align-items: center; gap: 26px; }
.kopf nav a.navlink { color: var(--tinte); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.kopf nav a.navlink:hover { color: var(--rot); }
@media (max-width: 860px) { .kopf nav a.navlink { display: none; } }
@media (max-width: 480px) {
  .kopf .huelle { min-height: 62px; }
  .marke { font-size: 1.2rem; gap: 8px; }
  .marke svg { width: 34px; height: 34px; }
}

/* --- Schaltflächen ------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; white-space: nowrap;
  border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-weight: 700; font-size: 1.05rem;
  text-decoration: none; cursor: pointer;
}
.knopf-rot { background: var(--rot); color: #fff; }
.knopf-rot:hover { background: var(--rot-dunkel); color: #fff; }
.knopf-weiss { background: #fff; color: var(--tinte); }
.knopf-weiss:hover { background: var(--tinte-hell); color: var(--tinte); }
.knopf-gross { min-height: 60px; padding: 0 32px; font-size: 1.15rem; }
.knopf-breit { width: 100%; }
.knopf:disabled { opacity: .6; cursor: wait; }
.textlink { color: var(--tinte); font-weight: 600; text-decoration: none; }
.textlink:hover { color: var(--rot); }

/* --- Einstieg ------------------------------------------------------------ */
.einstieg { padding: 56px 0 64px; background: var(--flaeche); }
.einstieg .huelle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
@media (max-width: 900px) {
  .einstieg .huelle { grid-template-columns: 1fr; gap: 32px; }
  .einstieg .szene { width: 100%; max-width: 620px; margin: 0 auto; }
}
.dachzeile {
  display: inline-block; font-weight: 700; color: var(--rot); font-size: 1rem;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px;
}
.einstieg .lead { font-size: 1.3rem; color: var(--tinte-weich); max-width: 32em; }
.einstieg .knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 28px; }

/* Szenenbild mit kleinen Gerätehinweisen. Die Lage der Hinweise ist auf
   bilder/szene-wohnzimmer.jpg abgestimmt (Gerätemitte in Prozent der
   Bildbreite); bei einem anderen Bild neu ausrichten. */
.szene {
  position: relative; margin: 0; border-radius: 28px; overflow: hidden;
  box-shadow: 0 28px 60px -30px rgba(13, 35, 64, .45);
}
.szene img { width: 100%; height: auto; }
.im-bild {
  position: absolute; top: 79%; transform: translateX(-50%); white-space: nowrap;
  background: rgba(255, 255, 255, .94); color: var(--tinte);
  font-size: .82rem; font-weight: 700; padding: 4px 11px; border-radius: 999px;
  box-shadow: 0 4px 14px -6px rgba(13, 35, 64, .4);
}
.im-bild-eliza { left: 35%; }
.im-bild-abby { left: 68%; }
@media (max-width: 480px) { .im-bild { font-size: .74rem; padding: 3px 8px; } }

/* --- Vorteile ------------------------------------------------------------ */
/* Vier gleich gebaute Spalten: Symbol, Titel, eine kurze Zeile. Die Texte
   sind bewusst so knapp, dass sie nicht unterschiedlich umbrechen. */
.vorteile { border-bottom: 1px solid var(--linie); }
.vorteile ul {
  list-style: none; margin: 0 auto; padding-top: 30px; padding-bottom: 30px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.vorteile li {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 4px 16px;
}
.vorteile li + li { border-left: 1px solid var(--linie); }
.vorteile svg {
  width: 52px; height: 52px; flex: none; padding: 13px; border-radius: 50%;
  background: var(--rot-hell); color: var(--rot);
}
.vorteile span { font-size: 1rem; color: var(--tinte-weich); line-height: 1.4; }
.vorteile strong { display: block; color: var(--tinte); font-size: 1.1rem; margin-bottom: 2px; }
@media (max-width: 900px) {
  .vorteile ul { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .vorteile li:nth-child(3) { border-left: 0; }
}
@media (max-width: 480px) {
  .vorteile ul { gap: 20px 0; }
  .vorteile li { padding: 4px 8px; }
  .vorteile span { font-size: .92rem; }
}

/* --- Abschnitte ---------------------------------------------------------- */
.abschnitt { padding: 80px 0; }
.abschnitt-hell { background: var(--flaeche); }
.unterzeile { color: var(--tinte-weich); font-size: 1.2rem; margin-bottom: 40px; }

/* Ablauf eines Notrufs als ruhige Abfolge in 6 Sekunden: Funkwellen am
   Knopf → Signal läuft zu „Sprechen“ → Tonbalken → Signal läuft zu „Hilfe
   kommt“ → Haus mit Herz leuchtet auf. Alle Teile teilen dieselbe Dauer,
   damit sie im Gleichtakt bleiben. Läuft nur, solange der Abschnitt zu
   sehen ist (Klasse .laeuft aus ablauf.js), und gar nicht bei „Bewegung
   reduzieren“. */
.schritte {
  --takt: 6s;
  list-style: none; margin: 40px 0 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center;
}
.schritte::before { /* Verbindungslinie zwischen den Symbolen */
  content: ""; position: absolute; top: 48px; left: 16.66%; right: 16.66%;
  border-top: 3px dotted #c9d1dc; z-index: 0;
}
.schritte > li:not(.signal) { position: relative; z-index: 1; }
.symbol {
  position: relative; width: 96px; height: 96px; margin: 0 auto 18px;
  border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 6px var(--grund), 0 12px 28px -14px rgba(13, 35, 64, .45);
}
.symbol svg { width: 60px; height: 60px; overflow: visible; }
.symbol .nr {
  position: absolute; right: -4px; top: -4px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--tinte); color: #fff; font-weight: 800; font-size: .95rem;
  display: grid; place-items: center;
}
.schritte h3 { margin-bottom: 6px; }
.schritte p { color: var(--tinte-weich); margin: 0 auto; max-width: 18em; }

.welle { fill: none; stroke: #d10a1f; stroke-width: 2.5; opacity: 0; transform-origin: 32px 32px; }
.balken { transform-box: fill-box; transform-origin: center; }
.herz { transform-box: fill-box; transform-origin: center; }
.signal {
  position: absolute; top: 41px; left: 16.66%; width: 17px; height: 17px; margin-left: -8px;
  border-radius: 50%; background: var(--rot); opacity: 0; z-index: 0;
  box-shadow: 0 0 0 5px rgba(209, 10, 31, .18);
}

@media (prefers-reduced-motion: no-preference) {
  .laeuft .welle { animation: welle var(--takt) ease-out infinite; }
  .laeuft .welle-2 { animation-delay: .35s; }
  .laeuft .signal { animation: signal var(--takt) ease-in-out infinite; }
  .laeuft .balken { animation: sprechen var(--takt) ease-in-out infinite; }
  .laeuft .balken-2 { animation-delay: .12s; }
  .laeuft .balken-3 { animation-delay: .24s; }
  .laeuft .balken-4 { animation-delay: .36s; }
  .laeuft .herz { animation: herz var(--takt) ease-out infinite; }
  .laeuft .schritt-1 .symbol { animation: aktiv-1 var(--takt) infinite; }
  .laeuft .schritt-2 .symbol { animation: aktiv-2 var(--takt) infinite; }
  .laeuft .schritt-3 .symbol { animation: aktiv-3 var(--takt) infinite; }

  /* Einblenden beim ersten Hineinscrollen, Schritt für Schritt */
  .js .schritte > li:not(.signal) { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .js .schritte.sichtbar > li:not(.signal) { opacity: 1; transform: none; }
  .js .schritte.sichtbar > .schritt-2 { transition-delay: .15s; }
  .js .schritte.sichtbar > .schritt-3 { transition-delay: .3s; }
}

@keyframes welle {
  0%   { opacity: .7; transform: scale(1); }
  22%  { opacity: 0;  transform: scale(2.3); }
  100% { opacity: 0;  transform: scale(2.3); }
}
@keyframes signal {
  0%, 16%  { left: 16.66%; opacity: 0; }
  20%      { left: 16.66%; opacity: 1; }
  36%      { left: 50%;    opacity: 1; }
  40%, 62% { left: 50%;    opacity: 0; }
  64%      { left: 50%;    opacity: 1; }
  80%      { left: 83.33%; opacity: 1; }
  84%, 100%{ left: 83.33%; opacity: 0; }
}
@keyframes sprechen {
  0%, 38%, 66%, 100% { transform: scaleY(.45); }
  42% { transform: scaleY(1); }   46% { transform: scaleY(.5); }
  50% { transform: scaleY(1.1); } 54% { transform: scaleY(.6); }
  58% { transform: scaleY(1); }   62% { transform: scaleY(.5); }
}
@keyframes herz {
  0%, 80%  { transform: scale(1); }
  86%      { transform: scale(1.3); }
  92%, 100%{ transform: scale(1); }
}
@keyframes aktiv-1 {
  0%, 22% { box-shadow: 0 0 0 6px var(--grund), 0 0 0 9px var(--rot-hell), 0 12px 28px -14px rgba(13, 35, 64, .45); }
  26%, 100% { box-shadow: 0 0 0 6px var(--grund), 0 12px 28px -14px rgba(13, 35, 64, .45); }
}
@keyframes aktiv-2 {
  0%, 38% { box-shadow: 0 0 0 6px var(--grund), 0 12px 28px -14px rgba(13, 35, 64, .45); }
  40%, 62% { box-shadow: 0 0 0 6px var(--grund), 0 0 0 9px var(--rot-hell), 0 12px 28px -14px rgba(13, 35, 64, .45); }
  66%, 100% { box-shadow: 0 0 0 6px var(--grund), 0 12px 28px -14px rgba(13, 35, 64, .45); }
}
@keyframes aktiv-3 {
  0%, 80% { box-shadow: 0 0 0 6px var(--grund), 0 12px 28px -14px rgba(13, 35, 64, .45); }
  84%, 98% { box-shadow: 0 0 0 6px var(--grund), 0 0 0 9px var(--rot-hell), 0 12px 28px -14px rgba(13, 35, 64, .45); }
  100% { box-shadow: 0 0 0 6px var(--grund), 0 12px 28px -14px rgba(13, 35, 64, .45); }
}

@media (max-width: 760px) {
  .schritte { grid-template-columns: 1fr; gap: 30px; }
  .schritte::before, .signal { display: none; }
}

/* --- Geräte -------------------------------------------------------------- */
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 860px) { .zwei { grid-template-columns: 1fr; } }
.geraet {
  background: #fff; border-radius: 24px; padding: 28px 32px 30px;
  display: flex; flex-direction: column;
}
.geraet img { width: 220px; height: auto; align-self: center; margin-bottom: 8px; }
.ort {
  font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--rot); margin: 0 0 4px;
}
.geraet h3 { font-size: 1.5rem; }
.preis {
  margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--linie);
  color: var(--tinte-weich); font-size: 1.05rem;
}
.preis strong { color: var(--tinte); }

.haken { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.haken li { display: flex; gap: 12px; align-items: flex-start; }
.haken li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 4px; border-radius: 50%;
  background: var(--tinte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}

.enzo {
  margin-top: 28px; background: #fff; border-radius: 24px; padding: 24px 32px;
  display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center;
}
.enzo img { width: 150px; height: auto; }
.enzo p { color: var(--tinte-weich); }
.enzo p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .enzo { grid-template-columns: 1fr; text-align: center; }
  .enzo img { margin: 0 auto; }
}

/* --- Kosten -------------------------------------------------------------- */
.zwei-text { align-items: center; gap: 48px; }
.karte { background: var(--flaeche); border-radius: 24px; padding: 32px; }
.liste-nr { margin: 0 0 24px; padding-left: 1.3em; display: grid; gap: 10px; }
.liste-nr li { padding-left: 4px; color: var(--tinte-weich); }
.liste-nr li::marker { color: var(--rot); font-weight: 800; }
.liste-nr strong { color: var(--tinte); }

/* --- Band: Alltag und Angehörige --------------------------------------- */
.band { background: var(--tinte); color: #fff; padding: 64px 0; }
.band .huelle { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.band img { width: 100%; height: auto; border-radius: 24px; }
.band h2 { color: #fff; }
.band p { color: #c8d1dd; max-width: 34em; }
.band .knopf { margin-top: 8px; }
@media (max-width: 860px) { .band .huelle { grid-template-columns: 1fr; gap: 28px; } }

/* --- Fragen -------------------------------------------------------------- */
.fragen { margin-top: 36px; }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen details:first-child { border-top: 1px solid var(--linie); }
.fragen summary {
  cursor: pointer; list-style: none; padding: 20px 48px 20px 0; font-weight: 700;
  position: relative; font-size: 1.15rem;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.8rem; font-weight: 400; color: var(--rot); line-height: 1;
}
.fragen details[open] summary::after { content: "–"; }
.fragen details > div { padding: 0 0 20px; color: var(--tinte-weich); }
.fragen details > div p { margin: 0; }

/* --- Formular ------------------------------------------------------------ */
form.formular { background: #fff; border-radius: 24px; padding: 32px; }
@media (max-width: 480px) { form.formular { padding: 22px 18px; } }
.zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .zeile { grid-template-columns: 1fr; } }
.feld { margin-bottom: 18px; }
.zeile .feld { margin-bottom: 4px; }
.hinweis-zeile { font-size: .95rem; color: var(--tinte-weich); margin: 0 0 18px; }
.feld label, .feld legend { display: block; font-weight: 700; margin-bottom: 6px; font-size: 1.05rem; }
.feld .hinweis { font-weight: 400; color: var(--tinte-weich); font-size: .95rem; }
.feld input[type=text], .feld input[type=email], .feld input[type=tel], .feld textarea {
  width: 100%; font: inherit; font-size: 1.1rem; color: var(--tinte);
  background: #fff; border: 2px solid #c9d1dc; border-radius: 12px; padding: 12px 14px; min-height: 54px;
}
.feld textarea { min-height: 96px; resize: vertical; }
.feld input:focus, .feld textarea:focus { border-color: var(--tinte); outline: 3px solid var(--fokus); outline-offset: 1px; }
fieldset.feld { border: 0; padding: 0; margin: 0 0 18px; }
.auswahl { display: flex; flex-wrap: wrap; gap: 10px; }
.auswahl label {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 600; margin: 0;
  border: 2px solid #c9d1dc; border-radius: 999px; padding: 10px 18px; cursor: pointer; background: #fff;
}
.auswahl input { width: 20px; height: 20px; accent-color: var(--rot); margin: 0; }
.auswahl label:has(input:checked) { border-color: var(--rot); background: var(--rot-hell); }
.einwilligung { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; color: var(--tinte-weich); margin: 6px 0 22px; }
.einwilligung input { width: 22px; height: 22px; margin-top: 3px; flex: none; accent-color: var(--rot); }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung { border-radius: 12px; padding: 16px 18px; margin: 18px 0 0; font-weight: 600; }
.meldung[hidden] { display: none; }
.meldung-gut { background: #e6f4ea; color: #1d5a2e; border: 1px solid #b3dbbf; }
.meldung-schlecht { background: var(--rot-hell); color: #8a0716; border: 1px solid #f4b8bf; }
.feld-fehler input { border-color: var(--rot); }

/* --- Fuß ----------------------------------------------------------------- */
.fuss { background: var(--tinte); color: #c8d1dd; padding: 44px 0; font-size: 1rem; }
.fuss strong { color: #fff; }
.fuss .huelle { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.fuss a { color: #fff; }
.fuss nav { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }

/* --- Feste Leiste auf dem Handy ------------------------------------------ */
.leiste-handy { display: none; }
@media (max-width: 480px) {
  .leiste-handy {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20;
    min-height: 56px; border-radius: 999px; background: var(--rot); color: #fff;
    font-weight: 700; font-size: 1.1rem; text-decoration: none;
    box-shadow: 0 10px 30px -8px rgba(13, 35, 64, .45);
  }
  .leiste-handy:hover { color: #fff; }
  body.startseite { padding-bottom: 84px; }
  body.startseite .kopf .knopf { display: none; } /* die Leiste ersetzt ihn */
}

/* --- Rechtstexte --------------------------------------------------------- */
.rechtstext { max-width: 48em; padding: 56px 20px 80px; margin: 0 auto; }
.rechtstext h1 { font-size: 2.2rem; }
.rechtstext h2 { font-size: 1.4rem; margin-top: 1.8em; }
.offen { background: #fff3cd; border: 1px dashed #c99a00; padding: 0 6px; border-radius: 4px; }