/* Fragen „Das fragen uns Händler“ (templates/_landing_fragen.html, AUFTRAG-FRAGEN-BESSER.md, 11.11.2026).
   Hell und ruhig auf beiden Startseiten: weiße Karte, feine Linie, weicher Schatten. Auf der dunklen wow-Seite liegt der Abschnitt
   als helle Insel (.df-fragen-insel). Schrift ≥ 15 px, Tippziele ≥ 44 px, kein inneres Scrollen. */
.df-fragen {
  --f-grund: transparent; --f-flaeche: #fff; --f-text: #15151b; --f-text2: #5d5d6b; --f-linie: #e9e9ef; --f-grau: #f1f1f5;
  --f-akzent: #c42a7c; --f-verlauf: linear-gradient(135deg, #d62976 0%, #b3227f 55%, #8a2bb0 100%);
  --f-schatten: 0 1px 2px rgba(25, 20, 50, .05), 0 12px 32px -14px rgba(40, 30, 90, .16);
  --f-feder: cubic-bezier(.22, 1, .36, 1);
  --f-schrift: var(--fliess, "Figtree", system-ui, sans-serif);
  max-width: 1180px; margin: 0 auto; padding: clamp(64px, 9vw, 120px) clamp(16px, 4vw, 40px);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(32px, 6vw, 88px); row-gap: 20px; align-items: start;
  font-family: var(--f-schrift); color: var(--f-text);
}
.df-f-kopf { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 120px; }
.df-fragen .df-f-kopf h2 { margin: 0; color: var(--f-text); }
.df-fragen .df-f-lead { margin: 1rem 0 0; color: var(--f-text2); font-size: 1.1rem; line-height: 1.5; max-width: 30ch; }

/* Karte */
.df-f-chat { grid-column: 2; background: var(--f-flaeche); border: 1px solid var(--f-linie); border-radius: 26px; box-shadow: var(--f-schatten); overflow: hidden; }
.df-f-ckopf { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--f-linie); }
.df-f-wer { display: flex; flex-direction: column; line-height: 1.25; }
.df-f-wer b { font-size: 16px; font-weight: 700; color: var(--f-text); }
.df-f-wer small { font-size: 14px; color: var(--f-text2); display: inline-flex; align-items: center; gap: 6px; }
.df-f-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: block; }
.df-f-av-gross { width: 40px; height: 40px; }

/* Verlauf */
.df-f-verlauf { list-style: none; margin: 0; padding: 22px 20px 6px; display: flex; flex-direction: column; gap: 22px; }
.df-f-paar { display: flex; flex-direction: column; gap: 8px; }
.df-f-paar[hidden] { display: none; }
.df-f-frage, .df-f-blase { margin: 0; font-size: 16px; line-height: 1.45; padding: 11px 16px; overflow-wrap: anywhere; text-wrap: pretty; }
.df-f-frage { align-self: flex-start; max-width: 80%; background: var(--f-grau); color: var(--f-text); border-radius: 20px 20px 20px 6px; font-weight: 600; }
.df-f-antwort { align-self: flex-end; display: flex; align-items: flex-end; gap: 8px; max-width: 86%; }
.df-f-blase { background: var(--f-verlauf); color: #fff; border-radius: 20px 20px 6px 20px; }

/* Tipp-Pünktchen (fragen.js) */
.df-f-tippt { align-self: flex-end; margin-right: 36px; display: inline-flex; gap: 5px; padding: 14px 16px; border-radius: 20px 20px 6px 20px; background: #f6e8f0; }
.df-f-tippt span { width: 7px; height: 7px; border-radius: 50%; background: var(--f-akzent); opacity: .35; animation: df-f-punkte 1s infinite ease-in-out; }
.df-f-tippt span:nth-child(2) { animation-delay: .15s; }
.df-f-tippt span:nth-child(3) { animation-delay: .3s; }
@keyframes df-f-punkte { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.df-f-wartet .df-f-antwort { display: none; }

/* Chips wie Schnellantworten */
.df-f-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 6px; }
.df-f-chips[hidden] { display: none; }
.df-f-chip { appearance: none; font: 600 15px/1.3 var(--f-schrift); color: var(--f-text); background: #fff; border: 1px solid #dcdce5; border-radius: 999px;
  padding: 10px 16px; min-height: 44px; cursor: pointer; text-align: left;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease, transform .16s ease; }
.df-f-chip:hover { border-color: var(--f-akzent); color: var(--f-akzent); }
.df-f-chip:active { transform: scale(.97); }
.df-f-chip:focus-visible, .df-f-knopf:focus-visible, .df-f-feld:focus-visible, .df-f-mehr summary:focus-visible { outline: 2px solid var(--f-akzent); outline-offset: 2px; }

/* Noch etwas offen? */
.df-f-eingabe { margin: 14px 0 0; padding: 14px 20px 18px; border-top: 1px solid var(--f-linie); display: grid; gap: 10px; }
.df-f-offen { font-weight: 700; font-size: 16px; color: var(--f-text); }
.df-f-zeile { display: flex; align-items: center; gap: 8px; }
.df-f-feld { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border: 1px solid #dcdce5; border-radius: 999px; background: #fafafc;
  font: 400 16px/1 var(--f-schrift); color: var(--f-text); transition: border-color .18s ease, background-color .18s ease; }
.df-f-feld::placeholder { color: #8a8a98; }
.df-f-feld:focus { border-color: var(--f-akzent); background: #fff; outline: none; }
.df-f-knopf { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 48px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 15px/1 var(--f-schrift); color: #fff; transition: filter .18s ease, transform .16s ease; }
.df-f-knopf svg { width: 19px; height: 19px; flex: none; }
.df-f-knopf:hover { filter: brightness(1.06); }
.df-f-knopf:active { transform: scale(.97); }
.df-f-wa { background: #1f9e55; }
.df-f-mail { background: var(--f-verlauf); }

/* Mehr Fragen & Datenschutz */
.df-f-mehr { grid-column: 2; color: var(--f-text); }
.df-f-mehr summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; padding: 10px 2px; min-height: 44px; }
.df-f-mehr summary::-webkit-details-marker { display: none; }
.df-f-mehr summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.df-f-mehr[open] summary::after { transform: translateY(2px) rotate(225deg); }
.df-f-mehr-liste { display: grid; gap: 18px; padding: 8px 0 0; }
.df-f-eintrag h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.3; letter-spacing: 0; font-family: var(--f-schrift); font-weight: 700; text-transform: none; font-stretch: normal; color: var(--f-text); }
.df-f-eintrag p, .df-f-recht { margin: 0; color: var(--f-text2); font-size: 15px; line-height: 1.55; }
.df-f-eintrag a, .df-f-recht a { color: var(--f-text); text-decoration: underline; text-underline-offset: 3px; }

/* Einblenden nach dem Antippen (nur mit Bewegung; fragen.js setzt .df-f-neu) */
@media (prefers-reduced-motion: no-preference) {
  .df-f-neu .df-f-frage { animation: df-f-rein-l .42s var(--f-feder) both; transform-origin: left bottom; }
  .df-f-neu .df-f-antwort, .df-f-neu .df-f-tippt { animation: df-f-rein-r .42s var(--f-feder) both; transform-origin: right bottom; }
  .df-f-chip.df-f-weg { animation: df-f-weg .2s ease both; }
}
@keyframes df-f-rein-l { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes df-f-rein-r { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes df-f-weg { to { opacity: 0; transform: scale(.94); } }

/* Helle Insel auf der dunklen Startseite (wow) */
.df-fragen-insel { position: relative; max-width: 1320px; margin: clamp(40px, 6vw, 80px) auto; padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 72px);
  background: #f6f6f8; border-radius: 32px; color-scheme: light; }
.df-fragen-insel .df-f-kopf h2 { font-size: clamp(2rem, 1.2rem + 3vw, 4rem); }
.df-fragen-insel .df-f-kopf { top: 96px; }
.df-fragen-insel ::selection { background: #f3c6dc; color: #15151b; }

@media (max-width: 1000px) {
  .df-fragen { grid-template-columns: 1fr; }
  .df-f-kopf { grid-row: auto; position: static; }
  .df-f-chat, .df-f-mehr { grid-column: 1; }
}
@media (max-width: 759px) {
  .df-fragen { padding: 56px 14px 44px; row-gap: 18px; }
  .df-fragen-insel { margin: 24px 10px; padding: 44px 12px 32px; border-radius: 26px; }
  .df-f-kopf, .df-f-mehr { padding: 0 6px; }
  .df-f-chat { border-radius: 22px; }
  .df-f-ckopf { padding: 12px 16px; }
  .df-f-verlauf { padding: 18px 14px 4px; gap: 18px; }
  .df-f-frage, .df-f-blase { padding: 10px 14px; }
  .df-f-frage { max-width: 88%; }
  .df-f-antwort { max-width: 92%; }
  /* Chips als waagrechte Reihe wie Schnellantworten, kein langer Scroll nach unten */
  .df-f-chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding: 14px 14px 6px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .df-f-chips::-webkit-scrollbar { display: none; }
  .df-f-chip { flex: none; scroll-snap-align: start; white-space: nowrap; }
  .df-f-chip:last-child { margin-right: 28px; }
  .df-f-eingabe { padding: 12px 14px 16px; }
  .df-f-knopf { width: 48px; padding: 0; justify-content: center; }
  .df-f-knopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .df-f-feld { padding: 0 16px; }
}