/* ==========================================================================
   Feldmann Stiftung Demenzhilfe – base stylesheet (Version 1)
   --------------------------------------------------------------------------
   HOW TO CHANGE THINGS
   All editable values are in section 1 ("Settings"). Change them there only.
   Sizes are written as plain numbers = pixels on a laptop (1440 px wide).
   Smartphones, tablets and large screens scale automatically.
   ========================================================================== */


/* ==========================================================================
   1. SETTINGS  (CI values of this client)
   ========================================================================== */
:root {
  /* --- Colors ---------------------------------------------------------- */
  --color-primary:        #7FCF44;  /* buttons (main green)                */
  --color-primary-hover:  #0A7639;  /* button hover (dark green)           */
  --color-on-primary:     #FFFFFF;  /* text on buttons                     */
  --color-page-bg:        #FFFFFF;  /* page background                     */
  --color-light-bg:       #EFEFEF;  /* light grey sections                 */
  --color-dark-bg:        #223035;  /* footer background                   */
  --color-heading:        #20282D;  /* headings (measured on live site)    */
  --color-text:           #263037;  /* normal text (measured)              */
  --color-text-strong:    #000000;  /* text in editor blocks (measured)    */
  --color-nav:            #000000;  /* menu items                          */
  --color-nav-active:     #223035;  /* active menu item                    */
  --color-footer-heading: #85979B;  /* footer headings, copyright          */
  --color-footer-text:    #FFFFFF;  /* footer text                         */
  --color-on-image:       #FFFFFF;  /* text on photos (slider, hero)       */

  /* --- Fonts ----------------------------------------------------------- */
  --font-heading: "DM Sans", Arial, sans-serif;   /* headings, menu, buttons */
  --font-editor:  "Roboto", Arial, sans-serif;    /* Elementor text blocks   */
  --font-theme:   "Heebo", Arial, sans-serif;     /* theme text (default)    */
  --font-lead-alt: Arial, Helvetica, sans-serif;  /* lead texts that look like Arial */

  /* --- Font sizes (laptop px) ------------------------------------------ */
  --fs-h1-slider: 47;
  --fs-h1:        56;
  --fs-h2:        36;
  --fs-h3:        28;
  --fs-h4:        28;
  --fs-h5:        22;
  --fs-lead:      30;   /* large intro text   */
  --fs-text:      20;   /* theme text (Heebo) */
  --fs-editor:    18;   /* editor text (Roboto) */
  --fs-nav:       16;
  --fs-button:    15;
  --fs-button-lg: 18;   /* header button */
  --fs-small:     15;   /* footer text   */
  --fs-tiny:      13;   /* copyright     */
  --fs-tag:       14;   /* slider tags / numbers */

  /* --- Spacing (laptop px) --------------------------------------------- */
  --space-section:     120;   /* top/bottom padding of normal sections */
  --space-section-lg:  150;
  --page-gutter:       150;   /* side space of content (1440 - 1140) / 2 */
  --header-gutter:     42;
  --footer-gutter:     82;

  /* --- Content widths (laptop px) -------------------------------------- */
  --width-content: 1140;  /* normal content width   */
  --width-narrow:  969;   /* narrow text width      */

  /* --- Header ---------------------------------------------------------- */
  --header-height:        120;
  --header-height-sticky: 70;
  --logo-height:          90;

  /* --- Shapes ---------------------------------------------------------- */
  --radius-pill: 999px;
  --transition:  .3s ease;
}


/* ==========================================================================
   2. AUTOMATIC SCALING  (no need to change)
   --u  = scale for headings and spacing   (1px on a 1440 px laptop)
   --t  = scale for normal text            (shrinks less on phones)
   ========================================================================== */
:root {
  --a11y-text: 1;
  --a11y-ui: 1;
  --u: calc(clamp(0.6px, calc(0.5px + 0.03472vw), 1.25px) * var(--a11y-ui));
  --t: calc(clamp(0.82px, calc(0.75px + 0.01736vw), 1.15px) * var(--a11y-text));
}


/* ==========================================================================
   3. FONTS  (files are in assets/fonts – no Google connection)
   ========================================================================== */
@font-face { font-family: "DM Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("../assets/fonts/dm-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/dm-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto";  font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto";  font-weight: 400; font-style: italic; font-display: swap; src: url("../assets/fonts/roboto-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Roboto";  font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/roboto-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Heebo";   font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/heebo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Heebo";   font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/heebo-latin-700-normal.woff2") format("woff2"); }


/* ==========================================================================
   4. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-page-bg);
  color: var(--color-text);
  font-family: var(--font-theme);
  font-size: calc(var(--fs-text) * var(--t));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-heading);
}
h1 { font-size: calc(var(--fs-h1) * var(--u)); line-height: 1.18; }
h2 { font-size: calc(var(--fs-h2) * var(--u)); line-height: 1.24; }
h3 { font-size: calc(var(--fs-h3) * var(--u)); line-height: 1.31; }
h4 { font-size: calc(var(--fs-h4) * var(--u)); line-height: 1.4; }
h5 { font-size: calc(var(--fs-h5) * var(--u)); line-height: 1.5; font-weight: 500; }
p { margin: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}


/* ==========================================================================
   5. LAYOUT HELPERS
   section       = full screen width (background runs to the edges)
   .inner        = content, normal width, always with side space
   .inner--narrow= narrow content
   ========================================================================== */
.section { position: relative; width: 100%; }
.section--light { background: var(--color-light-bg); }
.section--dark  { background: var(--color-dark-bg); }
.inner {
  width: 100%;
  max-width: calc((var(--width-content) * var(--u)) + 2 * var(--page-gutter) * var(--u));
  margin: 0 auto;
  padding-left:  calc(var(--page-gutter) * var(--u));
  padding-right: calc(var(--page-gutter) * var(--u));
}
.inner--narrow > * { max-width: calc(var(--width-narrow) * var(--u)); }
.inner--full { max-width: none; padding-left: 0; padding-right: 0; }
.pad-y    { padding-top: calc(var(--space-section) * var(--u)); padding-bottom: calc(var(--space-section) * var(--u)); }

/* Editor text (Elementor text blocks, Roboto) */
.editor-text {
  font-family: var(--font-editor);
  font-size: calc(var(--fs-editor) * var(--t));
  line-height: 1.5;
  color: var(--color-text-strong);
}
.editor-text p { margin: 10px 0; }
.editor-text ul { margin: 0 0 0 calc(27 * var(--t)); padding: 0; list-style: disc; }
.editor-text h3 { margin: calc(25 * var(--u)) 0; }
.editor-text strong { font-weight: 700; }
.lead-text {
  font-family: var(--font-editor);
  font-size: calc(var(--fs-lead) * var(--t));
  line-height: 1.4;
  color: var(--color-text-strong);
}
.lead-text p { margin: 10px 0; }


/* ==========================================================================
   6. BUTTON  (pill with arrow ↗)
   ========================================================================== */
.button {
  display: inline-flex; align-items: center; gap: calc(9 * var(--u));
  padding: calc(6 * var(--u)) calc(33 * var(--u)) calc(7 * var(--u));
  min-height: calc(45 * var(--u));
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-heading);
  font-size: calc(var(--fs-button) * var(--t));
  font-weight: 400;
  line-height: 2;
  transition: background-color var(--transition);
}
.button:hover, .button:focus-visible { background: var(--color-primary-hover); }
.button--large { font-size: calc(var(--fs-button-lg) * var(--t)); font-weight: 500; min-height: calc(51 * var(--u)); }
.icon-arrow { width: .62em; height: .62em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.2; }
.button:hover .icon-arrow { transform: translate(2px, -2px); transition: transform var(--transition); }


/* ==========================================================================
   7. BLOCK: site-header
   ========================================================================== */
.site-header {
  position: relative; z-index: 100;
  background: var(--color-page-bg);
  height: calc(var(--header-height) * var(--u));
}
.site-header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--header-gutter) * var(--u));
}
.site-header__logo img { height: calc(var(--logo-height) * var(--u)); width: auto; }
.site-header__right { display: flex; align-items: center; height: 100%; }
.main-nav { height: 100%; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; }
.main-nav li { height: 100%; }
.main-nav a {
  display: flex; align-items: center; height: 100%;
  padding: 0 calc(18 * var(--u));
  font-family: var(--font-heading); font-size: calc(var(--fs-nav) * var(--t)); font-weight: 600;
  color: var(--color-nav);
}
.main-nav a span { position: relative; }
.main-nav a span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--transition);
}
.main-nav a:hover span::after,
.main-nav a[aria-current="page"] span::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: var(--color-nav-active); }
.site-header .button { margin-left: calc(14 * var(--u)); }
.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: calc(8 * var(--u)); margin-left: calc(16 * var(--u));
  color: var(--color-heading); cursor: pointer;
}
.icon-search { width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.3; }
.menu-toggle { display: none; }
.icon-menu { width: 26px; height: 18px; stroke: currentColor; stroke-width: 1.6; }

/* compact sticky header (appears when scrolling down) */
.site-header--sticky {
  position: fixed; top: 0; left: 0; right: 0;
  height: calc(var(--header-height-sticky) * var(--u));
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  transform: translateY(-100%); transition: transform .35s ease;
}
.site-header--sticky.is-visible { transform: translateY(0); }
.site-header--sticky .site-header__logo img { height: calc(var(--header-height-sticky) * var(--u)); }

/* mobile menu panel */
.mobile-nav {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: var(--color-page-bg);
  padding: calc(110 * var(--u)) calc(var(--header-gutter) * var(--u)) 40px;
  overflow-y: auto;
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav a {
  display: block; padding: 12px 0;
  font-family: var(--font-heading); font-size: calc(22 * var(--t)); font-weight: 600; color: var(--color-nav);
  border-bottom: 1px solid #e3e3e3;
}
.mobile-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.mobile-nav__close { position: absolute; top: 24px; right: calc(var(--header-gutter) * var(--u)); font-size: 34px; line-height: 1; }


/* ==========================================================================
   8. BLOCK: hero-slider
   ========================================================================== */
.hero-slider {
  position: relative; overflow: hidden;
  height: calc(100vh - var(--header-height) * var(--u));
  min-height: 520px;
  background: var(--color-dark-bg);
  color: var(--color-on-image);
}
.hero-slider__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 1s;
}
.hero-slider__slide.is-active { opacity: 1; visibility: visible; }
.hero-slider__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-slider__slide-link { position: absolute; inset: 0; z-index: 1; }
.hero-slider__content {
  position: absolute; z-index: 2;
  left: calc(80 * var(--u)); top: calc(147 * var(--u));
  width: min(calc(640 * var(--u)), calc(100% - 2 * 80 * var(--u)));
  pointer-events: none;
}
.hero-slider__title {
  color: var(--color-on-image);
  font-size: calc(var(--fs-h1-slider) * var(--u)); line-height: 1.18;
}
.hero-slider__arrow {
  display: inline-block; margin-top: calc(55 * var(--u)); pointer-events: auto; color: var(--color-on-image);
}
.hero-slider__arrow svg { width: calc(42 * var(--u)); height: calc(42 * var(--u)); fill: none; stroke: currentColor; stroke-width: .35; overflow: visible; transition: transform var(--transition); }
.hero-slider__arrow:hover svg { transform: translate(4px, -4px); }
.hero-slider__bottom {
  position: absolute; z-index: 3;
  left: calc(80 * var(--u)); bottom: calc(40 * var(--u));
  width: min(calc(800 * var(--u)), calc(100% - 2 * 80 * var(--u)));
  font-family: var(--font-heading);
}
.hero-slider__number { font-size: calc(var(--fs-tag) * var(--t)); line-height: 2.3; }
.hero-slider__progress { position: relative; height: 1px; background: rgba(255,255,255,.35); margin-top: calc(6 * var(--u)); }
.hero-slider__progress span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--color-on-image); }
.hero-slider__progress span.is-running { animation: slider-progress var(--slide-duration, 5000ms) linear forwards; }
@keyframes slider-progress { from { width: 0; } to { width: 100%; } }
.hero-slider__data { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-top: calc(12 * var(--u)); }
.hero-slider__tags { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); }
.hero-slider__tag {
  display: inline-block; padding: 0 calc(14 * var(--u));
  border: 1px solid var(--color-on-image); border-radius: 70px;
  font-size: calc(var(--fs-tag) * var(--t)); line-height: calc(25 * var(--u));
  white-space: nowrap;
}
.hero-slider__label { width: calc(264 * var(--u)); font-size: calc(18 * var(--t)); line-height: 1.75; }


/* Variants of the slider height (add the class to <section class="hero-slider …">):
   --behind-header : slider fills the whole screen and starts behind the header
                     (like the live site: the header covers the top of the image)
   --80            : slider is 80 % of the screen height, below the header       */
.hero-slider--behind-header {
  height: 100vh;
  margin-top: calc(-1 * var(--header-height) * var(--u));
}
.hero-slider--behind-header .hero-slider__content { top: calc(267 * var(--u)); }
.hero-slider--80 { height: 80vh; }

/* ==========================================================================
   9. BLOCK: text-cta  (large text + one button)
   ========================================================================== */
.text-cta .button { margin: calc(24 * var(--u)) 0 calc(24 * var(--u)); }


/* ==========================================================================
   10. BLOCK: image-text  (50/50, image column = background slideshow)
   ========================================================================== */
.image-text { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.image-text__media {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
}
.slideshow { position: absolute; inset: 0; }
.slideshow img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  opacity: 0; transition: opacity .5s ease;
}
.slideshow img.is-active { opacity: 1; }
.image-text__content {
  padding: calc(105 * var(--u)) calc(123 * var(--u)) calc(90 * var(--u)) calc(122 * var(--u));
}
.image-text__content h2 { padding: calc(24 * var(--u)) 0; margin-bottom: 10px; }
.image-text__content .editor-text { margin-bottom: calc(22 * var(--u)); }
.image-text__content .button { margin: 0 0 calc(34 * var(--u)); }


/* ==========================================================================
   11. BLOCK: contact-card  (2 columns: heading + text | logo + contact)
   ========================================================================== */
.contact-card { padding-top: calc(150 * var(--u)); padding-bottom: calc(140 * var(--u)); }
.contact-card__grid { display: grid; grid-template-columns: 1fr 1fr; }
.contact-card__left { padding-right: calc(72 * var(--u)); }
.contact-card__left h2 { margin-bottom: calc(20 * var(--u)); }
.contact-card__left p { margin-top: calc(25 * var(--u)); }
.contact-card__right { padding-left: calc(32 * var(--u)); }
.contact-card__logo { width: calc(500 * var(--u)); margin-bottom: calc(32 * var(--u)); }
.contact-card__right h4 { margin: calc(12 * var(--u)) 0; }


/* ==========================================================================
   12. BLOCK: footer
   ========================================================================== */
.site-footer { background: var(--color-dark-bg); color: var(--color-footer-text); }
.site-footer__top { padding: calc(91 * var(--u)) calc(var(--footer-gutter) * var(--u)) calc(10 * var(--u)); }
.site-footer__logo { width: calc(474 * var(--u)); }
.site-footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; column-gap: calc(30 * var(--u));
  padding: 0 calc(var(--footer-gutter) * var(--u));
}
.site-footer__bottom { padding-bottom: calc(90 * var(--u)); }
.site-footer h5 { color: var(--color-footer-heading); margin-bottom: calc(16 * var(--u)); }
.site-footer p, .site-footer li {
  font-size: calc(var(--fs-small) * var(--t)); line-height: 2.13; color: var(--color-footer-text);
}
.site-footer p { margin-top: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { font-family: var(--font-heading); }
.site-footer li a:hover { text-decoration: underline; }
.site-footer__copyright { padding-top: calc(25 * var(--u)); padding-bottom: calc(46 * var(--u)); }
.site-footer__copyright p { font-size: calc(var(--fs-tiny) * var(--t)); color: var(--color-footer-heading); }


/* ==========================================================================
   13. BLOCK: back-to-top
   ========================================================================== */
.back-to-top {
  position: fixed; right: calc(25 * var(--u)); bottom: calc(25 * var(--u)); z-index: 90;
  width: 40px; height: 60px; display: flex; align-items: center; justify-content: center;
  color: var(--color-dark-bg);
  opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1; transform: rotate(90deg); }
.back-to-top:hover svg { transform: rotate(90deg) translateX(-3px); transition: transform var(--transition); }


/* ==========================================================================
   13b. INNER PAGES
   ========================================================================== */
/* Space between header and the first block on pages without a photo */
.page-top { padding-top: calc(48 * var(--u)); }

/* Large lead text in black Roboto (Elementor text block) */
.lead-text--small { font-size: calc(24 * var(--t)); line-height: 1.75; }


/* ==========================================================================
   15. BLOCK: page-hero  (full-width photo, white centered H1)
   Starts behind the header, like the live site.
   ========================================================================== */
.page-hero {
  position: relative; overflow: hidden;
  height: calc(635 * var(--u));
  margin-top: calc(-1 * var(--header-height) * var(--u));
  background: var(--color-page-bg);
}
.page-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.page-hero__image--top { object-position: 50% 0%; }
.page-hero__title {
  position: relative; z-index: 1;
  padding: calc(305 * var(--u)) calc(var(--page-gutter) * var(--u)) 0;
  text-align: center; color: var(--color-on-image);
  font-size: calc(var(--fs-h1-slider) * var(--u)); line-height: 1.18;
}
/* --no-image: live site shows this hero without a photo (white title on white) */
.page-hero--no-image { background: var(--color-page-bg); }


/* ==========================================================================
   16. BLOCK: text-person  (text + fact-list left, person-card right)
   ========================================================================== */
.text-person { padding: calc(120 * var(--u)) 0 calc(90 * var(--u)); }
.text-person__grid { display: grid; grid-template-columns: 752fr 388fr; }
.text-person__text { padding-right: calc(75 * var(--u)); }
.text-person__text .lead-text p { margin: 10px 0; }
.text-person__text > * + * { margin-top: 20px; }

/* fact-list: short label/value lines */
.fact-list { font-family: var(--font-editor); font-size: calc(24 * var(--t)); line-height: 1.75; color: var(--color-text-strong); }
.fact-list p { margin: 10px 0; }

/* person-card: photo + caption */
.person-card { margin: 0; }
.person-card img { width: 100%; height: auto; }
.person-card figcaption, .person-card__name {
  font-family: var(--font-editor); font-size: calc(18 * var(--t)); line-height: 2.33; color: var(--color-text-strong);
  margin: 10px 0;
}


/* ==========================================================================
   17. BLOCK: divider
   ========================================================================== */
.divider { max-width: calc(1090 * var(--u)); margin: 0 auto; padding: calc(25 * var(--u)) calc(20 * var(--u)); }
.divider hr { border: 0; border-top: 1px solid #000; margin: 0; }


/* ==========================================================================
   18. BLOCK: accordion  (numbered 01, 02 …, one open at a time)
   ========================================================================== */
.accordion-section { max-width: calc(1100 * var(--u)); margin: 0 auto; padding: calc(30 * var(--u)) calc(80 * var(--u)) calc(140 * var(--u)); }
.accordion-section--small-bottom { padding-bottom: calc(80 * var(--u)); }
.accordion { counter-reset: acc; }
.accordion__item + .accordion__item .accordion__title { border-top: 1px solid var(--color-heading); }
.accordion__title { margin: 0; font-size: calc(var(--fs-h3) * var(--u)); line-height: 1.31; }
.accordion__button {
  position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: calc(21 * var(--u)) 0; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: var(--color-heading);
}
.accordion__item.is-open .accordion__button { padding-bottom: calc(14 * var(--u)); }
.accordion__label { position: relative; padding-left: calc(33 * var(--u)); }
.accordion__label::before {
  counter-increment: acc; content: counter(acc, decimal-leading-zero);
  position: absolute; left: 0; top: .66em;
  font-size: calc(15 * var(--t)); font-weight: 500; line-height: 1;
}
.accordion__icon { width: calc(16 * var(--u)); height: calc(16 * var(--u)); flex: none; margin-left: 20px; transition: transform var(--transition); }
.accordion__item.is-open .accordion__icon { transform: rotate(180deg); }
.accordion__panel { display: none; padding: 0 calc(33 * var(--u)) calc(40 * var(--u)); }
.accordion__item.is-open .accordion__panel { display: block; }
.accordion__panel p { margin: 0; }
.accordion__panel ul { margin: 0 0 30px; padding: 0; list-style: disc inside; }


/* ==========================================================================
   19. BLOCK: logo-grid
   ========================================================================== */
.logo-grid__heading { padding-bottom: calc(40 * var(--u)); }
.logo-grid__heading h2 { margin: 25px 0; }
.logo-grid { max-width: calc(1090 * var(--u)); margin: 0 auto calc(0 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; padding-bottom: calc(48 * var(--u)); }  /* space under the logos (user, 2026-10-07) */
.logo-grid a { display: block; justify-self: center; }
.logo-grid img { width: calc(300 * var(--u)); height: auto; }


/* ==========================================================================
   20. BLOCK: contact-person  (H1 + text + phone + e-mail | portrait + name + role)
   ========================================================================== */
.contact-person { max-width: calc(1100 * var(--u)); margin: 0 auto; padding-bottom: calc(70 * var(--u)); display: grid; grid-template-columns: 737fr 363fr; }
.contact-person__text { padding-right: calc(111 * var(--u)); }
.contact-person__text h1 { font-size: calc(var(--fs-h1-slider) * var(--u)); margin-bottom: calc(29 * var(--u)); }
.contact-person__text .lead-text p { margin: 10px 0; }
.contact-person__phone { margin-top: calc(25 * var(--u)) !important; }
.contact-person__mail { font-size: calc(24 * var(--t)); }
.contact-person__mail a { color: var(--color-heading); }
.contact-person__mail a:hover { text-decoration: underline; }
.contact-person__card { padding: calc(40 * var(--u)) calc(32 * var(--u)) 0; }
.contact-person__card img { width: 100%; height: auto; }
.contact-person__name { font-family: var(--font-editor); font-size: calc(24 * var(--t)); line-height: 1; color: var(--color-text-strong); margin: calc(42 * var(--u)) 0 10px; }
.contact-person__role { font-family: var(--font-editor); font-size: calc(16 * var(--t)); line-height: 1.19; color: var(--color-text-strong); margin: 20px 0 10px; }


/* ==========================================================================
   21. BLOCK: page-intro  (large H2 lead under the hero)
   ========================================================================== */
.page-intro { max-width: calc(1100 * var(--u)); margin: 0 auto; padding: calc(120 * var(--u)) calc(80 * var(--u)) calc(70 * var(--u)); }
.page-intro h2 { padding-right: calc(141 * var(--u)); }


/* ==========================================================================
   22. BLOCK: link-cards  (heading + text | 2 cards with title + button)
   ========================================================================== */
.link-cards { padding: calc(150 * var(--u)) calc(80 * var(--u)); }
.link-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.link-cards__intro { padding-right: calc(64 * var(--u)); }
.link-cards__intro h2 { margin: 8px 0 30px; }
.link-cards__card { padding: calc(23 * var(--u)) calc(85 * var(--u)) calc(31 * var(--u)) calc(32 * var(--u)); }
.link-cards__card h4 { color: var(--color-on-image); margin-top: calc(48 * var(--u)); }
.link-cards__card .button { margin-top: calc(44 * var(--u)); background: var(--color-primary-hover); }
.link-cards__card .button:hover { background: var(--color-primary); }


/* ==========================================================================
   23. BLOCK: icon-list  (Impressum: icon + line)
   ========================================================================== */
.legal { max-width: calc(950 * var(--u)); margin: 0 auto; padding: calc(30 * var(--u)) 0 calc(175 * var(--u)); }
.legal h1 { font-size: calc(var(--fs-h1-slider) * var(--u)); margin: calc(24 * var(--u)) 0 calc(10 * var(--u)); }
.legal h2 { margin: calc(34 * var(--u)) 0 calc(10 * var(--u)); }
.legal h3 { margin-top: calc(34 * var(--u)); }
.legal h3 + p { margin-top: calc(25 * var(--u)); }
.icon-list { list-style: none; margin: calc(24 * var(--u)) 0 calc(10 * var(--u)); padding: 0; }
.icon-list li { display: flex; align-items: center; min-height: calc(29 * var(--u)); }
.icon-list li + li { margin-top: calc(15 * var(--u)); }
.icon-list svg { width: calc(16 * var(--u)); height: calc(18 * var(--u)); flex: none; margin-right: calc(11 * var(--u)); fill: none; stroke: var(--color-text); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.icon-list span { font-family: var(--font-heading); font-size: calc(18 * var(--t)); font-weight: 500; line-height: 1.6; color: var(--color-heading); }

/* legal-text: long text (Datenschutz) in black Roboto */
.legal-text { font-family: var(--font-editor); font-size: calc(var(--fs-text) * var(--t)); line-height: 1.6; color: var(--color-text-strong); }
.legal-text p { margin: 10px 0; }
.legal .legal-text__title { font-family: var(--font-editor); font-weight: 400; color: var(--color-text-strong); font-size: calc(56 * var(--t)); line-height: .57; margin: calc(40 * var(--u)) 0 calc(30 * var(--u)); }


/* ==========================================================================
   25. BLOCK: search  (bar over the header + results page)
   ========================================================================== */
.search-cover {
  position: absolute; inset: 0; z-index: 5;
  display: none; align-items: center; gap: calc(10 * var(--u));
  padding: 0 calc(var(--header-gutter) * var(--u)) 0 calc(52 * var(--u));
  background: #CCCCCC;   /* live site: 20 % black over the white header */
}
.site-header.is-search-open .search-cover { display: flex; }
.search-cover__input {
  width: calc(381 * var(--u)); max-width: 60vw; height: calc(33 * var(--u));
  border: 0; border-bottom: 1px solid rgba(255,255,255,.7); background: transparent; outline: none;
  font-family: var(--font-theme); font-size: calc(15 * var(--t)); color: #fff;
}
.search-cover__input::placeholder { color: rgba(255,255,255,.9); }
.search-cover__submit, .search-cover__close { background: none; border: 0; padding: 4px; cursor: pointer; color: #fff; display: inline-flex; }
.search-cover__close { margin-left: auto; }
.search-cover__close svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.3; }
.search-cover .icon-search { stroke: #fff; }

.search-page h1 { font-size: calc(var(--fs-h1-slider) * var(--u)); margin-bottom: calc(30 * var(--u)); }
.search-form { display: flex; gap: calc(12 * var(--u)); align-items: center; flex-wrap: wrap; margin-bottom: calc(40 * var(--u)); }
.search-form input {
  flex: 1 1 calc(400 * var(--u)); max-width: calc(600 * var(--u)); min-height: calc(51 * var(--u));
  padding: 0 calc(20 * var(--u)); border: 1px solid #c9cfd1; border-radius: var(--radius-pill);
  font-family: var(--font-theme); font-size: calc(18 * var(--t)); color: var(--color-text);
}
.search-form input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.search-form .button { border: 0; cursor: pointer; }
.search-count { font-family: var(--font-heading); color: var(--color-heading); margin-bottom: calc(20 * var(--u)); }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results li { padding: calc(24 * var(--u)) 0; border-top: 1px solid #d7dcdd; }
.search-results h3 a:hover { color: var(--color-primary-hover); }
.search-results p { margin-top: 8px; }
.search-results mark { background: rgba(127, 207, 68, .35); color: inherit; padding: 0 2px; }


/* ==========================================================================
   26. BLOCK: error-page  (404 – page not found, with links into the site)
   ========================================================================== */
.error-page { padding-bottom: calc(120 * var(--u)); }
.error-page h1 { font-size: calc(var(--fs-h1-slider) * var(--u)); margin-bottom: calc(20 * var(--u)); }
.error-page__code { font-family: var(--font-heading); font-size: calc(15 * var(--t)); font-weight: 500; color: var(--color-primary-hover); letter-spacing: .08em; margin-bottom: 8px; }
.error-page .lead-text { max-width: calc(800 * var(--u)); }
.link-grid { list-style: none; margin: calc(40 * var(--u)) 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(20 * var(--u)); }
.link-grid a {
  display: flex; flex-direction: column; justify-content: space-between; height: 100%;
  min-height: calc(150 * var(--u)); padding: calc(24 * var(--u)) calc(28 * var(--u));
  background: var(--color-light-bg); border-radius: calc(8 * var(--u));
  transition: background-color var(--transition), color var(--transition);
}
.link-grid strong { font-family: var(--font-heading); font-weight: 400; font-size: calc(26 * var(--u)); line-height: 1.25; color: var(--color-heading); }
.link-grid span { margin-top: 10px; font-size: calc(17 * var(--t)); line-height: 1.5; }
.link-grid .icon-arrow { width: 14px; height: 14px; margin-top: 16px; stroke: var(--color-primary-hover); }
.link-grid a:hover, .link-grid a:focus-visible { background: var(--color-primary); }
.link-grid a:hover strong, .link-grid a:hover span, .link-grid a:hover .icon-arrow { color: #fff; stroke: #fff; }
.error-page__help { margin-top: calc(10 * var(--u)); }
.error-page__help a { color: var(--color-primary-hover); text-decoration: underline; }


/* ==========================================================================
   27. BLOCK: request-navigator  (Version 2 – Förderanfrage in 4 steps)
   Step 1–3 = questions (big tap areas), step 4 = result + contact + form.
   Without JavaScript all steps are shown below each other.
   ========================================================================== */
.request-nav { max-width: calc(1100 * var(--u)); margin: 0 auto; padding-bottom: calc(110 * var(--u)); }
.request-nav__intro h1 { font-size: calc(var(--fs-h1-slider) * var(--u)); margin-bottom: calc(20 * var(--u)); }
.request-nav__intro .lead-text { max-width: calc(900 * var(--u)); }
.request-nav__direct { margin-top: calc(14 * var(--u)); font-family: var(--font-editor); font-size: calc(var(--fs-editor) * var(--t)); color: var(--color-text-strong); }
.request-nav a:not(.button) { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 3px; }
.request-nav__notice { margin: calc(30 * var(--u)) 0 0; padding: 16px 20px; border-left: 5px solid var(--color-primary-hover); background: var(--color-light-bg); font-family: var(--font-editor); font-size: calc(var(--fs-editor) * var(--t)); color: var(--color-text-strong); }
.request-nav__notice--error { border-left-color: #B3261E; }

/* progress */
.request-nav__progress { margin: calc(50 * var(--u)) 0 calc(10 * var(--u)); }
.request-nav__progress-text { font-family: var(--font-heading); font-size: calc(var(--fs-tag) * var(--t)); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary-hover); margin-bottom: 10px; }
.request-nav__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.request-nav__steps li { padding-top: 10px; border-top: 4px solid #d7dcdd; font-family: var(--font-heading); font-size: calc(15 * var(--t)); color: var(--color-text); }
.request-nav__steps li.is-done, .request-nav__steps li.is-current { border-top-color: var(--color-primary-hover); }
.request-nav__steps li.is-current { color: var(--color-heading); font-weight: 600; }

/* steps */
.request-nav [hidden] { display: none !important; }   /* hidden always wins */
.request-nav__form { margin: 0; }
.request-nav__step { margin: calc(50 * var(--u)) 0 0; padding: 0; border: 0; min-width: 0; }
.request-nav__step legend { padding: 0; margin-bottom: calc(14 * var(--u)); }
.request-nav__step h2 { font-size: calc(var(--fs-h3) * var(--u)); outline-offset: 6px; }
.js-request-nav .request-nav__step:not(.is-active) { display: none; }
.request-nav__hint { font-family: var(--font-editor); font-size: calc(16 * var(--t)); color: var(--color-text); margin: 0 0 12px; }
.request-nav__group { font-family: var(--font-heading); font-weight: 500; font-size: calc(var(--fs-h5) * var(--u)); color: var(--color-heading); margin: calc(26 * var(--u)) 0 12px; }
.request-nav__error { margin: 0 0 14px; padding: 10px 14px; border-left: 5px solid #B3261E; background: #FCEEEE; color: #8C1D18; font-family: var(--font-editor); font-size: calc(17 * var(--t)); }

/* answer cards (the real radio / checkbox stays visible) */
.request-nav__options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.request-nav__option {
  display: flex; align-items: flex-start; gap: 14px; min-height: 64px;
  padding: 18px 20px; border: 2px solid #d7dcdd; border-radius: 10px; background: var(--color-page-bg);
  font-family: var(--font-editor); font-size: calc(var(--fs-editor) * var(--t)); line-height: 1.4; color: var(--color-text-strong);
  cursor: pointer; transition: border-color var(--transition), background-color var(--transition);
}
.request-nav__option:hover { border-color: var(--color-primary); }
.request-nav__option:has(input:checked) { border-color: var(--color-primary-hover); background: var(--color-light-bg); }
.request-nav__option input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--color-primary-hover); }
.request-nav__option small { display: block; margin-top: 4px; font-size: .85em; color: var(--color-text); }

/* result */
.request-nav__urgent { margin: 0 0 20px; padding: 16px 20px; background: var(--color-light-bg); border-left: 5px solid var(--color-primary-hover); font-family: var(--font-editor); font-size: calc(var(--fs-editor) * var(--t)); color: var(--color-text-strong); }
.request-nav__matches { list-style: none; margin: calc(20 * var(--u)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.request-nav__matches li { padding: calc(24 * var(--u)) calc(28 * var(--u)); background: var(--color-light-bg); border-radius: 10px; }
.request-nav__matches h3 { font-size: calc(24 * var(--u)); margin-bottom: 8px; }
.request-nav__matches p, .request-nav__more { font-family: var(--font-editor); font-size: calc(var(--fs-editor) * var(--t)); line-height: 1.5; color: var(--color-text-strong); }
.js-request-nav .request-nav__matches li:not(.is-match) { display: none; }
.request-nav__more { margin-top: 16px; }

.request-nav__contact { margin-top: calc(60 * var(--u)); display: grid; grid-template-columns: 340fr 760fr; gap: calc(60 * var(--u)); align-items: start; }
.request-nav__person img { width: 100%; max-width: 300px; height: auto; }
.request-nav__person p { font-family: var(--font-editor); font-size: calc(var(--fs-editor) * var(--t)); color: var(--color-text-strong); margin-top: 10px; }
.request-nav__person-name { font-size: calc(24 * var(--t)) !important; margin-top: 20px !important; }
.request-nav__person-role { font-size: calc(16 * var(--t)) !important; }
.request-nav__send h3 { font-size: calc(var(--fs-h3) * var(--u)); margin-bottom: 12px; }
.request-nav__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; margin: 10px 0 24px; }
.request-nav__fields > p:first-child, .request-nav__wide, .request-nav__fields > .request-nav__hint { grid-column: 1 / -1; }
.request-nav__fields label { display: block; margin: 10px 0 6px; font-family: var(--font-heading); font-size: calc(16 * var(--t)); font-weight: 500; color: var(--color-heading); }
.request-nav__fields input[type="text"], .request-nav__fields input[type="tel"], .request-nav__fields input[type="email"], .request-nav__fields textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid #8A9799; border-radius: 6px;
  background: var(--color-page-bg); color: var(--color-text-strong); font-family: var(--font-editor); font-size: calc(17 * var(--t));
}
.request-nav__fields textarea { min-height: 120px; resize: vertical; }
.request-nav__fields [aria-invalid="true"] { border-color: #B3261E; }
.request-nav__consent label { display: flex; gap: 12px; align-items: flex-start; font-family: var(--font-editor); font-weight: 400; font-size: calc(16 * var(--t)); color: var(--color-text-strong); }
.request-nav__consent input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--color-primary-hover); }
.request-nav__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.request-nav button.button { border: 0; cursor: pointer; }

/* back / next */
.request-nav__nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: calc(40 * var(--u)); padding-top: calc(24 * var(--u)); border-top: 1px solid #d7dcdd; }
.request-nav__nav[data-only-next] { justify-content: flex-end; }
.request-nav__back {
  min-height: 45px; padding: 6px 26px; border: 2px solid var(--color-heading); border-radius: var(--radius-pill);
  background: transparent; color: var(--color-heading); font-family: var(--font-heading); font-size: calc(var(--fs-button) * var(--t)); cursor: pointer;
}
.request-nav__back:hover { background: var(--color-light-bg); }
.request-nav__back[hidden] { display: none; }

html.a11y-contrast-light .request-nav__option, html.a11y-contrast-dark .request-nav__option,
html.a11y-contrast-light .request-nav__matches li, html.a11y-contrast-dark .request-nav__matches li { border: 2px solid currentColor; }
html.a11y-contrast-dark .request-nav__error { background: #000; color: #fff; }
html.a11y-contrast-dark .request-nav__fields input, html.a11y-contrast-dark .request-nav__fields textarea { border-color: #fff; }

@media (max-width: 900px) {
  .request-nav { padding-left: calc(var(--page-gutter) * var(--u)); padding-right: calc(var(--page-gutter) * var(--u)); }
  .request-nav__options, .request-nav__matches, .request-nav__contact, .request-nav__fields { grid-template-columns: 1fr; }
  .request-nav__person { display: flex; gap: 20px; align-items: center; }
  .request-nav__person img { width: 120px; }
  .request-nav__steps li { font-size: 0; border-top-width: 6px; }   /* phones: only the bar */
}
@media print { .request-nav__nav, .request-nav__progress { display: none !important; } .request-nav__step { display: block !important; } }


/* ==========================================================================
   24. LAYOUT CHANGES FOR SMALL SCREENS
   Only the arrangement changes (columns stack, menu becomes a button).
   Sizes keep scaling automatically from the laptop values.
   ========================================================================== */
@media (max-width: 1024px) {
  .main-nav, .site-header .button { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 900px) {
  :root { --page-gutter: 40; }
  .image-text, .contact-card__grid { grid-template-columns: 1fr; }
  .image-text__media { position: relative; height: 70vh; }
  .image-text__content { padding: calc(80 * var(--u)) calc(var(--page-gutter) * var(--u)); }
  .contact-card__left, .contact-card__right { padding: 0; }
  .contact-card__right { margin-top: calc(60 * var(--u)); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .site-footer__grid > :first-child,
  .site-footer__grid > div:empty { display: none; }
  .site-footer__logo { width: min(474px, 100%); }
  .hero-slider__data { flex-direction: column; }
  .hero-slider__label { width: auto; }
  .text-person__grid, .contact-person, .link-cards__grid { grid-template-columns: 1fr; }
  .text-person__text, .contact-person__text, .link-cards__intro { padding-right: 0; }
  .person-card { max-width: 420px; margin-top: 30px; }
  .contact-person { padding-left: calc(var(--page-gutter) * var(--u)); padding-right: calc(var(--page-gutter) * var(--u)); }
  .contact-person__card { padding: 30px 0 0; max-width: 420px; }
  .accordion-section, .page-intro, .link-cards { padding-left: calc(var(--page-gutter) * var(--u)); padding-right: calc(var(--page-gutter) * var(--u)); }
  .page-intro h2 { padding-right: 0; }
  .logo-grid { grid-template-columns: 1fr; row-gap: 20px; }
  .link-grid { grid-template-columns: 1fr 1fr; }
  .search-cover { padding-left: calc(var(--header-gutter) * var(--u)); }
  .legal { padding-left: calc(var(--page-gutter) * var(--u)); padding-right: calc(var(--page-gutter) * var(--u)); }
  .link-cards__card { padding-left: 0; padding-right: 0; }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .link-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}


/* ==========================================================================
   BLOCK: accessibility  (copied from 00-toolkit 2026-10-08; Barrierefreiheit – every website, rule 2026-10-08)
   Base (always on): skip link, visible focus frame, reduced motion.
   Accessibility menu (a11y-menu, script scripts/a11y.js): text size,
   contrast (light / dark), underline links, stop animations, more line
   spacing, readable font. Choice is remembered in the browser.
   The menu is an extra – the website itself must already meet WCAG 2.1 AA.
   ========================================================================== */

/* --- skip link (first element in <body>) ------------------------------- */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  padding: 12px 20px; background: #000; color: #fff;
  font-family: var(--font-heading); font-size: 16px; text-decoration: underline;
}
.skip-link:focus { top: 16px; }

/* --- visible focus frame on everything that can be used ------------------ */
:focus-visible { outline: 3px solid var(--color-focus, #1A5FB4); outline-offset: 3px; }
.button:focus-visible { outline-offset: 4px; }

/* --- long words never push the page sideways (zoom / larger text) ------- */
h1, h2, h3, h4, h5, h6, p, li, dd, dt, blockquote, figcaption, td, th { overflow-wrap: break-word; }

/* --- reduced motion (device setting or menu) ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* --- menu options ---------------------------------------------------------- */
html.a11y-links a:not(.button):not(.skip-link) { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-spacing body, html.a11y-spacing p, html.a11y-spacing li { line-height: 1.9 !important; letter-spacing: .02em; word-spacing: .08em; }
html.a11y-spacing p + p { margin-top: 1.2em; }
html.a11y-font { --font-heading: Verdana, Tahoma, Arial, sans-serif; --font-editor: Verdana, Tahoma, Arial, sans-serif; --font-theme: Verdana, Tahoma, Arial, sans-serif; --font-lead-alt: Verdana, Tahoma, Arial, sans-serif; }

/* contrast light: black on white, CI colors replaced */
html.a11y-contrast-light {
  --color-primary: #000; --color-primary-hover: #333; --color-on-primary: #fff;
  --color-page-bg: #fff; --color-light-bg: #fff; --color-dark-bg: #000;
  --color-heading: #000; --color-text: #000; --color-text-strong: #000;
  --color-nav: #000; --color-nav-active: #000; --color-muted: #000;
  --color-footer-heading: #fff; --color-footer-text: #fff; --color-border: #000;
  --color-tag-bg: #fff; --color-focus: #C00000;
  --article-bg-a: #fff; --article-bg-b: #fff; --article-box-border: #000;
}
/* contrast dark: yellow / white on black */
html.a11y-contrast-dark {
  --color-primary: #FFE600; --color-primary-hover: #fff; --color-on-primary: #000;
  --color-page-bg: #000; --color-light-bg: #000; --color-dark-bg: #000;
  --color-heading: #FFE600; --color-text: #fff; --color-text-strong: #fff;
  --color-nav: #fff; --color-nav-active: #FFE600; --color-muted: #fff;
  --color-footer-heading: #FFE600; --color-footer-text: #fff; --color-border: #fff;
  --color-tag-bg: #000; --color-focus: #00E5FF; --color-on-image: #fff;
  --article-bg-a: #000; --article-bg-b: #000; --article-box-border: #FFE600;
}
html.a11y-contrast-light body, html.a11y-contrast-dark body { background: var(--color-page-bg); color: var(--color-text); }
html.a11y-contrast-dark a:not(.button) { color: #FFE600; }
html.a11y-contrast-light .section, html.a11y-contrast-dark .section,
html.a11y-contrast-light [class*="bg-"], html.a11y-contrast-dark [class*="bg-"] { background-image: none !important; }
html.a11y-contrast-light .post-card__date, html.a11y-contrast-dark .post-card__date,
html.a11y-contrast-dark .tag-list a, html.a11y-contrast-light .tag-list a,
html.a11y-contrast-light .sidebar-search, html.a11y-contrast-dark .sidebar-search { border: 1px solid currentColor; }
/* text on photos keeps a dark plate in both contrast modes */
html.a11y-contrast-light .hero-slider__content, html.a11y-contrast-dark .hero-slider__content,
html.a11y-contrast-light .page-hero h1, html.a11y-contrast-dark .page-hero h1,
html.a11y-contrast-light .page-hero h2, html.a11y-contrast-dark .page-hero h2 { background: rgba(0,0,0,.85); color: #fff; padding: .2em .4em; }

/* --- the menu itself -------------------------------------------------------- */
.a11y-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 1px solid currentColor; border-radius: var(--radius-pill, 999px); background: transparent;
  color: inherit; font-family: var(--font-heading); font-size: 15px; cursor: pointer;
}
.a11y-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.a11y-toggle--floating {
  position: fixed; left: 16px; bottom: 16px; z-index: 900;
  background: #1A5FB4; color: #fff; border-color: #1A5FB4; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.a11y-panel {
  position: fixed; left: 16px; bottom: 76px; z-index: 950;
  width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow: auto;
  padding: 22px; background: #fff; color: #000; border: 2px solid #000; border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
  font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.4;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { margin: 0 0 14px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: 700; color: #000; }
.a11y-panel fieldset { margin: 0 0 14px; padding: 0; border: 0; }
.a11y-panel legend { margin-bottom: 6px; font-weight: 700; }
.a11y-panel .a11y-row { display: flex; gap: 6px; flex-wrap: wrap; }
.a11y-panel button {
  min-height: 44px; padding: 6px 12px; flex: 1 1 auto;
  border: 2px solid #000; border-radius: 6px; background: #fff; color: #000;
  font: inherit; cursor: pointer;
}
.a11y-panel button[aria-pressed="true"] { background: #000; color: #fff; }
.a11y-panel button:focus-visible { outline: 3px solid #1A5FB4; outline-offset: 2px; }
.a11y-panel .a11y-reset { margin-top: 6px; width: 100%; background: #F2F2F2; }
.a11y-panel .a11y-note { margin: 12px 0 0; font-size: 14px; }
.a11y-panel .a11y-note a, html.a11y-contrast-dark .a11y-panel .a11y-note a { color: #1A5FB4; text-decoration: underline; }
.a11y-panel .a11y-close { position: absolute; right: 10px; top: 10px; flex: none; min-height: 40px; width: 40px; padding: 0; border-width: 1px; font-size: 22px; line-height: 1; }
@media print { .a11y-toggle, .a11y-panel, .skip-link { display: none !important; } }