/* Fundament CMS – gemeinsame Frontend-Bausteine (Bedienhilfe, Hinweisleisten, Bewegungsstufen).
   Anpassbar je Design über Variablen in site.css:
   --fd-accent (Akzentfarbe, Standard Gelb), --fd-font (Schrift), --fd-z (Ebene der Leisten),
   --fd-a11y-b / --fd-a11y-bm (Abstand des Knopfs „Ansicht anpassen“ von unten: Desktop / Handy) */

/* Bewegung: html[data-mlevel] setzt kern.js (full | soft | none) */
html[data-mlevel="soft"], html[data-mlevel="none"] { scroll-behavior: auto; }
html[data-mlevel="none"] *, html[data-mlevel="none"] *::before, html[data-mlevel="none"] *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
/* ohne JavaScript: Systemwunsch „Animationen reduzieren“ beachten (außer bei „Volle Animationen“) */
@media (prefers-reduced-motion: reduce) {
  html:not([data-mlevel]):not([data-motion="full"]) { scroll-behavior: auto; }
  html:not([data-mlevel]):not([data-motion="full"]) *, html:not([data-mlevel]):not([data-motion="full"]) *::before, html:not([data-mlevel]):not([data-motion="full"]) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Hinweisleisten oben: Wartungsmodus (nur angemeldet sichtbar), Entwurfs-Vorschau, Hinweis/Betriebsurlaub */
.maint-bar { position: relative; z-index: var(--fd-z, 95); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 9px max(16px, env(safe-area-inset-left)); background: repeating-linear-gradient(-45deg, #ffd84d 0 16px, #ffe680 16px 32px); color: #111; font: 400 .9rem/1.4 var(--fd-font, inherit); border-bottom: 2px solid #111; }
.maint-bar span { margin-right: auto; }
.maint-bar a { color: #111; font-weight: 800; text-decoration: underline; }
.maint-bar-prev { background: repeating-linear-gradient(-45deg, #9fe3ff 0 16px, #c8efff 16px 32px); }
.fd-notice { position: relative; z-index: var(--fd-z, 95); padding: 9px 16px; background: var(--fd-accent, #ffd84d); color: #111; font: 600 .95rem/1.4 var(--fd-font, inherit); text-align: center; }
.fd-notice strong { font-weight: 800; }

/* Bedienhilfe „Ansicht anpassen“ */
.a11y-fab { position: fixed; z-index: 85; left: calc(16px + env(safe-area-inset-left)); bottom: calc(var(--fd-a11y-b, 16px) + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border: 2px solid #111; border-radius: 999px; background: #fff; color: #000; font: 800 15px/1 var(--fd-font, system-ui, sans-serif); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.a11y-fab svg { width: 24px; height: 24px; fill: currentColor; }
.a11y-fab:hover, .a11y-fab.is-active { background: var(--fd-accent, #ffd84d); }
.a11y-fab:focus-visible, .a11y-panel :focus-visible { outline: 3px solid #000; outline-offset: 3px; box-shadow: 0 0 0 6px var(--fd-accent, #ffd84d); }
.a11y-panel { position: fixed; z-index: 96; left: calc(16px + env(safe-area-inset-left)); bottom: calc(var(--fd-a11y-b, 16px) + 60px + env(safe-area-inset-bottom)); width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 110px); overflow: auto; background: #fff; color: #000; border: 2px solid #000; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.25); padding: 18px 18px 14px; font: 400 16px/1.45 var(--fd-font, system-ui, sans-serif); text-align: left; }
.a11y-panel[hidden] { display: none; }
.a11y-panel, .a11y-fab { color-scheme: light; }
.a11y-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.a11y-head h2 { margin: 0; font: 800 20px/1.2 var(--fd-font, system-ui, sans-serif); color: #000; letter-spacing: 0; text-transform: none; }
.a11y-x { width: 36px; height: 36px; border: 2px solid #000; border-radius: 8px; background: #fff; color: #000; font-size: 16px; cursor: pointer; }
.a11y-lbl { display: block; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.a11y-seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid #000; border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.a11y-seg button { padding: 10px 0; border: 0; border-left: 2px solid #000; background: #fff; color: #000; font: 800 15px/1 var(--fd-font, system-ui, sans-serif); cursor: pointer; }
.a11y-seg button:first-child { border-left: 0; }
.a11y-seg button[aria-pressed="true"] { background: #000; color: #fff; }
.a11y-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.a11y-opts li { margin: 0; padding: 0; }
.a11y-opts li::before { content: none; }
.a11y-opts label { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 2px solid #d6d6d6; border-radius: 8px; cursor: pointer; color: #000; }
.a11y-opts label:has(input:checked) { border-color: #000; background: #fff7c2; }
.a11y-opts input { width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; padding: 0; flex: none; accent-color: #000; appearance: auto; -webkit-appearance: checkbox; background: none; border: 0; box-shadow: none; }
.a11y-opts span { display: grid; gap: 2px; }
.a11y-opts strong { font-size: 15px; }
.a11y-opts small { font-size: 13px; color: #333; }
.a11y-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.a11y-reset { padding: 9px 14px; border: 2px solid #000; border-radius: 8px; background: #fff; color: #000; font: 700 14px/1 var(--fd-font, system-ui, sans-serif); cursor: pointer; }
.a11y-foot a { color: #000; font-weight: 700; font-size: 14px; text-decoration: underline; }
.a11y-note { margin: 10px 0 0; font-size: 12.5px; color: #444; }
.a11y-panel .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) {
  .a11y-fab { bottom: calc(var(--fd-a11y-bm, 80px) + env(safe-area-inset-bottom)); left: calc(12px + env(safe-area-inset-left)); padding: 0; width: 44px; height: 44px; justify-content: center; }
  .a11y-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .a11y-panel { left: 12px; bottom: calc(var(--fd-a11y-bm, 80px) + 52px + env(safe-area-inset-bottom)); max-height: calc(100vh - 160px); }
}
@media print { .a11y-fab, .a11y-panel, .maint-bar { display: none !important; } }

/* Wirkung der Bedienhilfe – allgemein gehalten; Feinschliff je Design in site.css */
html.a11y-fs1 { font-size: 112.5%; }
html.a11y-fs2 { font-size: 125%; }
html.a11y-fs3 { font-size: 140%; }
html.a11y-contrast body, html.a11y-contrast main { background: #fff !important; color: #000 !important; }
html.a11y-contrast main :is(p, li, h1, h2, h3, h4, dt, dd, td, th, label, span, small, strong):not([aria-hidden="true"] *) { color: #000 !important; text-shadow: none !important; }
html.a11y-contrast main :is(section, article, div):not(.a11y-panel *) { background-image: none !important; }
html.a11y-font :is(body, p, li, dd, dt, input, textarea, select, label, h1, h2, h3, h4, .btn):not([aria-hidden="true"] *) { font-family: Verdana, Tahoma, sans-serif !important; letter-spacing: .01em !important; font-style: normal !important; }
html.a11y-space :is(p, li, dd, dt, label, td):not([aria-hidden="true"] *) { line-height: 1.9 !important; letter-spacing: .05em; word-spacing: .14em; }
html.a11y-space p { margin-bottom: 1.4em; }
html.a11y-links a:not(.btn) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px; }
html.a11y-links main a:not(.btn) { background: #fff3a0; color: #000 !important; }
html.a11y-focus :focus-visible { outline: 4px solid #000 !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px var(--fd-accent, #ffd84d) !important; }

/* Wartungsseite (Kern) */
.fd-mt-body { margin: 0; min-height: 100vh; background: var(--fd-mt-bg, #14171c); color: var(--fd-mt-ink, #f3f4f6); font-family: var(--fd-font, system-ui, sans-serif); }
.fd-mt { min-height: 100vh; display: grid; place-items: center; padding: 48px 20px; box-sizing: border-box; }
.fd-mt-in { width: min(720px, 100%); }
.fd-mt-logo { display: block; width: min(300px, 70vw); height: auto; margin: 0 0 40px; }
.fd-mt-name { font-weight: 800; font-size: 1.4rem; margin: 0 0 40px; }
.fd-mt-kick { margin: 0 0 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; color: var(--fd-accent, #ffd84d); }
.fd-mt-h { margin: 0 0 20px; font-size: clamp(2.2rem, 7vw, 4.2rem); line-height: 1.05; letter-spacing: -.02em; }
.fd-mt-h em { font-style: normal; color: var(--fd-accent, #ffd84d); }
.fd-mt-lead { margin: 0 0 28px; font-size: 1.15rem; line-height: 1.6; opacity: .88; max-width: 58ch; }
.fd-mt-date { margin: 0 0 24px; }
.fd-mt-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 28px; }
.fd-mt-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px; background: var(--fd-accent, #ffd84d); color: #111; font-weight: 800; text-decoration: none; }
.fd-mt-btn2 { background: transparent; color: inherit; border: 2px solid currentColor; }
.fd-mt-hours { margin: 0 0 24px; opacity: .85; line-height: 1.6; }
.fd-mt-foot { margin: 40px 0 0; font-size: .85rem; opacity: .7; }
.fd-mt-foot a { color: inherit; }