/* AskForDates – „Was nach dem Klick passiert“ (Startseite, Abschnitt #echt)
   Drei echte Antworten, als HTML nachgebaut statt als Bild: ein Desktop-Chat im Slack-Stil, zwei Handy-Chats im WhatsApp-Stil.
   Nur die Optik ist nachempfunden: keine Logos, keine Original-Grafiken, das Chat-Muster ist reines CSS. */

/* Designsystem „Sonnig“: ruhige Papierfläche, sonnige Klebestreifen, Beschriftung in Figtree. Wortlaut der Chats nie ändern. */

/* ---------- Rahmen & Bühne ---------- */
.talk{position:relative}

.talk-list{position:relative;list-style:none;margin:0;padding:clamp(30px,4.5vw,56px) clamp(14px,3.5vw,48px) clamp(20px,3vw,36px);border-radius:var(--r);
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,2.6vw,36px);align-items:start;
  background:var(--paper)}
.talk-item{min-width:0}
.chat{margin:0;display:grid;gap:14px;justify-items:center}
.chat > .sl,.chat > .wa{position:relative;width:100%}
/* Klebestreifen oben, wie bei Polaroids an der Wand */
.chat > .sl::before,.chat > .wa::before{content:"";position:absolute;z-index:3;top:-12px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:2px;
  background:rgba(255,204,46,.82);box-shadow:0 1px 2px rgba(43,42,41,.12);transform:rotate(-3deg);pointer-events:none}
.chat > .sl::before{left:26%;transform:rotate(-5deg)}
.talk-item:nth-child(2) .chat > .wa::before{transform:rotate(4deg)}
.talk-item:nth-child(3) .chat > .wa::before{transform:rotate(-1.5deg)}
.chat figcaption{display:grid;justify-items:center;gap:0;text-align:center;line-height:1.15}
.chat figcaption .who{font:800 1.05rem/1.3 var(--f-body);letter-spacing:-.01em;color:var(--ink)}
.chat figcaption small{margin-top:2px;font-size:.82rem;font-weight:700;color:var(--ink-3)}

/* Desktop: Slack breiter (ist ja ein Desktop-Fenster), alle drei gleich hoch; die Chats füllen die Höhe, Eingabezeile unten */
@media (min-width:641px){   /* Karten einer Reihe gleich hoch: Chatverlauf füllt, Eingabezeile bleibt unten */
  .talk-list{align-items:stretch}
  .talk-item{display:flex}
  .talk-item .chat{flex:1;grid-template-rows:minmax(0,1fr) auto}
  .chat > .sl,.chat > .wa{display:flex;flex-direction:column;height:100%}
  .sl-msgs,.wa-msgs{flex:1}
}
@media (min-width:1120px){
  .talk-list{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
  .talk-item:nth-child(1) .chat{transform:rotate(-.8deg)}
  .talk-item:nth-child(2) .chat{transform:rotate(.9deg)}
  .talk-item:nth-child(3) .chat{transform:rotate(-.6deg)}
}
/* Tablet und kleine Laptops: Slack-Fenster oben über die volle Breite, die zwei Chats darunter */
@media (max-width:1119px){
  .talk-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .talk-item:nth-child(1){grid-column:1/-1}
  .talk-item:nth-child(1) .chat > .sl{max-width:620px}
}
/* Handy: alles untereinander */
@media (max-width:640px){
  .talk-list{grid-template-columns:minmax(0,1fr);gap:34px}
  .talk-item:nth-child(2) .chat{transform:rotate(1deg)}
  .talk-item:nth-child(3) .chat{transform:rotate(-1deg)}
}

.talk-more{margin:clamp(20px,3vw,28px) auto 0;line-height:1.7;max-width:780px;text-align:center;color:var(--ink-2);font-weight:600;text-wrap:balance}
@media (max-width:640px){.talk-list{margin-inline:calc(-1 * var(--gutter) + 8px)}}
/* Inline-Link: Polster vergrößert nur die Tippfläche (≥ 44 px), nicht die Zeile */
.talk-more a{padding:12px 0;color:var(--blue-d);font-weight:800;text-decoration:underline;text-decoration-thickness:2px}
.talk-more a:hover{color:var(--ink)}

/* ---------- Slack-Stil (Desktop-Fenster) ---------- */
.sl{--sl-ink:#1d1c1d;--sl-dim:#616061;--sl-line:#e2e2e2;
  border-radius:14px;background:#fff;color:var(--sl-ink);text-align:left;
  font:15px/1.46 "Lato","Helvetica Neue",Helvetica,"Segoe UI",Arial,sans-serif;
  box-shadow:0 0 0 1px rgba(43,42,41,.08),0 2px 4px rgba(43,42,41,.05),var(--s2)}
.sl-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:14px 14px 0 0;background:#3d1240;position:relative}
.sl-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.sl-bar i:nth-child(2){background:#febc2e}
.sl-bar i:nth-child(3){background:#28c840}
.sl-search{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(46%,240px);height:22px;border-radius:6px;background:rgba(255,255,255,.18);
  color:rgba(255,255,255,.75);font-size:12px;line-height:22px;text-align:center}
.sl-head{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--sl-line);font-size:15px}
.sl-head b{font-weight:900}
.sl-chev{color:var(--sl-dim);font-size:12px;margin-top:-4px}
.sl-msgs{list-style:none;margin:0;padding:12px 16px 6px;display:grid;gap:12px}
.sl-g{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:10px}
.sl-g > :not(.sl-av){grid-column:2}
.sl-av{grid-column:1;grid-row:1/span 4;display:grid;place-items:center;width:36px;height:36px;border-radius:8px;color:#fff;font:900 15px/1 "Lato","Helvetica Neue",Arial,sans-serif;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.sl-av-s{width:22px;height:22px;border-radius:5px;font-size:12px}
.sl-av-l{background:linear-gradient(160deg,#e2683e,#c4472b)}
.sl-av-e{background:linear-gradient(160deg,#2f8f86,#1f6d6a)}
.sl-meta{display:flex;align-items:baseline;gap:8px;line-height:1.25;margin-top:-1px}
.sl-name{font-weight:900;font-size:15px}
.sl-meta time{font-size:12px;color:var(--sl-dim)}
.sl-txt{overflow-wrap:anywhere}
.sl-meta + .sl-txt{margin-top:2px}
/* Link mit Vorschau (Slack-Unfurl) */
.sl-url{color:#1264a3;text-decoration:underline;text-decoration-color:rgba(18,100,163,.35);overflow-wrap:anywhere}
.sl-unf{display:grid;gap:1px;margin-top:6px;padding:2px 0 2px 12px;border-left:4px solid #dddddd;font-size:14px;line-height:1.35}
.sl-unf small{font-size:12.5px;font-weight:700;color:var(--sl-ink)}
.sl-unf strong{color:#1264a3;font-weight:700}
.sl-unf span{color:#454245}
.sl-jumbo{font-size:32px;line-height:1.25;margin:2px 0;letter-spacing:.02em}
.sl-compose{display:flex;align-items:center;justify-content:space-between;margin:6px 14px 14px;height:40px;padding:0 10px 0 12px;border-radius:8px;
  box-shadow:inset 0 0 0 1px #bbbabb;color:#6b6a6b;font-size:14px}
.sl-compose i{width:26px;height:22px;border-radius:5px;background:#e8e8e8}

/* ---------- WhatsApp-Stil (Handy) ---------- */
.wa{--wa-bg:#efeae2;--wa-out:#d9fdd3;--wa-in:#fff;--wa-ink:#111b21;--wa-dim:#667781;--wa-tick:#53bdeb;--wa-green:#008069;
  max-width:336px;margin-inline:auto;border-radius:18px;overflow:hidden;background:var(--wa-bg);text-align:left;
  font:15px/1.38 -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Roboto,Arial,sans-serif;color:var(--wa-ink);
  box-shadow:0 0 0 1px rgba(43,42,41,.08),0 2px 4px rgba(43,42,41,.05),var(--s2)}
.wa-top{display:flex;align-items:center;gap:8px;padding:11px 12px 10px 8px;background:var(--wa-green);color:#fff;position:relative}
/* schlanker Chat-Ausschnitt ohne Handy-Rahmen */
.wa-top b{flex:1;font-weight:600;font-size:16.5px;letter-spacing:.005em}
.wa-back{flex:none;margin-right:-4px}
.wa-ico{flex:none;margin-left:8px;opacity:.95}
.wa-av{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;color:#fff;font-weight:700;font-size:15px}
.wa-av-t{background:linear-gradient(160deg,#e48aa6,#c25a7d)}
.wa-av-c{background:linear-gradient(160deg,#f0b04c,#d98a1e)}
/* Chat-Hintergrund: beiges Kritzel-Muster nur aus Verläufen */
.wa-msgs{list-style:none;margin:0;padding:16px 12px 12px;display:grid;gap:3px;align-content:end;min-height:250px;
  background-color:var(--wa-bg);
  background-image:
    radial-gradient(circle at 18px 20px,transparent 5px,rgba(120,95,60,.11) 5.5px,rgba(120,95,60,.11) 6.6px,transparent 7.1px),
    radial-gradient(circle at 54px 50px,rgba(120,95,60,.10) 2.4px,transparent 3px),
    radial-gradient(circle at 12px 60px,rgba(120,95,60,.09) 1.6px,transparent 2.2px),
    radial-gradient(circle at 46px 14px,transparent 3px,rgba(120,95,60,.10) 3.4px,rgba(120,95,60,.10) 4.4px,transparent 4.8px),
    radial-gradient(ellipse 7px 3px at 30px 34px,rgba(120,95,60,.08) 90%,transparent 100%),
    radial-gradient(circle at 40px 44px,transparent 8px,rgba(120,95,60,.07) 8.5px,rgba(120,95,60,.07) 9.4px,transparent 9.9px),
    radial-gradient(circle at 10px 12px,rgba(120,95,60,.08) 1.8px,transparent 2.4px);
  background-size:72px 72px,72px 72px,72px 72px,72px 72px,72px 72px,58px 58px,58px 58px}
.wa-m{position:relative;max-width:88%;padding:6px 8px 7px 9px;border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13);overflow-wrap:anywhere}
.wa-m + .wa-m{margin-top:10px}
.wa-out{justify-self:end;background:var(--wa-out);border-top-right-radius:0}
.wa-in{justify-self:start;background:var(--wa-in);border-top-left-radius:0}
/* Sprechblasen-Zipfel */
.wa-out::after,.wa-in::after{content:"";position:absolute;top:0;width:0;height:0;border-bottom:9px solid transparent}
.wa-out::after{right:-8px;border-left:8px solid var(--wa-out)}
.wa-in::after{left:-8px;border-right:8px solid var(--wa-in)}
.wa-big{font-size:16.5px}
.wa-m .nw{white-space:nowrap}
.wa-link{padding:4px 4px 7px;width:86%}
.wa-card{display:grid;gap:2px;padding:9px 10px 8px;border-radius:6px;background:rgba(11,20,26,.055);border-left:0}
.wa-card strong{font-weight:600;font-size:14.5px;line-height:1.3}
.wa-card span{font-size:13px;line-height:1.3;color:#3b4a54}
.wa-card small{font-size:12px;color:#54646e;margin-top:2px}
.wa-link .wa-txt{display:block;padding:6px 5px 0 6px}
.wa-url{color:#016a99;text-decoration:underline;text-decoration-color:rgba(2,126,181,.35);overflow-wrap:break-word;word-break:normal}   /* Umbruch an <wbr> nach der Domain */
/* Gelesen-Häkchen: unten rechts, ohne Uhrzeit */
.wa-tick{display:inline-flex;vertical-align:-1px;margin-left:8px;color:var(--wa-tick);float:right;margin-top:6px}
.wa-compose{display:flex;align-items:center;gap:8px;padding:8px 8px 10px;background:var(--wa-bg)}
.wa-compose span{flex:1;height:40px;padding:0 16px;border-radius:999px;background:#fff;color:#667781;font-size:15px;line-height:40px;box-shadow:0 1px .5px rgba(11,20,26,.1)}
.wa-compose i{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#00a884;color:#fff}

/* ---------- Nachrichten erscheinen nacheinander (nur mit JS und ohne „weniger Bewegung“) ---------- */
@media (prefers-reduced-motion: no-preference){   /* html.js setzt erst site.js: ohne JS bleibt alles sichtbar */
  html.js .talk-item .m{opacity:0;transform:translateY(10px) scale(.97)}
  .talk-item.in .m{animation:talk-in .5s var(--ease) forwards}
  .wa-out.m{transform-origin:100% 100%}
  .wa-in.m{transform-origin:0 100%}
  .talk-item.in .d1{animation-delay:.35s}
  .talk-item.in .d2{animation-delay:.8s}
  .talk-item.in .d3{animation-delay:1.2s}
  .talk-item.in .d4{animation-delay:1.7s}
  .talk-item.in .d5{animation-delay:2.15s}
  .talk-item.in .d6{animation-delay:2.6s}
  .talk-item.in .d7{animation-delay:3.05s}
  .talk-item.in .wa-in.d2{animation-delay:1.25s}
}
@keyframes talk-in{to{opacity:1;transform:none}}