/* Vorstellungsseite der Timelapse-App (/mobile). Variablen aus redaktion-basis.css. */

.tl-app-held { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 2rem + 4vw, 96px); align-items: center; padding: clamp(40px, 2rem + 4vw, 112px) 0; }
.tl-app-held h1 { margin: 0; font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4rem); font-weight: 500; line-height: 1.08; }
.tl-app-held > div > p { max-width: 52ch; margin: 22px 0 30px; font-size: 1.1rem; color: var(--text-2); }
.tl-app-status { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tl-app-status small { color: var(--text-3); font-size: 0.85rem; }

/* Telefon-Attrappe mit einem echten Report-Beispiel */
.tl-telefon { justify-self: center; width: min(330px, 100%); padding: 14px; background: #120202; border: 1px solid var(--linie); border-radius: 38px; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45); }
.tl-telefon-bild { overflow: hidden; border-radius: 26px; background: #f7f5f2; color: #1c1a19; font-family: var(--schrift-text); }
.tl-telefon-kopf { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 18px 10px; }
.tl-telefon-kopf strong { font-family: var(--schrift-titel); font-size: 1.15rem; font-weight: 600; }
.tl-telefon-kopf span { font-size: 0.72rem; color: #7a7470; }
.tl-telefon-tabs { display: flex; gap: 16px; padding: 0 18px 10px; border-bottom: 1px solid #e6e1dc; font-size: 0.78rem; color: #7a7470; }
.tl-telefon-tabs b { color: #1c1a19; border-bottom: 2px solid #8f1d1d; padding-bottom: 8px; }
.tl-meldung { padding: 14px 18px; border-bottom: 1px solid #ece8e3; }
.tl-meldung-kopf { display: flex; justify-content: space-between; font-size: 0.7rem; color: #7a7470; }
.tl-meldung-chip { padding: 2px 8px; border-radius: 100px; background: #f1e3e3; color: #8f1d1d; font-weight: 600; }
.tl-meldung p { margin: 8px 0 10px; font-size: 0.86rem; line-height: 1.45; }
.tl-meldung-zaehler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.74rem; white-space: nowrap; }
.tl-meldung-zaehler .ja { color: #1f7a4d; font-weight: 600; }
.tl-meldung-zaehler .nein { color: #7a7470; }
.tl-vertrauen { margin-left: auto; padding: 2px 8px; border-radius: 4px; background: #e3f1e9; color: #1f7a4d; font-weight: 600; }
.tl-vertrauen.offen { background: #efece8; color: #7a7470; }

/* Funktionen */
.tl-funktionen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linie); }
.tl-funktion { padding: 32px 28px 32px 0; border-bottom: 1px solid var(--linie); }
.tl-funktion + .tl-funktion { padding-left: 28px; border-left: 1px solid var(--linie); }
.tl-funktion:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.tl-funktion i { color: var(--akzent); font-size: 1.1rem; }
.tl-funktion h3 { margin: 14px 0 8px; font-size: 1.35rem; font-weight: 500; }
.tl-funktion p { margin: 0; color: var(--text-2); font-size: 0.95rem; }

/* Ablauf der Bestaetigung */
.tl-schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.tl-schritte li { counter-increment: schritt; }
.tl-schritte li::before { content: counter(schritt, decimal-leading-zero); display: block; margin-bottom: 12px; font-family: var(--schrift-daten); font-size: 0.8rem; color: var(--text-3); }
.tl-schritte h3 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 500; }
.tl-schritte p { margin: 0; color: var(--text-2); font-size: 0.93rem; }

.tl-stufen { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tl-stufen th, .tl-stufen td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.tl-stufen th { font-weight: 600; white-space: nowrap; }
.tl-stufen td { color: var(--text-2); }

@media (max-width: 1080px) {
    .tl-app-held { grid-template-columns: 1fr; }
    .tl-funktionen { grid-template-columns: 1fr 1fr; }
    .tl-funktion:nth-child(n) { padding-left: 0; border-left: 0; }
    .tl-funktion:nth-child(2n) { padding-left: 28px; border-left: 1px solid var(--linie); }
    .tl-schritte { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .tl-funktionen, .tl-schritte { grid-template-columns: 1fr; }
    .tl-funktion:nth-child(2n) { padding-left: 0; border-left: 0; }
}