/* Bewegungshelden Bayern GmbH – Stylesheet */

/* Schriften (lokal gehostet, SIL Open Font License – siehe /fonts) */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque.woff") format("woff"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff") format("woff"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-500.woff") format("woff"); font-weight: 500; font-display: swap; }

:root {
  --blau: #102445;
  --blau-dunkel: #0A1A33;
  --blau-flaeche: #1B3560;
  --akzent: #C8F169;
  --grund: #F4F6F9;
  --grund-2: #E4E9F1;
  --weiss: #FFFFFF;
  --text: #141B2A;
  --text-2: #3D4759;
  --text-3: #4A5468;
  --hell-1: #C8D2E2;
  --hell-2: #D3DCEA;
  --hell-3: #9DACC6;
  --linie: #B9C2D0;
  --linie-2: #9AA5B6;
  /* Physiohelden-Hausfarben */
  --ph-tannengruen: #1B4D3A;
  --ph-elfenbein: #F3EFE6;
  --ph-gold: #C8AE7D;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Figtree", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--text); background: var(--grund); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--blau); }
a:hover { color: var(--blau-dunkel); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 6px; }

.container { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--akzent); color: var(--blau); padding: 12px 16px; border-radius: 8px; }

/* Typo */
h1, h2, h3 { font-family: var(--display); margin: 0; color: inherit; overflow-wrap: break-word; }
.eyebrow { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.h2 { font-weight: 800; font-size: clamp(calc(34px * var(--skala-t, 1)), calc(4.5vw * var(--skala-t, 1)), calc(56px * var(--skala-t, 1))); line-height: 1.02; letter-spacing: -.015em; color: var(--blau); }
.lead { margin: 0; font-size: 1.125rem; color: var(--text-2); }

/* Buttons */
.btn { display: inline-block; text-decoration: none; padding: 16px 28px; border-radius: 999px; font-weight: 700; font-size: 1rem; text-align: center; border: 2px solid transparent; cursor: pointer; font-family: inherit; line-height: 1.2; }
.btn-akzent { background: var(--akzent); color: var(--blau); }
.btn-akzent:hover { color: var(--blau); filter: brightness(1.05); }
.btn-blau { background: var(--blau); color: var(--grund); }
.btn-blau:hover { color: #fff; background: var(--blau-dunkel); }
.btn-outline-hell { border: 1.5px solid #6F82A3; color: var(--grund); }
.btn-outline-hell:hover { color: #fff; border-color: var(--hell-1); }
.btn-outline-blau { border-color: var(--blau); color: var(--blau); }

/* Wortmarke */
.wortmarke { display: inline-flex; flex-direction: column; line-height: .95; text-decoration: none; color: var(--grund); }
.wortmarke:hover { color: var(--grund); }
.wortmarke .wm-name { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -.02em; }
.wortmarke .wm-name span { color: var(--akzent); }
.wortmarke .wm-sub { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.wortmarke .wm-sub i { display: block; width: 34px; height: 3px; border-radius: 3px; background: var(--akzent); }
.wortmarke .wm-sub b { font-weight: 500; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--hell-1); }

/* Header */
.site-header { background: var(--blau); color: var(--grund); }
.site-header .container { padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; font-weight: 500; font-size: 0.9375rem; }
.nav a { color: var(--grund); text-decoration: none; padding: 12px 0; }
.nav a:hover { color: var(--akzent); }
.nav a.nav-cta { background: var(--akzent); color: var(--blau); padding: 12px 20px; border-radius: 999px; font-weight: 700; }

/* Hero */
.hero { background: var(--blau); color: var(--grund); overflow: hidden; }
.hero .container { padding-top: 72px; padding-bottom: 96px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.hero-text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero-text .eyebrow { color: var(--akzent); font-weight: 600; }
.hero h1 { font-weight: 800; font-size: clamp(calc(44px * var(--skala-t, 1)), calc(7vw * var(--skala-t, 1)), calc(88px * var(--skala-t, 1))); line-height: .98; letter-spacing: -.02em; }
.hero p { margin: 0; font-size: 1.1875rem; max-width: 560px; color: var(--hell-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.hero-visual { flex: 1 1 400px; min-width: 0; position: relative; display: flex; justify-content: center; }
.hero-bild { width: 100%; max-width: 480px; aspect-ratio: 4 / 5; border-radius: 240px 240px 32px 32px; background: var(--blau-flaeche); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--hell-3); font-size: 0.9375rem; text-align: center; padding: 32px; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; }
.hero-linie { position: absolute; display: block; height: 18px; border-radius: 18px; background: var(--akzent); }
.hero-linie-1 { left: max(0px, calc(50% - 300px)); bottom: 56px; width: 200px; }
.hero-linie-2 { left: max(0px, calc(50% - 300px)); bottom: 92px; width: 120px; opacity: .5; }
.hero-badge { position: absolute; right: 0; top: 32px; background: var(--grund); color: var(--blau); border-radius: 20px; padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.hero-badge small { font-size: 0.75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.hero-badge strong { font-family: var(--display); font-weight: 700; font-size: 1.375rem; }

/* Sektionen */
.section { padding-top: 112px; padding-bottom: 112px; }
.section-alt { background: var(--grund-2); }
.split { display: flex; flex-wrap: wrap; gap: 32px 72px; align-items: flex-end; }
.split > * { flex: 1 1 420px; }
.stack { display: flex; flex-direction: column; gap: 16px; }

.karten-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 56px; }
.karte { background: var(--weiss); border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 16px; }
.karte h3 { font-weight: 700; font-size: 1.5rem; color: var(--blau); }
.karte p { margin: 0; color: var(--text-2); }

/* Marken */
.marken { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 48px; }
.marke-ph { flex: 2 1 520px; min-width: 0; background: var(--ph-tannengruen); color: var(--ph-elfenbein); text-decoration: none; border-radius: 32px; padding: 48px; display: flex; flex-direction: column; gap: 32px; }
.marke-ph:hover { color: var(--ph-elfenbein); }
.marke-ph .ph-lockup { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.marke-ph .ph-lockup img { width: 76px; height: 80px; object-fit: contain; }
.marke-ph .ph-name { display: flex; flex-direction: column; gap: 6px; line-height: 1; }
.marke-ph .ph-name strong { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; font-size: clamp(calc(38px * var(--skala-t, 1)), calc(4.2vw * var(--skala-t, 1)), calc(54px * var(--skala-t, 1))); }
.marke-ph .ph-name span { font-family: "IBM Plex Sans", sans-serif; font-weight: 500; font-size: 0.8125rem; letter-spacing: .42em; text-transform: uppercase; color: var(--ph-gold); }
.marke-ph p { margin: 0; font-size: 1.125rem; color: #D9E4DC; max-width: 520px; }
.marke-ph .ph-link { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ph-gold); }
.marke-platzhalter { flex: 1 1 300px; min-width: 0; border: 2px dashed var(--linie-2); border-radius: 32px; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.marke-platzhalter .plus { width: 72px; height: 72px; border-radius: 20px; border: 2px dashed var(--linie-2); display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.marke-platzhalter h3 { font-weight: 700; font-size: 1.75rem; color: var(--blau); }
.marke-platzhalter p { margin: 10px 0 0; color: var(--text-2); }

/* Standorte */
.zwei-spalten { display: flex; flex-wrap: wrap; gap: 48px 72px; }
.zwei-spalten > :first-child { flex: 1 1 360px; min-width: 0; }
.zwei-spalten > :last-child { flex: 1.4 1 480px; min-width: 0; }
.standort { background: var(--weiss); border-radius: 28px; padding: 36px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.standort .info { display: flex; flex-direction: column; gap: 8px; color: var(--text-2); }
.standort .tag { align-self: flex-start; background: var(--akzent); color: var(--blau); font-size: 0.75rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; letter-spacing: .06em; text-transform: uppercase; }
.standort h3 { font-weight: 800; font-size: 2rem; color: var(--blau); }
.standort address { font-style: normal; }
.standort .btn { padding: 14px 24px; font-size: 0.9375rem; }
.standort-bald { border: 2px dashed var(--linie); border-radius: 28px; padding: 28px 36px; color: var(--text-3); display: flex; align-items: center; gap: 12px; margin-top: 16px; }

/* Karriere */
.karriere-box { background: var(--akzent); color: var(--blau); border-radius: 40px; padding: clamp(40px, 6vw, 88px); display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: space-between; }
.karriere-box .eyebrow { color: var(--blau); }
.karriere-box h2 { font-weight: 800; font-size: clamp(calc(36px * var(--skala-t, 1)), calc(5vw * var(--skala-t, 1)), calc(64px * var(--skala-t, 1))); line-height: 1; letter-spacing: -.02em; }
.karriere-box p { margin: 0; font-size: 1.125rem; max-width: 560px; }
.karriere-text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.karriere-actions { display: flex; flex-direction: column; gap: 12px; flex: 0 1 280px; }

/* Kontakt */
.kontakt-daten { display: flex; flex-direction: column; gap: 6px; font-size: 1.0625rem; color: var(--text-2); font-style: normal; }
.kontakt-daten strong { color: var(--blau); }
.formular { background: var(--weiss); border-radius: 32px; padding: 40px; }
.formular form { display: flex; flex-direction: column; gap: 18px; }
.formular .reihe { display: flex; flex-wrap: wrap; gap: 18px; }
.formular .reihe label { flex: 1 1 200px; }
.formular label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.875rem; color: var(--blau); }
.formular input, .formular select, .formular textarea { font: inherit; font-weight: 400; font-size: 1rem; padding: 14px 16px; border: 1.5px solid var(--linie); border-radius: 14px; background: #F7F9FC; color: var(--text); width: 100%; }
.formular textarea { resize: vertical; }
.formular .check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; color: var(--text-2); }
.formular .check input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.formular .hp { position: absolute; left: -9999px; }
.formular button { align-self: flex-start; }
.hinweis { padding: 14px 18px; border-radius: 14px; font-weight: 600; }
.hinweis-ok { background: #E3F6C4; color: #1F3A08; }
.hinweis-fehler { background: #FDE2DD; color: #6B1A0C; }

/* Footer */
.site-footer { background: var(--blau-dunkel); color: var(--hell-1); }
.site-footer .container { padding-top: 56px; padding-bottom: 40px; }
.footer-top { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; }
.footer-info { display: flex; flex-direction: column; gap: 10px; max-width: 420px; font-size: 0.875rem; }
.footer-info strong { font-size: 1rem; color: var(--grund); }
.footer-info .wortmarke .wm-name { font-size: 32px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 0.9375rem; }
.footer-nav a { color: var(--grund); text-decoration: none; padding: 10px 0; }
.footer-nav a:hover { color: var(--akzent); }
.copyright { margin-top: 40px; font-size: 0.8125rem; color: var(--hell-3); }

/* Rechtstexte */
.recht { max-width: 820px; }
.recht h1 { hyphens: auto; font-weight: 800; font-size: clamp(calc(36px * var(--skala-t, 1)), calc(5vw * var(--skala-t, 1)), calc(56px * var(--skala-t, 1))); color: var(--blau); margin-bottom: 32px; }
.recht h2 { font-weight: 700; font-size: 1.5rem; color: var(--blau); margin: 40px 0 12px; }
.recht p, .recht li { color: var(--text-2); }
.recht .todo { background: #FFF4CC; border: 1px solid #E5C65C; color: #4A3A00; border-radius: 14px; padding: 16px 20px; }

/* Hell/Dunkel-Schalter */
.tools { display: flex; align-items: center; gap: 8px; }
.tool-btn { min-width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid #6F82A3; background: transparent; color: var(--grund); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 10px; font-family: var(--display); font-weight: 700; line-height: 1; }
.tool-btn:hover { border-color: var(--akzent); color: var(--akzent); }
.tool-btn:disabled { opacity: .45; cursor: default; }
.tool-btn .a-klein { font-size: 14px; }
.tool-btn .a-gross { font-size: 22px; }
[data-theme="hell"] .tool-btn { color: var(--blau); border-color: var(--linie); }
[data-theme="hell"] .tool-btn:hover { color: var(--gruen-text); border-color: var(--gruen-text); }
.theme-toggle { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #6F82A3; background: transparent; color: var(--grund); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.theme-toggle:hover { border-color: var(--akzent); color: var(--akzent); }
.theme-toggle .icon-mond { display: none; }
.header-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }

/* Heller Modus */
[data-theme="hell"] { --gruen-wm: #4E8A2E; --gruen-text: #3E7524; }
[data-theme="hell"] body { background: var(--grund); }
[data-theme="hell"] .site-header,
[data-theme="hell"] .hero { background: var(--weiss); color: var(--blau); }
[data-theme="hell"] .site-header { border-bottom: 1px solid var(--grund-2); }
[data-theme="hell"] .nav a { color: var(--blau); }
[data-theme="hell"] .nav a:hover { color: var(--gruen-text); }
[data-theme="hell"] .nav a.nav-cta { background: var(--akzent); color: var(--blau); }
[data-theme="hell"] .wortmarke,
[data-theme="hell"] .wortmarke:hover { color: var(--blau); }
[data-theme="hell"] .wortmarke .wm-name span { color: var(--gruen-wm); }
[data-theme="hell"] .wortmarke .wm-sub i { background: var(--gruen-wm); }
[data-theme="hell"] .wortmarke .wm-sub b { color: var(--text-3); }
[data-theme="hell"] .theme-toggle { color: var(--blau); border-color: var(--linie); }
[data-theme="hell"] .theme-toggle:hover { color: var(--gruen-text); border-color: var(--gruen-text); }
[data-theme="hell"] .theme-toggle .icon-sonne { display: none; }
[data-theme="hell"] .theme-toggle .icon-mond { display: block; }
[data-theme="hell"] .hero-text .eyebrow { color: var(--gruen-text); }
[data-theme="hell"] .hero p { color: var(--text-2); }
[data-theme="hell"] .btn-outline-hell { border-color: var(--blau); color: var(--blau); }
[data-theme="hell"] .btn-outline-hell:hover { background: var(--blau); color: var(--grund); }
[data-theme="hell"] .hero-bild { background: var(--grund-2); color: var(--text-3); }
[data-theme="hell"] .hero-linie { background: var(--gruen-wm); }
[data-theme="hell"] .hero-badge { background: var(--blau); color: var(--grund); }
[data-theme="hell"] .hero-badge small { color: var(--hell-1); }
[data-theme="hell"] .site-footer { background: var(--grund-2); color: var(--text-2); }
[data-theme="hell"] .footer-info strong { color: var(--blau); }
[data-theme="hell"] .footer-nav a { color: var(--blau); }
[data-theme="hell"] .footer-nav a:hover { color: var(--gruen-text); }
[data-theme="hell"] .copyright { color: var(--text-3); }

@media (max-width: 700px) {
  .site-header .container { position: relative; }
  .header-rechts { width: 100%; position: relative; }
  .tools { gap: 8px; }
  .a11y { position: static; }
  .a11y-panel { right: auto; left: 0; }
}

/* ===== Barrierefreiheit-Menü ===== */
.a11y { position: relative; }
.a11y-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; width: min(340px, calc(100vw - 32px)); background: var(--weiss); color: var(--text); border-radius: 20px; padding: 20px; box-shadow: 0 18px 48px rgba(10, 26, 51, .28); display: flex; flex-direction: column; gap: 8px; }
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font-family: var(--display); font-size: 1.125rem; font-weight: 700; color: var(--blau); margin: 0 0 6px; }
.a11y-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--linie); border-radius: 14px; background: #F7F9FC; color: var(--text); font: inherit; font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer; text-decoration: none; }
.a11y-option:hover { border-color: var(--blau); color: var(--text); }
.a11y-option .schalter { flex: none; width: 40px; height: 24px; border-radius: 24px; background: var(--linie); position: relative; }
.a11y-option .schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.a11y-option[aria-pressed="true"] { border-color: var(--blau); background: var(--grund-2); }
.a11y-option[aria-pressed="true"] .schalter { background: var(--blau); }
.a11y-option[aria-pressed="true"] .schalter::after { left: 19px; }
.a11y-option svg { flex: none; }
.a11y-reset { margin-top: 4px; align-self: flex-start; background: none; border: none; padding: 10px 4px; font: inherit; font-weight: 600; color: var(--blau); text-decoration: underline; cursor: pointer; }

/* Links unterstreichen */
html[data-links="an"] a:not(.wortmarke):not(.skip) { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* Mehr Zeilenabstand */
html[data-zeilen="an"] body { line-height: 1.95; }
html[data-zeilen="an"] p, html[data-zeilen="an"] li, html[data-zeilen="an"] address, html[data-zeilen="an"] .lead { letter-spacing: .03em; word-spacing: .12em; }
html[data-zeilen="an"] h1, html[data-zeilen="an"] h2, html[data-zeilen="an"] h3 { line-height: 1.25 !important; }

/* Hoher Kontrast (schlägt hell/dunkel) */
html[data-kontrast="hoch"] {
  --blau: #000000; --blau-dunkel: #000000; --blau-flaeche: #1A1A1A; --akzent: #FFE600;
  --grund: #FFFFFF; --grund-2: #FFFFFF; --weiss: #FFFFFF;
  --text: #000000; --text-2: #000000; --text-3: #000000;
  --hell-1: #FFFFFF; --hell-2: #FFFFFF; --hell-3: #FFFFFF;
  --linie: #000000; --linie-2: #000000;
  --ph-tannengruen: #000000; --ph-elfenbein: #FFFFFF; --ph-gold: #FFE600;
  --gruen-wm: #FFE600; --gruen-text: #FFE600;
}
html[data-kontrast="hoch"] .site-header, html[data-kontrast="hoch"] .hero, html[data-kontrast="hoch"] .site-footer { background: #000; color: #fff; border-bottom: 0; }
html[data-kontrast="hoch"] .nav a, html[data-kontrast="hoch"] .footer-nav a, html[data-kontrast="hoch"] .wortmarke { color: #fff; }
html[data-kontrast="hoch"] .nav a.nav-cta { background: #FFE600; color: #000; }
html[data-kontrast="hoch"] .wortmarke .wm-name span { color: #FFE600; }
html[data-kontrast="hoch"] .wortmarke .wm-sub i { background: #FFE600; }
html[data-kontrast="hoch"] .wortmarke .wm-sub b, html[data-kontrast="hoch"] .footer-info, html[data-kontrast="hoch"] .footer-info strong, html[data-kontrast="hoch"] .copyright { color: #fff; }
html[data-kontrast="hoch"] .hero-text .eyebrow { color: #FFE600; }
html[data-kontrast="hoch"] .hero p { color: #fff; }
html[data-kontrast="hoch"] .tool-btn, html[data-kontrast="hoch"] .theme-toggle { color: #fff; border-color: #fff; }
html[data-kontrast="hoch"] .btn-outline-hell { color: #fff; border-color: #fff; }
html[data-kontrast="hoch"] .hero-bild { background: #1A1A1A; color: #fff; border: 2px solid #fff; }
html[data-kontrast="hoch"] .hero-badge { background: #fff; color: #000; border: 2px solid #000; }
html[data-kontrast="hoch"] .hero-badge small { color: #000; }
html[data-kontrast="hoch"] .hero-linie { background: #FFE600; }
html[data-kontrast="hoch"] .karte, html[data-kontrast="hoch"] .standort, html[data-kontrast="hoch"] .formular { border: 2px solid #000; }
html[data-kontrast="hoch"] .karte svg, html[data-kontrast="hoch"] .karte svg * { stroke: #000; }
html[data-kontrast="hoch"] .section-alt { border-top: 2px solid #000; border-bottom: 2px solid #000; }
html[data-kontrast="hoch"] .marke-ph p { color: #fff; }
html[data-kontrast="hoch"] .marke-ph { border: 2px solid #000; }
html[data-kontrast="hoch"] .standort .tag { background: #000; color: #FFE600; }
html[data-kontrast="hoch"] .karriere-box { background: #FFE600; color: #000; border: 2px solid #000; }
html[data-kontrast="hoch"] .btn-blau { background: #000; color: #fff; }
html[data-kontrast="hoch"] .formular input, html[data-kontrast="hoch"] .formular select, html[data-kontrast="hoch"] .formular textarea { background: #fff; border: 2px solid #000; color: #000; }
html[data-kontrast="hoch"] .a11y-option { background: #fff; border: 2px solid #000; color: #000; }
html[data-kontrast="hoch"] .a11y-option[aria-pressed="true"] { background: #FFE600; }
html[data-kontrast="hoch"] .a11y-panel { border: 3px solid #000; }
html[data-kontrast="hoch"] :focus-visible { outline: 3px solid #FFE600; box-shadow: 0 0 0 6px #000; }
html[data-kontrast="hoch"] .recht .todo { background: #fff; border: 2px solid #000; color: #000; }

/* Leichte Sprache */
.ls { max-width: 760px; font-size: 1.25rem; line-height: 1.8; }
.ls h1 { font-weight: 800; font-size: clamp(calc(36px * var(--skala-t, 1)), calc(5vw * var(--skala-t, 1)), calc(56px * var(--skala-t, 1))); color: var(--blau); margin-bottom: 24px; }
.ls h2 { font-weight: 700; font-size: 1.75rem; color: var(--blau); margin: 48px 0 12px; }
.ls p { margin: 0 0 14px; color: var(--text); }
.ls ul { margin: 0 0 14px; padding-left: 1.4em; }
.ls li { margin-bottom: 8px; }
.ls .wort { background: var(--grund-2); border-radius: 14px; padding: 14px 18px; margin: 0 0 14px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .a11y-option .schalter::after { transition: none; } }

@media (max-width: 700px) {
  .a11y { position: static; }
  .a11y-panel { left: 0; right: auto; width: 100%; max-width: 360px; }
}

/* Schriftgröße im Menü */
.a11y-schrift { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 8px 6px 14px; border: 1.5px solid var(--linie); border-radius: 14px; background: #F7F9FC; font-weight: 600; }
.a11y-schrift-knoepfe { display: flex; align-items: center; gap: 8px; }
.a11y-schrift output { min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 600; }
.a11y-panel .tool-btn, [data-theme="hell"] .a11y-panel .tool-btn { color: var(--blau); border-color: var(--linie); background: #fff; }
.a11y-panel .tool-btn:hover:not(:disabled) { border-color: var(--blau); color: var(--blau); }
html[data-kontrast="hoch"] .a11y-schrift { background: #fff; border: 2px solid #000; color: #000; }
html[data-kontrast="hoch"] .a11y-panel .tool-btn { color: #000; border: 2px solid #000; background: #fff; }
html[data-kontrast="hoch"] .a11y-schrift output { color: #000; }

@media (max-width: 700px) {
  .site-header .container > .wortmarke { padding-right: 112px; }
  .site-header .tools { position: absolute; top: -66px; right: 0; }
  .site-header .wortmarke .wm-name { font-size: 24px; }
}
@media (max-width: 700px) {
  .a11y-panel { position: fixed; top: 76px; left: 16px; right: 16px; width: auto; max-width: none; max-height: calc(100vh - 92px); overflow-y: auto; }
}
.a11y-panel { width: min(23rem, calc(100vw - 32px)); }
.a11y-schrift { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 700px) {
  .site-header .container > .wortmarke { padding-right: 0; }
  .site-header .wortmarke .wm-name { font-size: clamp(17px, 5.8vw, 24px); }
}
p a, address a, .kontakt-daten a, .ls a { overflow-wrap: anywhere; }
.marke-ph .ph-link { flex-wrap: wrap; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .marke-ph, .marke-platzhalter { padding: 28px; }
  .karte, .standort, .formular { padding: 24px; }
}
@media (max-width: 480px) { p, li { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 14 6 6; overflow-wrap: break-word; } }