/* ki-sozial.info – Basis-Styles (alle Seiten) */
@font-face { font-family: 'Inter'; src: url('schriften/inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('schriften/space-grotesk.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; overflow-anchor: none; }
body { margin: 0; background: #f6f4ef; color: #23211d; font: 400 17px/1.65 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #14555f; }
a:hover { color: #0e434c; }
:focus-visible { outline: 3px solid #14555f; outline-offset: 2px; }
footer :focus-visible, [role="dialog"] :focus-visible, #story-bars :focus-visible { outline-color: #ffffff; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
img { max-width: 100%; }
input, textarea, button { font: inherit; }
input::placeholder { color: #6b6559; opacity: 1; }
textarea { resize: vertical; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* Sprunglink */
.sprung { position: absolute; left: -9999px; top: auto; z-index: 100; background: #14555f; color: #ffffff; font-weight: 600; text-decoration: none; padding: 12px 18px; border-radius: 0 0 10px 0; }
.sprung:focus { left: 0; top: 0; color: #ffffff; }

/* Interaktionszustände (ersetzen die Hover-Attribute der Vorschau) */
.cta:hover { background: #0e434c !important; color: #ffffff; }
.pill:hover { border-color: #14555f !important; color: #14555f !important; }
.pill-dunkel:hover { border-color: #eceae3 !important; color: #ffffff !important; }
.lnk-hell:hover { color: #ffffff; }
.mail-link:hover { border-bottom-color: #ffffff !important; color: #ffffff; }
.tel-link:hover { color: #14555f; border-bottom-color: #14555f !important; }
.kopier-hell:hover { color: #ffffff !important; }
.kopier-dunkel:hover { color: #14555f !important; }
.kopier-hell:focus-visible, .kopier-dunkel:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.quiz-btn:hover { background: #e6efef; }
.mehr-btn:hover { color: #0f3f47 !important; }
.chat-send:hover { background: #0f4249 !important; }
.lb-close:hover { background: #e6efef; }
.neu-btn:hover { color: #0f4249 !important; }

/* „Kennen Sie das?“ – überall linksbündig, gleiche Kante wie der Titel oben */
.zentriert { text-align: left; }

/* Hinweis in der Bildergeschichte – leichtes Auf und Ab */
@keyframes story-tippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.story-pfeil { display: inline-block; animation: story-tippen 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .story-pfeil { animation: none; } }

/* Kopfzeile: Burger-Menü */
.menue-lnk { display: block; padding: 11px 14px; border-radius: 9px; font-weight: 600; color: #23211d; text-decoration: none; }
.menue-lnk:hover { background: #f0ede5; color: #23211d; }
.menue-lnk.klein { font-weight: 500; font-size: 0.92rem; color: #57534a; padding: 8px 14px; }
.menue-lnk.hervor { color: #14555f; background: #eef3f2; margin-top: 6px; border: 1.5px solid #14555f; text-align: center; }
.menue-lnk.hervor:hover { background: #14555f; color: #ffffff; }
#menue-panel:not([hidden]) { display: flex; flex-direction: column; gap: 2px; }
#menue-panel[hidden] { display: none !important; }
.burger-linie { display: block; width: 18px; height: 2px; background: #23211d; border-radius: 2px; transition: transform 0.18s ease, opacity 0.18s ease; }
#menue-knopf.offen .burger-linie:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#menue-knopf.offen .burger-linie:nth-child(2) { opacity: 0; }
#menue-knopf.offen .burger-linie:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }