/* Support-Seite: Gespräch oben, Formular darunter, alle Antworten am Ende.

   Die Breite steht in start.css bei den Ausnahmen vom Theme-Ausbruch —
   dort, wo sie sich gegen die !important-Regel des Ausbruchs durchsetzen
   kann. Hier steht nur, wie die Seite aussieht. */

.kf-support{ max-width:860px }

/* Der Kopf: Marke, Überschrift, ein Absatz. Alles linksbündig — der
   Vorspann hat vom allgemeinen .kf-lead auto-Ränder geerbt und stand
   deshalb eingerückt neben der Überschrift. */
.kf-sup-kopf{ padding:8px 0 4px; max-width:64ch }
.kf-sup-kopf h1{ font-size:clamp(30px,5vw,42px); line-height:1.12; letter-spacing:-.022em; margin:14px 0 0 }
.kf-support .kf-sup-kopf .kf-lead{
  font-size:17px; color:var(--kf-ink-2); line-height:1.62;
  margin:16px 0 0; max-width:60ch;
}

/* ------------------------------------------------------------- Gespräch */
.kf-chat{
  margin-top:28px; border:1px solid var(--kf-rule); border-radius:18px;
  background:var(--kf-paper); overflow:hidden;
}
.kf-chat-lauf{ padding:22px 22px 6px; display:flex; flex-direction:column; gap:12px;
  max-height:440px; overflow-y:auto }
.kf-sprech{
  max-width:min(84%, 560px); padding:13px 17px; border-radius:16px; font-size:15px; line-height:1.6;
  opacity:0; transform:translateY(8px);
  transition:opacity .3s ease, transform .3s cubic-bezier(.22,.75,.28,1);
}
.kf-sprech.kf-da{ opacity:1; transform:none }
.kf-sprech--bot{ background:var(--kf-wash); color:var(--kf-ink); border-bottom-left-radius:6px; align-self:flex-start }
.kf-sprech--du{ background:var(--kf-accent); color:#fff; border-bottom-right-radius:6px; align-self:flex-end }
html[data-thema="dunkel"] .kf-sprech--du{ color:#08211d }

.kf-chat-tat{ display:flex; flex-wrap:wrap; gap:8px; padding:12px 22px 4px }
.kf-chip{
  font:inherit; font-size:13.5px; padding:9px 15px; border-radius:999px; cursor:pointer;
  border:1px solid var(--kf-rule); background:var(--kf-paper); color:var(--kf-ink-2);
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.kf-chip:hover{ border-color:var(--kf-accent); color:var(--kf-accent); transform:translateY(-1px) }
.kf-chip--stark{ border-color:var(--kf-accent); color:var(--kf-accent) }

.kf-chat-form{ display:flex; gap:10px; padding:16px 22px 20px; border-top:1px solid var(--kf-rule); margin-top:12px }
.kf-chat-form input{
  flex:1; min-width:0; font:inherit; font-size:16px; padding:13px 16px; border-radius:12px;
  border:1px solid var(--kf-rule); background:var(--kf-paper); color:var(--kf-ink);
}
.kf-chat-form input:focus{ outline:none; border-color:var(--kf-accent) }
.kf-chat-form button{
  font:inherit; font-weight:600; padding:13px 22px; border:0; border-radius:12px;
  background:var(--kf-accent); color:#fff; cursor:pointer;
}
html[data-thema="dunkel"] .kf-chat-form button{ color:#08211d }
.kf-chat-form button:hover{ filter:brightness(1.08) }

/* -------------------------------------------------------------- Formular */
.kf-sup-form{ margin-top:32px; border:1px solid var(--kf-rule); border-radius:18px;
  background:var(--kf-paper); padding:26px 24px 28px }
.kf-sup-form[hidden]{ display:none }
.kf-sup-form h2{ font-size:21px; font-weight:600; letter-spacing:-.018em; margin:12px 0 0 }
.kf-sup-form-lead{ font-size:14.5px; line-height:1.6; color:var(--kf-ink-2); margin:10px 0 20px; max-width:60ch }
.kf-sup-form textarea{
  width:100%; box-sizing:border-box; font:inherit; font-size:16px; padding:13px 16px;
  border-radius:12px; border:1px solid var(--kf-rule); background:var(--kf-paper);
  color:var(--kf-ink); resize:vertical; line-height:1.6;
}
.kf-sup-form textarea:focus{ outline:none; border-color:var(--kf-accent) }
.kf-sup-liste{ margin:10px 0 0 0; padding-left:20px; font-size:13.5px; color:var(--kf-ink-2); line-height:1.7 }

/* ----------------------------------------------------------- alle Fragen */

/* Die Liste steht in einer Karte, nicht frei auf der Seite. Vorher lief
   jede Zeile über die ganze Bildschirmbreite, und das Pluszeichen stand
   einen halben Meter vom Text entfernt am rechten Rand. */
.kf-sup-alles{ margin-top:48px }
.kf-sup-alles h2{ font-size:clamp(21px,2.6vw,26px); font-weight:600; letter-spacing:-.02em; margin:12px 0 18px }
.kf-frageliste{
  border:1px solid var(--kf-rule); border-radius:18px; background:var(--kf-paper);
  padding:4px 22px; overflow:hidden;
}
.kf-frage{ border-bottom:1px solid var(--kf-rule-2, var(--kf-wash)) }
.kf-frage:last-child{ border-bottom:0 }
.kf-frage summary{
  cursor:pointer; padding:17px 34px 17px 2px; font-size:15.5px; font-weight:500;
  list-style:none; position:relative; border-radius:8px;
  transition:color .16s ease;
}
.kf-frage summary:hover{ color:var(--kf-accent) }
.kf-frage summary::-webkit-details-marker{ display:none }
.kf-frage summary::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  color:var(--kf-accent); font-size:20px; line-height:1;
  font-family:"IBM Plex Mono",monospace;
}
.kf-frage[open] summary::after{ content:"–" }
.kf-frage p{ margin:0 0 18px; font-size:14.5px; line-height:1.68; color:var(--kf-ink-2); max-width:72ch }

.kf-sup-fuss{ margin-top:36px; padding-top:18px; border-top:1px solid var(--kf-rule);
  font-size:13px; color:var(--kf-ink-3) }
.kf-sup-fuss a{ color:var(--kf-ink-2) }

@media (max-width:600px){
  .kf-chat-lauf{ padding:18px 16px 4px; max-height:none }
  .kf-chat-tat{ padding:10px 16px 2px }
  .kf-chat-form{ padding:14px 16px 18px; flex-wrap:wrap }
  .kf-chat-form button{ width:100% }
  .kf-sup-form{ padding:20px 18px }
  .kf-sprech{ max-width:92% }
}


/* ------------------------------------------------- Abstände und Ränder */

/* Der Kopf des Themes lässt oben viel Luft. Auf der Supportseite steht
   der Titel deshalb näher am Rand — sonst scrollt man erst einmal an
   einer leeren Fläche vorbei, bevor etwas kommt. */
body.kf-seite .kf-support{ padding-top:0 }
.kf-support .kf-kopf{ margin-bottom:4px }

.kf-support .kf-uber{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--kf-accent); margin:0;
}

@media (max-width:600px){
  .kf-frageliste{ padding:2px 16px; border-radius:16px }
  .kf-frage summary{ padding:16px 30px 16px 0; font-size:15px }
  .kf-sup-alles{ margin-top:36px }
}