/* Ghostwriter – Anruf bei Ghostwriter (Lex' persönliche App, Design 2.2). Baut auf app.css auf: Farben, Schriften, Knöpfe und Blätter wie
   die übrige Seite. Auf der Startseite die Ghostwriter-Karte mit dem großen Knopf „Ghostwriter anrufen“, darunter die Anrufliste „Deine
   Gespräche“ und das Blatt mit der Mitschrift; im Anruf ein Vollbild wie am Telefon: ein ruhig bewegter, immer dunkler Verlauf,
   Ghostwriters Bild mit Ringen (orange und mit dem Mikrofon atmend beim Zuhören, mit seiner Stimme pulsierend beim Sprechen, ein
   laufender Bogen beim Überlegen), Untertitel und unten die Bedienleiste. */

:root {
  --auflegen: #d63a2a;       /* roter Hörer */
  --auf-auflegen: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root { --auflegen: #e5483a; }
}

/* ── Ghostwriter-Karte auf der Startseite ── */
.ghostwriter-karte {
  position: relative; isolation: isolate; overflow: hidden; padding: 20px 20px 18px; border-radius: var(--r-gross);
  background: linear-gradient(165deg, color-mix(in srgb, var(--signal) 15%, var(--karte)) 0%, var(--karte) 58%);
  border: 1px solid color-mix(in srgb, var(--signal) 26%, var(--linie));
}
.ghostwriter-karte::before { content: ""; position: absolute; z-index: -1; top: -120px; right: -100px; width: 330px; height: 330px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--signal) 30%, transparent), transparent); pointer-events: none; }
.ghostwriter-karte :focus-visible { outline-color: var(--tinte); }
.ghostwriter-kopf { display: flex; align-items: center; gap: 16px; }
.ghostwriter-foto { position: relative; flex: none; width: 72px; height: 72px; }
.ghostwriter-foto .ghostwriter-bild { width: 72px; height: 72px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 20%, var(--karte)), 0 0 0 4.5px color-mix(in srgb, var(--signal) 62%, transparent); }
.ghostwriter-online { position: absolute; right: 0; bottom: 1px; width: 18px; height: 18px; border-radius: 50%; background: #2fcf7a; border: 3.5px solid var(--karte); box-sizing: border-box; }
.ghostwriter-online.aus { background: var(--tinte-3); }
.ghostwriter-wer { min-width: 0; }
.ghostwriter-name { margin: 0; font-size: 26px; line-height: 1.1; font-weight: 650; letter-spacing: -.04em; }
.ghostwriter-rolle { margin: 4px 0 0; font-size: 14.5px; line-height: 1.3; color: var(--tinte-2); }
.ghostwriter-karte.still .ghostwriter-kopf { margin-bottom: 4px; }
.ghostwriter-karte.still .knopf { margin-top: 14px; }

/* Der Knopf: breit, Signalorange mit Verlauf, der Hörer in einem dunklen Kreis – ein ruhiger Ring läuft nach außen, wie beim Wählen */
.anruf-knopf {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; margin-top: 20px; padding: 9px 22px 9px 9px;
  border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--signal-2), var(--signal)); color: var(--auf-signal); font-size: 18px; font-weight: 650; letter-spacing: -.015em; line-height: 1.2; text-align: left;
  box-shadow: 0 20px 36px -20px color-mix(in srgb, var(--signal) 90%, transparent);
  cursor: pointer; transition: transform .15s var(--tempo), opacity .15s, filter .15s;
}
.anruf-knopf:active { transform: scale(.98); }
.anruf-knopf:disabled { opacity: .42; cursor: default; transform: none; box-shadow: none; }
.anruf-symbol { position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--auf-signal); color: var(--signal-2); }
.anruf-symbol svg { width: 23px; height: 23px; }
.anruf-symbol::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--auf-signal); border-radius: 50%; opacity: 0; animation: anruf-ring 2.8s ease-out infinite; }
.anruf-knopf:disabled .anruf-symbol::after { animation: none; }
.anruf-text { flex: 1; min-width: 0; }
@keyframes anruf-ring { 0% { opacity: .5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.55); } }
@media (hover: hover) { .anruf-knopf:not(:disabled):hover { filter: brightness(1.06); } }

.ghostwriter-grund { margin: 14px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--tinte-2); }
.ghostwriter-infos { list-style: none; display: grid; gap: 8px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--linie); }
.ghostwriter-infos li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.4; color: var(--tinte-2); }
.ghostwriter-infos svg { width: 16px; height: 16px; margin-top: 1px; flex: none; color: var(--tinte-3); }
.ghostwriter-infos li.ghostwriter-thema { margin-bottom: 4px; padding: 10px 14px 11px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--signal) 11%, var(--karte)); color: var(--tinte); font-size: 14.5px; line-height: 1.4; overflow-wrap: break-word; }
.ghostwriter-infos li.ghostwriter-thema svg { margin-top: 2px; color: var(--signal-text); }
.ghostwriter-infos li.ghostwriter-thema strong { font-weight: 650; }

/* ── Anrufliste „Deine Gespräche“: wie im Telefon ── */
.anrufe { list-style: none; margin: 0; padding: 0; overflow: hidden; border-radius: var(--r); background: var(--karte); border: 1px solid var(--linie); }
.anrufe li + li { border-top: 1px solid var(--linie); }
.anruf-eintrag { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; column-gap: 13px; width: 100%; padding: 13px 16px 13px 14px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.anruf-eintrag > svg { width: 18px; height: 18px; color: var(--tinte-3); }
.anruf-eintrag:focus-visible { outline-offset: -3px; }
.anruf-eintrag:active { background: var(--flaeche); }
.anruf-bild { width: 44px; height: 44px; }
.anruf-info { display: grid; gap: 2px; min-width: 0; }
.anruf-datum { font-size: 15.5px; font-weight: 650; line-height: 1.3; letter-spacing: -.015em; }
.anruf-punkt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.4; color: var(--tinte-2); overflow-wrap: break-word; }
.anruf-dauer { font-size: 13.5px; font-weight: 550; color: var(--tinte-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) { .anruf-eintrag:hover { background: var(--flaeche); } }

/* ── Blatt mit der Mitschrift ── */
dialog.mitschrift-blatt .info-innen { padding-bottom: 0; }
.mitschrift-kopf h2 { margin: 6px 0 6px; font-size: 26px; }
.mitschrift-unter { margin: 0; font-size: 14px; font-weight: 500; color: var(--tinte-3); font-variant-numeric: tabular-nums; }
.mitschrift-block { margin-top: 28px; }
.mitschrift .mitschrift-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 14px; }
.mitschrift .mitschrift-zeile h3 { margin: 0; }
.mitschrift-hinweis { margin: 28px 0 0; color: var(--tinte-2); }
.mitschrift-nochmal { margin-top: 14px; }
.wortlaut { display: grid; gap: 14px; }
.wechsel { display: grid; gap: 5px; max-width: 94%; }
.wechsel-ghostwriter { justify-self: start; }
.wechsel-ich { justify-self: end; }
.wechsel-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 8px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--tinte-3); }
.wechsel-rolle { font-weight: 650; color: var(--tinte); }
.wechsel-zeit { font-variant-numeric: tabular-nums; }
.wechsel-marke { padding: 1px 9px; border-radius: 999px; background: var(--flaeche); color: var(--tinte-2); font-size: 12px; }
.wechsel-text { margin: 0; padding: 12px 17px 13px; overflow-wrap: break-word; font-size: 16px; line-height: 1.5; }
.wechsel-ghostwriter .wechsel-text { border-radius: var(--r); background: color-mix(in srgb, var(--tinte) 8%, var(--erhaben)); }
.wechsel-ich .wechsel-text { border-radius: var(--r); background: color-mix(in srgb, var(--signal) 15%, var(--erhaben)); }
.wechsel.uebersprungen .wechsel-text { opacity: .62; }
/* „Schließen“ bleibt am unteren Rand sichtbar, auch bei langer Mitschrift */
dialog.mitschrift-blatt .info-fuss {
  position: sticky; bottom: 0; margin: 12px -24px 0; padding: 22px 24px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, color-mix(in srgb, var(--erhaben) 0%, transparent), var(--erhaben) 30%);
}
@media (min-width: 640px) { dialog.mitschrift-blatt .info-fuss { margin-inline: -32px; padding-inline: 32px; } }

/* ── Telefon-Ansicht (Vollbild): immer dunkel, wie ein Anruf – darum eigene Farben für alles, was darin steht ── */
dialog.gespraech {
  --grund: #0a0a10; --karte: #15151d; --flaeche: rgba(255, 255, 255, .1); --flaeche-2: rgba(255, 255, 255, .18); --erhaben: #1b1b24;
  --tinte: #f6f5f2; --tinte-2: #cbc9c3; --tinte-3: #a6a3ae;
  --linie: rgba(255, 255, 255, .1); --linie-2: rgba(255, 255, 255, .2); --linie-flaeche: rgba(255, 255, 255, .08);
  --signal: #ff6b35; --signal-2: #ff9a62; --signal-text: #ff9768; --auf-signal: #111111; --signal-hell: rgba(255, 107, 53, .16);
  --violett: #8f80ff; --violett-2: #b1a6ff;
  --auflegen: #e5483a;
  color-scheme: dark;
  position: fixed; inset: 0; isolation: isolate; overflow: hidden;
  width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100%; margin: 0; padding: 0; border: 0;
  background: linear-gradient(180deg, #13112b 0%, #0a0a10 58%); color: var(--tinte);
}
dialog.gespraech::backdrop { background: #0a0a10; }
/* Zwei große, weiche Lichter treiben langsam hin und her: Orange (Zuhören) und Violett (Ghostwriter spricht) */
dialog.gespraech::before, dialog.gespraech::after { content: ""; position: absolute; z-index: -1; width: 120vmax; height: 120vmax; border-radius: 50%; pointer-events: none; transition: opacity 1.4s ease; will-change: transform; }
dialog.gespraech::before { left: -60vmax; top: -62vmax; background: radial-gradient(closest-side, rgba(255, 107, 53, .5), rgba(255, 107, 53, 0)); opacity: .5; animation: drift-a 26s ease-in-out infinite alternate; }
dialog.gespraech::after { right: -62vmax; bottom: -66vmax; background: radial-gradient(closest-side, rgba(124, 104, 255, .5), rgba(124, 104, 255, 0)); opacity: .55; animation: drift-b 33s ease-in-out infinite alternate; }
dialog.gespraech[data-phase="zuhoeren"]::before { opacity: .95; }
dialog.gespraech[data-phase="zuhoeren"]::after { opacity: .3; }
dialog.gespraech[data-phase="sprechen"]::before { opacity: .25; }
dialog.gespraech[data-phase="sprechen"]::after { opacity: .95; }
dialog.gespraech[data-phase="ende"]::before, dialog.gespraech[data-phase="fehler"]::before { opacity: .3; }
dialog.gespraech[data-phase="ende"]::after, dialog.gespraech[data-phase="fehler"]::after { opacity: .4; }
@keyframes drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(12%, 14%, 0) scale(1.14); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-14%, -10%, 0) scale(.96); } }

.gespraech-rahmen { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; max-width: 640px; margin: 0 auto; padding: calc(8px + env(safe-area-inset-top)) var(--rand) calc(18px + env(safe-area-inset-bottom)); outline: none; }
.gespraech-kopf { display: flex; align-items: center; justify-content: flex-end; min-height: 48px; }
.gespraech-info { margin: 0; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 11px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 13.5px; font-weight: 550; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.gespraech-info svg { width: 15px; height: 15px; flex: none; }
/* Unten blendet die Mitte weich aus, wo Text unter die Bedienleiste läuft */
.gespraech-mitte { overflow: auto; display: flex; flex-direction: column; align-items: stretch; text-align: center; padding: clamp(6px, 4vh, 40px) 0 30px; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); }
/* Nichts schrumpft: Ist es zu viel, scrollt die Mitte, statt dass sich Zeilen überlagern */
.gespraech-mitte > * { flex: none; max-width: 32rem; margin-left: auto; margin-right: auto; }
.gespraech-mitte > :not(.gespraech-kugel) { width: 100%; }

/* Ghostwriters Bild mit drei Ringen. Zuhören: orange, die Ringe atmen mit dem Pegel des Mikrofons (--pegel). Sprechen: violett, die Ringe
   pulsieren unregelmäßig wie eine Stimme. Überlegen: ein Bogen läuft um das Bild. */
.gespraech-kugel { position: relative; flex: none; width: clamp(150px, 42vw, 172px); aspect-ratio: 1; margin: 4px auto 42px; transition: width .45s var(--tempo), margin .45s var(--tempo); }
.gespraech-kugel .kern { position: absolute; inset: 0; width: 100%; height: 100%; font-size: 64px; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255, 255, 255, .07), 0 32px 70px -26px rgba(0, 0, 0, .85); transform: scale(calc(1 + (var(--pegel, 1) - 1) * .22)); transition: transform .12s ease-out, box-shadow .5s, filter .4s, opacity .4s; }
.gespraech-kugel .kreis { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--signal) 60%, transparent); background: transparent; opacity: 0; transition: opacity .5s, transform .12s ease-out, border-color .5s; }
.gespraech-kugel .denkkreis { position: absolute; inset: -12px; border-radius: 50%; opacity: 0; transition: opacity .5s;
  background: conic-gradient(from 0deg, rgba(255, 154, 98, 0) 0deg, rgba(255, 154, 98, 0) 190deg, #ff9a62 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); }

.gespraech[data-phase="ende"] .gespraech-kugel, .gespraech[data-phase="fehler"] .gespraech-kugel { width: 100px; margin-bottom: 18px; }
.gespraech[data-phase="verbinden"] .kern { animation: atmen 1.6s ease-in-out infinite; }
.gespraech[data-phase="verbinden"] .kreis { opacity: .5; animation: gespraech-welle 2.6s ease-out infinite; }
.gespraech[data-phase="zuhoeren"] .kreis { opacity: .75; transform: scale(calc(1.1 + (var(--pegel, 1) - 1) * 0.9)); }
.gespraech[data-phase="zuhoeren"] .kreis-2 { opacity: .42; transform: scale(calc(1.2 + (var(--pegel, 1) - 1) * 1.4)); }
.gespraech[data-phase="zuhoeren"] .kreis-3 { opacity: .2; transform: scale(calc(1.3 + (var(--pegel, 1) - 1) * 1.9)); }
.gespraech[data-phase="denken"] .denkkreis, .gespraech[data-phase="abschluss"] .denkkreis { opacity: 1; animation: drehen 1.9s linear infinite; }
.gespraech[data-phase="denken"] .kern, .gespraech[data-phase="abschluss"] .kern { filter: saturate(.8); animation: atmen 3.2s ease-in-out infinite; }
.gespraech[data-phase="sprechen"] .kern { animation: stimme-kern 2.4s ease-in-out infinite; box-shadow: 0 0 0 5px rgba(177, 166, 255, .16), 0 32px 70px -26px rgba(124, 104, 255, .7); }
.gespraech[data-phase="sprechen"] .kreis { border-color: color-mix(in srgb, var(--violett-2) 75%, transparent); animation: stimme 2.2s ease-out infinite; }
.gespraech[data-phase="sprechen"] .kreis-2 { animation-duration: 3s; animation-delay: .5s; }
.gespraech[data-phase="sprechen"] .kreis-3 { animation-duration: 3.8s; animation-delay: 1.2s; }
.gespraech[data-phase="fehler"] .kern { filter: grayscale(1); opacity: .5; }
@keyframes stimme { 0% { opacity: .85; transform: scale(1.02); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes stimme-kern { 0%, 100% { transform: scale(1); } 17% { transform: scale(1.035); } 33% { transform: scale(1.008); } 52% { transform: scale(1.045); } 70% { transform: scale(1.012); } 86% { transform: scale(1.03); } }
@keyframes gespraech-welle { from { opacity: .6; transform: scale(1.02); } to { opacity: 0; transform: scale(1.4); } }
@keyframes drehen { to { transform: rotate(360deg); } }

/* Name und Zustand wie auf dem Anrufbildschirm */
.gespraech-wer { text-align: center; }
.gespraech-name { margin: 0; font-size: clamp(28px, 7.6vw, 32px); line-height: 1.1; font-weight: 650; letter-spacing: -.04em; }
.gespraech-zustand { margin: 12px 0 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 15px 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .07); font-size: 14.5px; font-weight: 550; line-height: 1.3; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.gespraech-zustand::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.gespraech-zeit { display: inline-flex; gap: 8px; color: var(--tinte-3); }
.gespraech-zeit .trenner { opacity: .7; }
.gespraech[data-phase="zuhoeren"] .gespraech-zustand { color: var(--signal-2); }
.gespraech[data-phase="zuhoeren"] .gespraech-zustand::before { animation: puls 1.8s ease-in-out infinite; }
.gespraech[data-phase="denken"] .gespraech-zustand, .gespraech[data-phase="abschluss"] .gespraech-zustand { color: var(--tinte); }
.gespraech[data-phase="sprechen"] .gespraech-zustand { color: var(--violett-2); }
.gespraech[data-phase="fehler"] .gespraech-zustand { color: #ff9a8a; }

/* Untertitel: Ghostwriters Frage in Geist, darunter die eigene Mitschrift klein und gedämpft */
.gespraech-untertitel { display: grid; gap: 16px; margin-top: 26px; }
.gespraech-text { margin: 0; font-size: clamp(18px, 5vw, 20px); line-height: 1.42; font-weight: 520; letter-spacing: -.015em; text-wrap: balance; overflow-wrap: break-word; }
.gespraech-text.neu { animation: einblenden .5s var(--tempo) both; }
.gespraech-mitschrift { margin: 0; min-height: 1.5em; font-size: 15.5px; line-height: 1.5; color: var(--tinte-3); overflow-wrap: break-word; }
.gespraech-mitschrift .vorlaeufig { opacity: .72; }
.gespraech-hinweis { margin: 0; font-size: 14px; line-height: 1.45; color: var(--tinte-3); }
.gespraech-ton { justify-self: center; max-width: 24rem; white-space: normal; text-align: center; }

/* Ende: Kurz gefasst und die Zeile „schreibt jetzt weiter“ */
.gespraech-kurz { padding: 16px 18px 18px; border-radius: var(--r-mittel); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .07); text-align: left; }
.gespraech-kurz .etikett { margin-bottom: 10px; color: var(--tinte-3); }
.gespraech-zusammenfassung { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15.5px; line-height: 1.45; text-align: left; }
.gespraech-zusammenfassung li::marker { color: var(--signal-2); }
.gespraech-schreibt { display: flex; align-items: center; gap: 12px; margin: 0; padding: 13px 16px; border-radius: var(--r-mittel); background: var(--signal-hell); color: var(--signal-2); font-size: 14.5px; font-weight: 550; line-height: 1.4; text-align: left; }

/* ── Bedienleiste wie am Telefon ── */
.gespraech-fuss { display: grid; grid-template-columns: 84px minmax(0, 1fr) 84px; align-items: start; gap: 10px; padding-top: 12px; }
.gespraech-fuss > .knopf { min-height: 64px; font-size: 17px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.gespraech-fuss > .knopf-akzent { box-shadow: 0 18px 34px -18px rgba(255, 107, 53, .9); }
.gespraech-fuss > .knopf:disabled { opacity: 1; color: var(--tinte-2); }
.gespraech-fuss[data-art="ende"], .gespraech-fuss[data-art="fehler"] { display: flex; gap: 10px; }
.gespraech-fuss[data-art="ende"] > .knopf, .gespraech-fuss[data-art="fehler"] > .knopf { flex: 1; }
.gespraech-fuss[data-art="ende"] > .knopf-primaer { flex: 1.7; }
.telefon-seite { display: grid; justify-items: center; gap: 8px; }
.telefon-rund { display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--tinte); cursor: pointer; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background .15s, transform .15s var(--tempo), opacity .15s; }
.telefon-rund svg { width: 26px; height: 26px; }
.telefon-rot svg { width: 30px; height: 30px; }
.telefon-rund:active { transform: scale(.94); }
.telefon-rund:disabled { opacity: .36; cursor: default; transform: none; }
.telefon-rot { border-color: transparent; background: var(--auflegen); color: var(--auf-auflegen); box-shadow: 0 16px 30px -16px rgba(229, 72, 58, .9); }
.telefon-text { font-size: 12.5px; font-weight: 550; line-height: 1.2; text-align: center; white-space: nowrap; color: var(--tinte-2); }
@media (hover: hover) {
  .telefon-rund:not(:disabled):hover { background: rgba(255, 255, 255, .18); }
  .telefon-rot:not(:disabled):hover { background: color-mix(in srgb, var(--auflegen) 88%, #000); }
}
@media (max-width: 360px) {
  .gespraech-fuss { grid-template-columns: 76px minmax(0, 1fr) 76px; gap: 6px; }
  .telefon-text { font-size: 12px; }
}
/* Niedrige Bildschirme (kleines Telefon, quer gehalten): Bild und Name kleiner, damit die Frage Platz hat */
@media (max-height: 700px) {
  .gespraech-kugel { width: 118px; margin-bottom: 30px; }
  .gespraech-name { font-size: 24px; }
  .gespraech-untertitel { margin-top: 18px; }
  .gespraech-mitte { padding-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .gespraech-kugel .kern { transform: none; transition: none; }
  .gespraech-kugel .kreis { transform: none !important; transition: none; }
  .anruf-symbol::after { animation: none !important; }
}