/* Startseite: "Erreichbar, auch wenn Sie es nicht sind." (2026-10-01)
   Ein Beispieltag als Leiste (davor und danach KUENI, tagsueber Sie), eine
   Marke mit Uhrzeit, darunter zwei Wege: KUENI im Chat und am Telefon.
   Eigene Datei, damit weder styles.css noch eine Versionsnummer auf der
   ganzen Seite angefasst werden muss. Aeussere Abstaende, Ueberschrift
   und Einblenden kommen aus styles.css (.section--warm, data-reveal). */

.erreich__kopf { max-width: 800px; }
.erreich__lead { max-width: 62ch; margin-top: 18px; color: #344C54; font-size: 18px; line-height: 1.65; }

/* ---------- Der Beispieltag ---------- */
.erreich__lauf { --x: 90.49; position: relative; margin: 48px 0 0; padding-top: 56px; }
.erreich__leiste {
  display: flex; height: 64px; overflow: hidden; border-radius: 14px; background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--rule), 0 20px 40px -28px rgba(12,28,34,.5);
}
/* Die drei Teile stehen im Verhaeltnis 8 : 9 : 7 Stunden. Die Marke rechnet
   mit denselben Grenzen (assets/erreichbar.js), so liegt sie immer richtig. */
/* Die Namen stehen links im Teil. Mittig lagen sie unter der Marke, die um
   21:43 stehen bleibt (rechts im letzten Teil), und das Wort war verdeckt. */
.erreich__teil {
  position: relative; display: flex; align-items: center; justify-content: flex-start; min-width: 0; padding-left: 18px;
  font: 700 19px/1 var(--display); letter-spacing: -.01em; transition: box-shadow .35s ease;
}
.erreich__teil--a { flex: 8 1 0; }
.erreich__teil--sie { flex: 9 1 0; background: var(--ink); color: var(--paper); }
.erreich__teil--b { flex: 7 1 0; }
.erreich__teil--kueni { background: #CFE6EB; }
/* Wer gerade dran ist, trägt eine goldene Kante unten. */
.erreich__teil.is-aktiv { box-shadow: inset 0 -5px 0 var(--signal); }

.erreich__strich {
  position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: 34px; width: 2px; height: 92px; margin-left: -1px;
  background: var(--signal); pointer-events: none;
}
.erreich__strich::after {
  content: ""; position: absolute; left: 50%; top: 47px; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(201,146,46,.28);
}
/* Das Etikett sitzt links buendig, wenn die Marke links steht, und rechts
   buendig, wenn sie rechts steht. Dazwischen gleitet es, so bleibt es immer
   innerhalb der Leiste. */
.erreich__pille {
  position: absolute; z-index: 3; top: 0; left: calc(var(--x) * 1%); transform: translateX(calc(var(--x) * -1%));
  display: inline-flex; align-items: center; margin: 0; padding: 8px 14px 8px 12px; border-radius: 100px;
  background: #FFFFFF; box-shadow: 0 0 0 1px var(--rule), 0 12px 24px -14px rgba(12,28,34,.55);
  color: var(--ink); font: 600 14.5px/1.2 var(--text); white-space: nowrap;
}
.erreich__pille b { font-weight: 700; font-variant-numeric: tabular-nums; }
.erreich__pille b::after {
  content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 9px 2px; border-radius: 50%;
  background: var(--signal); vertical-align: middle;
}
.erreich__wer[hidden] { display: none; }

.erreich__skala { position: relative; height: 22px; margin-top: 10px; color: var(--slate); font: 500 12.5px/1 var(--text); }
.erreich__skala span { position: absolute; top: 0; transform: translateX(-50%); font-variant-numeric: tabular-nums; white-space: nowrap; }
.erreich__skala span:nth-child(1) { left: 0; transform: none; }
.erreich__skala span:nth-child(2) { left: 25%; }
.erreich__skala span:nth-child(3) { left: 50%; }
.erreich__skala span:nth-child(4) { left: 75%; }
.erreich__skala span:nth-child(5) { left: 100%; transform: translateX(-100%); }
.erreich__lauf figcaption { margin-top: 14px; color: #344C54; font-size: 15.5px; line-height: 1.55; }

/* ---------- Zwei Wege ---------- */
.erreich__wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 40px 0 0; padding: 0; list-style: none; }
.erreich__weg { display: flex; flex-direction: column; padding: 26px 28px; border: 1px solid var(--rule); border-radius: 14px; background: #FFFFFF; }
.erreich__weg--telefon { border-color: #006277; box-shadow: 0 0 0 1px #006277, 0 22px 44px -30px rgba(0,98,119,.55); }
.erreich__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.erreich__icon {
  position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; background: var(--cyan-soft); color: #006277;
}
.erreich__weg h3 { margin: 0; color: var(--ink); font: 700 22px/1.25 var(--display); letter-spacing: -.02em; }
.erreich__zusatz {
  padding: 5px 11px; border-radius: 999px; background: rgba(0,98,119,.1); color: #006277;
  font: 600 12px/1.3 var(--text); letter-spacing: .08em; text-transform: uppercase;
}
.erreich__weg p:not(.erreich__fein) { margin: 16px 0 0; color: #465E65; font-size: 16px; line-height: 1.6; }
.erreich__fein { margin: 12px 0 0; color: var(--slate); font-size: 14px; line-height: 1.5; }
.erreich__link {
  align-self: flex-start; margin-top: auto; padding-top: 18px; color: var(--ink);
  font: 600 15.5px/1.4 var(--text); text-decoration: underline; text-underline-offset: 5px;
}
.erreich__link::after { content: "\2192"; display: inline-block; margin-left: .4em; text-decoration: none; }
.erreich__link:visited { color: var(--ink); }
.erreich__link:focus-visible { outline: 3px solid #006277; outline-offset: 4px; border-radius: 2px; }
@media (hover: hover) {
  .erreich__link:hover { color: #006277; }
}

/* Das Telefon klingelt dreimal, dann meldet sich KUENI: Ringe und Schuetteln
   laufen genau dreimal (zusammen unter fuenf Sekunden), danach erscheint
   die Figur am Rand des Symbols. Ohne Skript oder bei reduzierter Bewegung
   steht das fertige Bild: Telefon mit KUENI daneben. */
.erreich__icon svg { position: relative; transform-origin: 50% 60%; }
.erreich__icon--ruf::before, .erreich__icon--ruf::after {
  content: ""; position: absolute; inset: 0; border: 2px solid #006277; border-radius: 50%; opacity: 0; pointer-events: none;
}
.erreich__avatar {
  position: absolute; right: -7px; bottom: -7px; width: 26px; height: 26px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--rule);
}
html.js .erreich__avatar { opacity: 0; transform: scale(.4); }
html.js .erreich__wege.is-in .erreich__avatar { animation: erreich-da .5s cubic-bezier(.18,.9,.25,1.2) 5s forwards; }
html.js .erreich__wege.is-in .erreich__icon--ruf::before { animation: erreich-ring 1.5s ease-out .6s 3; }
html.js .erreich__wege.is-in .erreich__icon--ruf::after { animation: erreich-ring 1.5s ease-out 1.1s 3; }
html.js .erreich__wege.is-in .erreich__icon--ruf svg { animation: erreich-schuetteln 1.5s ease-in-out .6s 3; }
@keyframes erreich-ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes erreich-schuetteln {
  0%, 60%, 100% { transform: rotate(0); }
  10% { transform: rotate(-14deg); }
  22% { transform: rotate(12deg); }
  34% { transform: rotate(-9deg); }
  46% { transform: rotate(6deg); }
}
@keyframes erreich-da { to { opacity: 1; transform: none; } }

/* ---------- Schmale Fenster ---------- */
/* Zwei Karten nebeneinander, solange sie noch gut lesbar sind (ab 701 px
   rund 320 px je Karte); darunter untereinander in Breite der Leiste. */
@media (max-width: 700px) {
  .erreich__wege { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .erreich__lead { font-size: 16.5px; }
  .erreich__lauf { margin-top: 38px; padding-top: 50px; }
  .erreich__leiste { height: 54px; border-radius: 12px; }
  .erreich__teil { padding-left: 12px; font-size: 16px; }
  .erreich__strich { top: 30px; height: 80px; }
  .erreich__strich::after { top: 40px; }
  .erreich__pille { padding: 6px 12px 6px 10px; font-size: 13.5px; }
  .erreich__skala { font-size: 12px; }
  .erreich__lauf figcaption { font-size: 15px; }
  .erreich__weg { padding: 22px 20px; }
  .erreich__weg h3 { font-size: 20px; }
  .erreich__icon { width: 48px; height: 48px; }
}

/* Bei 320 bis 360 px ist der letzte Teil nur etwa 80 px breit; Name und
   Marke (21:43) kaemen sich sonst in die Quere. */
@media (max-width: 360px) {
  .erreich__teil { padding-left: 8px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .erreich__teil { transition: none; }
  html.js .erreich__avatar { opacity: 1; transform: none; animation: none; }
  html.js .erreich__wege.is-in .erreich__icon--ruf::before,
  html.js .erreich__wege.is-in .erreich__icon--ruf::after,
  html.js .erreich__wege.is-in .erreich__icon--ruf svg { animation: none; }
}