/* Hilfe-Chat (modules/hilfe_chat): Startknopf und Chatfenster des KI-Assistenten.
   Farben kommen als --hc-* vom Profil (Inline-Variablen am .hc-Element); Schriften erbt das Widget von der Seite
   über --hc-schrift / --hc-schrift-titel, sonst Systemschrift. Ein auffälliger Moment: die Sonne geht beim Öffnen
   über dem Horizont im Kopf auf. Alles andere bleibt ruhig.

   Das Widget sitzt auf fremden Seiten. Darum steht jede Regel unter .hc (mindestens zwei Klassen, 0,2,0): Das
   schlägt die globalen Element-Regeln der Gastseiten (landing.css: section-Innenabstand, h2-Größe, p-Zeilenhöhe;
   public-page.css: body.pp-legacy h2 mit Farbe, 0,1,2; Ratgeber/Glossar/Tools inline: h2, ul, label, a) und
   verhindert umgekehrt, dass Widget-Regeln Seitenelemente treffen (landing.css hat einen eigenen .hc-kopf im
   Hero-Kalender). */

.hc {
    --hc-schrift: var(--ff-b, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    --hc-schrift-titel: var(--ff-h, 'Fraunces', Georgia, serif);
    --hc-text: var(--hc-tinte);
    --hc-text-2: #3d4a60;
    --hc-text-3: #5b6678;
    --hc-linie: rgba(15, 23, 41, .09);
    --hc-weiss: #ffffff;
    --hc-schatten: 0 1px 2px rgba(15, 23, 41, .06), 0 12px 28px -6px rgba(15, 23, 41, .18), 0 40px 80px -24px rgba(15, 23, 41, .32);
    --hc-weich: cubic-bezier(.2, .8, .2, 1);
    /* Belegte Höhe fester Leisten am unteren Rand (Einwilligungsbanner, CTA-Leiste); setzt hilfe-chat.js. */
    --hc-unten: 0px;
    --hc-rand: 24px;
    position: fixed;
    right: var(--hc-rand);
    bottom: var(--hc-rand);
    /* #4195: Abstand zu Banner/CTA-Leiste per transform statt bottom. Eine bottom-Aenderung zaehlt
       als Layout-Verschiebung (CLS), eine transform-Bewegung nicht. */
    transform: translateY(calc(-1 * var(--hc-unten)));
    z-index: 900;
    font-family: var(--hc-schrift);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--hc-text);
    -webkit-font-smoothing: antialiased;
}
/* Erst nach der ersten Messung gleiten (kein Sprung beim Laden). */
.hc[data-unten-bereit] { transition: transform .3s var(--hc-weich); }
.hc *, .hc *::before, .hc *::after { box-sizing: border-box; }
.hc button { font: inherit; }
.hc .hc-unsichtbar { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Avatar ------------------------------------------------------------------------------------------- */
.hc .hc-avatar { display: block; overflow: visible; }
.hc .hc-avatar-eigen svg { width: 100%; height: 100%; display: block; }
.hc .hc-strahl { fill: var(--hc-sonne); opacity: .55; }
.hc .hc-strahl-lang { opacity: .9; }
.hc .hc-strahlen { transform-origin: 32px 32px; transition: transform .6s var(--hc-weich); }
.hc .hc-augen { fill: var(--hc-tinte); transform-origin: 32px 29.5px; animation: hc-blinzeln 6s infinite; }
.hc .hc-mund { stroke: var(--hc-tinte); }
.hc .hc-wangen { fill: #f08a5d; opacity: .35; }
@keyframes hc-blinzeln { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
.hc[data-denkt="1"] .hc-strahlen { animation: hc-drehen 2.4s linear infinite; }
@keyframes hc-drehen { to { transform: rotate(360deg); } }

/* Startknopf --------------------------------------------------------------------------------------- */
.hc .hc-start {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0;
    padding: .45rem 1.35rem .45rem .45rem;
    border: 0;
    border-radius: 999px;
    background: var(--hc-tinte);
    color: var(--hc-papier);
    box-shadow: var(--hc-schatten);
    cursor: pointer;
    transition: transform .25s var(--hc-weich), box-shadow .25s var(--hc-weich);
}
.hc .hc-start .hc-avatar { width: 46px; height: 46px; padding: 3px; border-radius: 50%; background: var(--hc-tinte-2); }
.hc .hc-start-text { font-weight: 600; font-size: 1rem; letter-spacing: -.005em; white-space: nowrap; }
.hc .hc-start:hover { transform: translateY(-2px); }
.hc .hc-start:hover .hc-strahlen { transform: rotate(30deg); }
.hc .hc-start:focus-visible, .hc button:focus-visible, .hc a:focus-visible {
    outline: 3px solid var(--hc-sonne);
    outline-offset: 3px;
}
.hc[data-zustand="offen"] .hc-start { display: none; }

/* Fenster ------------------------------------------------------------------------------------------ */
/* Am Desktop endet das Fenster oberhalb fester Leisten (--hc-unten), die Knöpfe des Banners bleiben bedienbar. */
.hc .hc-fenster {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(408px, calc(100vw - 32px));
    height: min(660px, calc(100vh - 2 * var(--hc-rand) - var(--hc-unten)));
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--hc-papier);
    border-radius: 28px;
    box-shadow: var(--hc-schatten);
    overflow: hidden;
    transform-origin: bottom right;
    animation: hc-auf .42s var(--hc-weich);
}
.hc .hc-fenster[hidden] { display: none; }
@keyframes hc-auf { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

.hc .hc-kopf {
    position: relative;
    display: flex;
    align-items: flex-end;
    grid-template-columns: none;
    gap: .9rem;
    margin: 0;
    padding: 1.4rem 1.1rem 1.05rem 1.25rem;
    background:
        radial-gradient(120% 90% at 18% 120%, rgba(232, 160, 32, .38), transparent 60%),
        linear-gradient(180deg, var(--hc-tinte) 0%, var(--hc-tinte-2) 100%);
    color: var(--hc-papier);
}
/* Horizont: die Sonne sitzt halb darüber und geht beim Öffnen auf. */
.hc .hc-horizont {
    position: relative;
    flex: none;
    width: 64px;
    height: 46px;
    overflow: hidden;
    border-bottom: 1.5px solid rgba(254, 243, 220, .45);
}
.hc .hc-horizont .hc-avatar {
    position: absolute;
    left: 0;
    top: 0;
    width: 64px;
    height: 64px;
    padding: 0;
    animation: hc-aufgehen 1.1s .08s var(--hc-weich) both;
}
@keyframes hc-aufgehen { from { transform: translateY(46px); } to { transform: translateY(0); } }
.hc .hc-kopf-text { flex: 1; min-width: 0; padding-bottom: .1rem; }
.hc .hc-titel {
    margin: 0;
    padding: 0;
    font-family: var(--hc-schrift-titel);
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-wrap: wrap;
    hyphens: manual;
    color: #fff;
}
.hc .hc-untertitel { margin: .25rem 0 0; font-size: .875rem; line-height: 1.35; color: rgba(247, 244, 239, .66); }
.hc .hc-schliessen {
    flex: none;
    align-self: flex-start;
    width: 48px;
    height: 48px;
    margin: -.4rem -.35rem 0 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: background .2s;
}
.hc .hc-schliessen:hover { background: rgba(255, 255, 255, .16); }
.hc .hc-schliessen svg { width: 18px; height: 18px; stroke: var(--hc-papier); stroke-width: 2; stroke-linecap: round; fill: none; }

/* Verlauf ------------------------------------------------------------------------------------------ */
.hc .hc-verlauf {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 1.25rem 1.1rem .5rem;
    scroll-behavior: smooth;
}
.hc .hc-nachricht { margin: 0 0 1rem; font-size: 1rem; line-height: 1.55; }
.hc .hc-nachricht p { margin: 0 0 .6em; padding: 0; line-height: inherit; }
.hc .hc-nachricht p:last-child { margin-bottom: 0; }
.hc .hc-nachricht ol, .hc .hc-nachricht ul { margin: .2em 0 .7em; padding-left: 1.3em; }
.hc .hc-nachricht li { margin: .28em 0; padding-left: .15em; }
.hc .hc-nachricht ol li::marker { color: #b07410; font-weight: 700; }
.hc .hc-nachricht ul li::marker { color: var(--hc-sonne); }
.hc .hc-nachricht strong { font-weight: 650; color: var(--hc-tinte); }

.hc .hc-von-assistent {
    position: relative;
    max-width: 92%;
    padding: .85rem 1rem;
    background: var(--hc-weiss);
    border-radius: 6px 20px 20px 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 41, .05), 0 0 0 1px var(--hc-linie);
    color: var(--hc-text-2);
}
.hc .hc-von-person {
    margin-left: auto;
    width: fit-content;
    max-width: 82%;
    padding: .65rem .95rem;
    background: var(--hc-tinte);
    color: var(--hc-papier);
    border-radius: 20px 20px 6px 20px;
    overflow-wrap: anywhere;
}
.hc .hc-neu { animation: hc-einblenden .35s var(--hc-weich) both; }
@keyframes hc-einblenden { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Vorschläge: je Zielgruppe eine Frage */
.hc .hc-vorschlaege { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.hc .hc-vorschlaege li { margin: 0; padding: 0; }
.hc .hc-vorschlag {
    width: 100%;
    height: 100%;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin: 0;
    padding: .7rem .8rem;
    text-align: left;
    background: transparent;
    border: 1.5px solid var(--hc-papier-2);
    border-radius: 16px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.hc .hc-vorschlag:hover { border-color: var(--hc-sonne); background: var(--hc-sonne-hell); }
.hc .hc-vorschlag-gruppe { font-size: .875rem; font-weight: 600; line-height: 1.3; color: #9a6200; }
.hc .hc-vorschlag-frage { font-size: 1rem; font-weight: 500; line-height: 1.35; color: var(--hc-tinte); }
.hc[data-gestartet="1"] .hc-vorschlaege { display: none; }

/* Denken */
.hc .hc-denkt { display: flex; align-items: center; gap: .6rem; color: var(--hc-text-3); font-size: .875rem; }
.hc .hc-punkte { display: inline-flex; gap: 4px; }
.hc .hc-punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--hc-sonne); animation: hc-punkt 1.2s infinite ease-in-out; }
.hc .hc-punkte i:nth-child(2) { animation-delay: .15s; }
.hc .hc-punkte i:nth-child(3) { animation-delay: .3s; }
@keyframes hc-punkt { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.hc .hc-fehler { color: #8a2c0d; background: #fff4ee; box-shadow: 0 0 0 1px #f6d3c2; }
/* landing.css kennt ein eigenes .hc-rest (Pille im Hero-Kalender): Darstellung hier vollständig festlegen. */
.hc .hc-nachricht .hc-rest {
    display: block;
    margin: .7em 0 0;
    padding: .6em 0 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--hc-linie);
    border-radius: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.45;
    white-space: normal;
    color: var(--hc-text-3);
}

/* Neues Gespräch: erst nach der ersten Antwort sichtbar, Klickfläche mindestens 48 px hoch */
.hc .hc-aktionen { flex: none; display: flex; justify-content: center; margin: 0; padding: 0 .85rem; }
.hc .hc-neues-gespraech {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 48px;
    margin: 0;
    padding: .4rem 1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--hc-text-2);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.hc .hc-neues-gespraech[hidden] { display: none; }
.hc .hc-neues-gespraech svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hc .hc-neues-gespraech:hover:not(:disabled) { background: var(--hc-papier-2); color: var(--hc-text); }
.hc .hc-neues-gespraech:disabled { opacity: .4; cursor: default; }

/* Eingabe ------------------------------------------------------------------------------------------ */
.hc .hc-eingabe {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    margin: .4rem .85rem 0;
    padding: .3rem .3rem .3rem 1.1rem;
    background: var(--hc-weiss);
    border-radius: 28px;
    box-shadow: 0 0 0 1.5px var(--hc-papier-2);
    transition: box-shadow .2s;
}
.hc .hc-eingabe:focus-within { box-shadow: 0 0 0 2px var(--hc-sonne); }
/* 16 px: darunter zoomt iOS beim Fokus. */
.hc .hc-eingabe textarea {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    max-height: 132px;
    margin: 0;
    padding: .75rem 0;
    border: 0;
    resize: none;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--hc-text);
}
.hc .hc-eingabe textarea:focus, .hc .hc-eingabe textarea:focus-visible { outline: none; }
.hc .hc-eingabe textarea::placeholder { color: #667085; }
.hc .hc-senden {
    flex: none;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--hc-sonne);
    cursor: pointer;
    transition: transform .2s var(--hc-weich), background .2s, opacity .2s;
}
.hc .hc-senden svg { width: 22px; height: 22px; fill: none; stroke: var(--hc-tinte); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hc .hc-senden:hover:not(:disabled) { transform: scale(1.06); }
.hc .hc-senden:disabled { opacity: .4; cursor: default; }
.hc .hc-hinweis { margin: .55rem 1.1rem .75rem; padding: 0; font-size: .875rem; line-height: 1.45; color: var(--hc-text-3); text-align: center; }
/* Klickfläche 48 px hoch, ohne die Zeile zu verschieben (negativer Außenabstand gleicht den Innenabstand aus). */
.hc .hc-hinweis a {
    display: inline-block;
    padding: calc((48px - 1.45em) / 2) .35rem;
    margin: calc((1.45em - 48px) / 2) -.35rem;
    color: var(--hc-text-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Telefon: Fenster als Blatt über die ganze Fläche, dann auch über dem Einwilligungsbanner
   (.slup-consent, z-index 2147483000). Am Desktop bleibt das Fenster darunter und endet oberhalb des Banners. */
@media (max-width: 560px) {
    .hc { --hc-rand: 16px; }
    .hc .hc-start { padding: .4rem; }
    .hc .hc-start-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .hc .hc-start .hc-avatar { width: 52px; height: 52px; }
    .hc[data-zustand="offen"] { inset: 0; z-index: 2147483001; transform: none; transition: none; }
    .hc .hc-fenster { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; }
    .hc .hc-vorschlaege { grid-template-columns: 1fr; }
}

/* Niedrige Bildschirme (Telefon quer): ganze Fläche, Kopf und Hinweis kompakt, damit der Verlauf Platz hat */
@media (max-height: 520px) {
    .hc[data-zustand="offen"] { inset: 0; z-index: 2147483001; transform: none; transition: none; }
    .hc .hc-fenster { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; }
    .hc .hc-kopf { padding: .45rem 1rem .45rem 1.1rem; align-items: center; }
    .hc .hc-horizont { width: 44px; height: 32px; }
    .hc .hc-horizont .hc-avatar { width: 44px; height: 44px; animation: none; }
    .hc .hc-titel { font-size: 1.15rem; }
    .hc .hc-untertitel { display: none; }
    .hc .hc-schliessen { align-self: center; margin: 0; }
    .hc .hc-verlauf { padding-top: .8rem; }
    .hc .hc-vorschlaege { grid-template-columns: repeat(4, 1fr); }
    .hc .hc-hinweis { margin: .35rem 1rem .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hc, .hc[data-unten-bereit] { transition: none; }
    .hc *, .hc *::before, .hc *::after { animation: none !important; transition: none !important; }
}

@media print {
    .hc { display: none !important; }
}