/* KI-Gesicht-Demo (K523): Abschnitt mit Klick-zum-Laden-Frame. Farben und Masse nur ueber Tokens (tokens.css). */
.gesicht-demo{border:var(--b-haar) solid var(--c-line);border-radius:var(--r-3);background:var(--c-surface-2);overflow:hidden}
.gesicht-start{display:grid;gap:var(--s-5);align-items:center;padding:var(--s-5);grid-template-columns:minmax(0,1fr)}
.gesicht-start img{width:100%;max-width:15rem;height:auto;justify-self:center}
.gesicht-text p{margin:0 0 var(--s-3);max-width:46ch}
.gesicht-text .knopfreihe{margin-top:var(--s-4)}
@media (min-width:760px){.gesicht-start{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--s-7);padding:var(--s-6)}}
.gesicht-demo.laeuft{background:none;border:0;border-radius:0;overflow:visible}
.gesicht-demo iframe{display:block;width:100%;height:34rem;border:0;color-scheme:normal}
.gesicht-hinweis{margin-top:var(--s-3);max-width:70ch}
.gesicht-vorab{margin:0 auto var(--s-4);max-width:60ch;padding:var(--s-3) var(--s-5);text-align:center;background:var(--c-entschieden-fill);border:var(--b-haar) solid var(--c-entschieden-line);border-radius:var(--r-3);color:var(--c-entschieden-text);font-weight:var(--fw-medium);font-size:var(--fs-md)}