/* ==========================================================================
   Stiftung Heilig-Geist-Hospital Bensheim – stylesheet (Version 1 = exact copy)
   Built with the website toolkit, 2026-10-21. Live site: WordPress, Qode theme.
   HOW TO CHANGE THINGS: all editable values are in section 1 ("Settings").
   Sizes are plain numbers = pixels on a large laptop (reference 1440 px and
   wider, measured on the live site at 1728 px). Phones/tablets scale down.
   ========================================================================== */

/* 1. SETTINGS (CI values, see 00-docs/ci-values.md) ======================== */
:root {
  --color-page-bg:     #1C272A;  /* page background (dark green-grey)        */
  --color-panel-bg:    #253034;  /* contact panel + footer                    */
  --color-line:        #56636A;  /* thin line above footer, accordion lines   */
  --color-text:        #B2C0C4;  /* all text + headings (logo colour AFC1C5)  */
  --color-text-dim:    #6C797C;  /* intro text before it lights up on scroll  */
  --color-footer-link: #FFFFFF;
  --color-copyright:   #8C979A;
  --color-hero-shade:  rgba(28, 39, 42, .42);   /* dark layer over the photos */
  --color-focus:       #FFD54A;

  --font-heading: "DM Sans", Arial, sans-serif;
  --font-text:    "Roboto", Arial, sans-serif;

  --fs-hero:        77;   /* start page title          */
  --fs-hero-sub:    74;   /* title on Impressum / Datenschutz */
  --fs-label:       35;   /* STIFTUNG / ZIELE …        */
  --fs-intro:       48;   /* large intro texts         */
  --fs-h2:          36;   /* Kontakt, page headings    */
  --fs-h3:          36;   /* Impressum sub headings, accordion titles */
  --fs-text:        18;
  --fs-footer:      19;
  --fs-small:       13;

  --width-content: 1140;
  --width-footer:  1100;
  --hero-height:     795;
  --hero-height-sub: 500;
}

/* 2. AUTOMATIC SCALING ======================================================
   --u headings/spacing, --t text. 1 px from 1440 px screen width upwards. */
:root {
  --a11y-text: 1; --a11y-ui: 1;
  --u: calc(clamp(0.55px, calc(100vw / 1440), 1px) * var(--a11y-ui));
  --t: calc(clamp(0.85px, calc(0.6px + 100vw / 3600), 1px) * var(--a11y-text));
}

/* 3. FONTS (local files, no Google connection) ============================= */
@font-face { font-family: "DM Sans"; font-weight: 400; 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-display: swap; src: url("../assets/fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto";  font-weight: 400; font-display: swap; src: url("../assets/fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto";  font-weight: 700; font-display: swap; src: url("../assets/fonts/roboto-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-text); font-size: calc(var(--fs-text) * var(--t)); line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); font-weight: 400; color: var(--color-text); }
p { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inner { width: 100%; max-width: calc(var(--width-content) * var(--u) + 2 * 24px); margin: 0 auto; padding: 0 24px; }

/* 5. BLOCK: site-header (logo left, menu button right, over the photo) ===== */
.site-header { position: absolute; z-index: 20; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: calc(25 * var(--u)) calc(121 * var(--u)); pointer-events: none; }
.site-header > * { pointer-events: auto; }
.site-header__logo img { width: calc(96 * var(--u)); height: auto; }
.menu-toggle { margin-top: calc(28 * var(--u)); width: 48px; height: 32px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--color-text); display: inline-flex; align-items: center; justify-content: center; }
.menu-toggle svg { width: 47px; height: 10px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.menu-toggle:hover { color: #fff; }

/* menu (full screen layer) */
.mobile-nav { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: var(--color-page-bg); }
.mobile-nav.is-open { display: flex; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; text-align: left; }
.mobile-nav li + li { margin-top: calc(18 * var(--u)); }
.mobile-nav a { font-family: var(--font-heading); font-size: calc(48 * var(--u)); line-height: 1.2; }
.mobile-nav a[aria-current="page"] { color: #fff; }
.mobile-nav__copy { position: absolute; left: 0; right: 0; bottom: calc(40 * var(--u)); text-align: center; font-size: calc(13 * var(--t)); color: var(--color-copyright); }
.mobile-nav__close { position: absolute; top: calc(40 * var(--u)); right: calc(121 * var(--u)); width: 48px; height: 48px; background: none; border: 0; color: var(--color-text); font-size: 44px; line-height: 1; cursor: pointer; }

/* 6. BLOCK: page-hero (photo with dark layer + title) ====================== */
.page-hero { position: relative; height: calc(var(--hero-height) * var(--u)); min-height: 420px; background: #000 center / cover no-repeat; display: flex; align-items: flex-end; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: var(--color-hero-shade); }
.page-hero__inner { position: relative; width: 100%; max-width: calc(var(--width-content) * var(--u) + 48px); margin: 0 auto; padding: 0 24px calc(140 * var(--u)); }
.page-hero h1 { font-weight: 500; font-size: calc(var(--fs-hero) * var(--u)); line-height: 1.02; letter-spacing: -.005em; }
.page-hero--sub { height: calc(var(--hero-height-sub) * var(--u)); min-height: 300px; }
.page-hero--sub .page-hero__inner { padding-bottom: calc(104 * var(--u)); }
.page-hero--sub h1 { font-size: calc(var(--fs-hero-sub) * var(--u)); }

/* 7. BLOCK: label-intro (small label + large text, lights up on scroll) === */
.label-intro { padding: calc(123 * var(--u)) 0 calc(150 * var(--u)); }
.label-intro__item + .label-intro__item { margin-top: calc(105 * var(--u)); }
.label-intro h2 { font-family: var(--font-text); font-size: calc(var(--fs-label) * var(--u)); line-height: 1.2; text-transform: uppercase; margin-bottom: calc(26 * var(--u)); }
.label-intro p { font-size: calc(var(--fs-intro) * var(--u)); line-height: 1.1; }
.js .label-intro [data-light], .js .label-intro [data-light] h2 { color: var(--color-text-dim); transition: color .6s ease; }
.js .label-intro [data-light].is-lit, .js .label-intro [data-light].is-lit h2 { color: var(--color-text); }

/* 8. BLOCK: image-contact (photo left 50 %, contact right) ================== */
.image-contact { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-panel-bg); border-bottom: 1px solid #3A464A; border-top: calc(60 * var(--u)) solid var(--color-page-bg); }
.image-contact__photo { position: relative; min-height: calc(510 * var(--u)); background: center / cover no-repeat; }
.image-contact__photo::before { content: ""; position: absolute; inset: 0; background: var(--color-hero-shade); }
.image-contact__text { padding: calc(118 * var(--u)) 24px calc(80 * var(--u)) calc(173 * var(--u)); font-size: calc(19 * var(--t)); line-height: 1.6; }
.image-contact__text h2 { font-size: calc(var(--fs-h2) * var(--u)); line-height: 1.3; margin-bottom: calc(14 * var(--u)); }
.image-contact__text p + p { margin-top: calc(10 * var(--u)); }

/* 9. BLOCK: legal-text (Impressum) ======================================== */
.legal { padding: calc(122 * var(--u)) 0 calc(110 * var(--u)); font-size: calc(19 * var(--t)); line-height: 1.6; }
.legal h2, .legal h3 { font-size: calc(var(--fs-h3) * var(--u)); line-height: 1.3; margin: calc(34 * var(--u)) 0 calc(22 * var(--u)); }
.legal > .inner > h2:first-child { margin-top: 0; }
.legal p + p { margin-top: calc(10 * var(--u)); }

/* 10. BLOCK: accordion (numbered 01 …, one open at a time) ================ */
.accordion-section { padding: calc(100 * var(--u)) 0 calc(110 * var(--u)); }
.accordion-section > .inner > h2 { font-size: calc(var(--fs-h3) * var(--u)); line-height: 1.3; margin-bottom: calc(52 * var(--u)); }
.accordion { counter-reset: acc; border-bottom: 1px solid var(--color-line); }
.accordion__item + .accordion__item { border-top: 1px solid var(--color-line); }
.accordion__title { margin: 0; font-size: calc(29 * var(--u)); line-height: 1.3; }
.accordion__button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: calc(22 * var(--u)) 0; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.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: .5em; font-size: calc(14 * var(--t)); line-height: 1; }
.accordion__icon { width: 14px; height: 16px; flex: none; margin-left: 20px; stroke: currentColor; fill: none; stroke-width: 1.3; transition: transform .3s ease; }
.accordion__item.is-open .accordion__icon { transform: rotate(180deg); }
.accordion__panel { display: none; padding: 0 calc(27 * var(--u)) calc(30 * var(--u)); font-size: calc(17 * var(--t)); line-height: 1.75; }
.accordion__item.is-open .accordion__panel { display: block; }
.accordion__panel p + p { margin-top: 1em; }

/* 11. BLOCK: footer ======================================================== */
.site-footer { background: var(--color-panel-bg); }
.site-footer__inner { max-width: calc(var(--width-footer) * var(--u) + 48px); margin: 0 auto; padding: calc(30 * var(--u)) 24px calc(46 * var(--u)); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { font-family: var(--font-heading); font-size: calc(var(--fs-footer) * var(--t)); line-height: 1.7; color: var(--color-footer-link); }
.site-footer li a:hover { text-decoration: underline; }
.site-footer__copy { margin-top: calc(110 * var(--u)); font-size: calc(var(--fs-small) * var(--t)); color: var(--color-copyright); }

/* 12. BLOCK: back-to-top (round button bottom right) ======================= */
.back-to-top { position: fixed; right: 22px; bottom: 60px; z-index: 30; width: 44px; height: 44px; border-radius: 50%; background: rgba(28,39,42,.9); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s; }
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top svg { width: 14px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.3; }

/* 13. BLOCK: error-page (404) ============================================== */
.error-page { padding: calc(150 * var(--u)) 0; }
.error-page h2 { font-size: calc(var(--fs-h2) * var(--u)); margin-bottom: calc(20 * var(--u)); }
.error-page ul { margin: calc(30 * var(--u)) 0 0; padding: 0; list-style: none; }
.error-page li a { font-family: var(--font-heading); font-size: calc(24 * var(--u)); text-decoration: underline; text-underline-offset: 4px; }

/* marker for text that still has to be copied from the live site (never published) */
.todo-text { outline: 2px dashed #E0A800; outline-offset: 6px; color: #E0A800; }

/* 14. SMALL SCREENS: only the arrangement changes ========================== */
@media (max-width: 900px) {
  .site-header { padding: 20px 24px; }
  .site-header__logo img { width: 70px; }
  .menu-toggle { margin-top: 14px; }
  .image-contact { grid-template-columns: 1fr; }
  .image-contact__photo { min-height: 260px; }
  .image-contact__text { padding: 50px 24px; }
  .mobile-nav a { font-size: 32px; }
  .mobile-nav__close { right: 24px; top: 20px; }
}
/* ==========================================================================
   BLOCK: accessibility  (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; } }