/* ==========================================================================
   Bensheimer Bücherstube – stylesheet (Version 1, exact copy)
   Structure = toolkit master (00-toolkit/styles/style.css).
   --------------------------------------------------------------------------
   HOW TO CHANGE THINGS
   All editable values are in section 1 ("Settings"). Change them there only.
   Sizes are plain numbers = pixels on a laptop (1440 px wide).
   Smartphones, tablets and large screens scale automatically.
   ========================================================================== */


/* ==========================================================================
   1. SETTINGS  (CI values of this client – see 00-docs/ci-values.md)
   ========================================================================== */
:root {
  /* --- Colors ---------------------------------------------------------- */
  --color-primary:       #FDBA12;  /* yellow: circles, footer              */
  --color-primary-hover: #000000;  /* circle background on mouse-over      */
  --color-page-bg:       #FFFFFF;  /* page background                      */
  --color-text:          #000000;  /* all text and headings                */
  --color-label:         #585858;  /* small spaced label above the phone   */
  --color-line:          #BCBCBC;  /* thin vertical lines beside texts     */
  --color-footer-bottom: #FFFFFF;  /* white strip with the funding banner  */

  /* --- Fonts ----------------------------------------------------------- */
  --font-heading: "Yantramanav", Arial, sans-serif;  /* headings            */
  --font-text:    "Roboto", Arial, sans-serif;       /* text, labels, circles */

  /* --- Font sizes (laptop px) ------------------------------------------ */
  --fs-h1-page:   76;   /* H1 on Impressum / Datenschutz        */
  --fs-h2-legal:  42;   /* H2 in Impressum                      */
  --fs-h3:        28;   /* block headings                       */
  --fs-phone:     56;   /* big phone number                     */
  --fs-contact:   24;   /* e-mail and address lines             */
  --fs-text-lg:   19;   /* text in the start page blocks        */
  --fs-text:      16;   /* normal text (Impressum, Datenschutz) */
  --fs-badge:     18;   /* text in the hero circle              */
  --fs-badge-sm:  16;   /* text in the "Danke schön" circle     */
  --fs-label:     13;   /* spaced capitals (label, footer)      */

  /* --- Spacing and sizes (laptop px) ----------------------------------- */
  --header-height: 100;
  --logo-height:   90;
  --logo-gutter:   21;
  --badge-size:    263;   /* diameter of the yellow circles     */
  --badge-move:    10;    /* how far the circle follows the mouse (px) */
  --width-legal:   1075;  /* text width on Impressum / Datenschutz */
  --footer-gutter: 120;
}


/* ==========================================================================
   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: "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: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/roboto-latin-500-normal.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: "Yantramanav"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/yantramanav-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Yantramanav"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/yantramanav-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Yantramanav"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/yantramanav-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.647;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); font-weight: 500; 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;
}
/* Heading look "block heading" – used for H2/H3 tags that look like the
   theme's 28px headings (tag chosen for correct heading order). */
.heading-block {
  font-family: var(--font-heading);
  font-size: calc(var(--fs-h3) * var(--u));
  font-weight: 500;
  line-height: 1.023;
  letter-spacing: -0.02em;
}


/* ==========================================================================
   5. LAYOUT HELPERS
   ========================================================================== */
.section { position: relative; width: 100%; }
.two-col {
  display: grid;
  grid-template-columns: 2fr 3fr;   /* 40 % | 60 % like the live site */
  align-items: center;
}


/* ==========================================================================
   7. BLOCK: site-header  (logo only, lies over the hero on the start page)
   ========================================================================== */
.site-header {
  position: relative; z-index: 20;
  height: calc(var(--header-height) * var(--u));
  padding: 0 calc(var(--logo-gutter) * var(--u));
  display: flex; align-items: center;
}
.site-header--over { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
.site-header__logo img { height: calc(var(--logo-height) * var(--u)); width: auto; }


/* ==========================================================================
   8. BLOCK: page-hero  (variant: full-width photo + round-badge right)
   ========================================================================== */
.page-hero--badge {
  min-height: calc(666 * var(--u));
  background: #e9e9e9 center / cover no-repeat;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: calc(259 * var(--u)) calc(259 * var(--u)) calc(144 * var(--u)) calc(43 * var(--u));
}
.page-hero--badge img.page-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}


/* ==========================================================================
   9. BLOCK: round-badge  (yellow circle with spaced capitals;
      the yellow disc follows the mouse a little, black shows behind it)
   ========================================================================== */
.round-badge {
  position: relative; z-index: 2;
  width: calc(var(--badge-size) * var(--u));
  height: calc(var(--badge-size) * var(--u));
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: calc(var(--fs-badge) * var(--t));
  font-weight: 500;
  line-height: 25px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color .2s ease-out;
  flex: none;
}
.round-badge--small { font-size: calc(var(--fs-badge-sm) * var(--t)); }
.round-badge__text {
  position: absolute; top: 50%; left: 0; width: 100%;
  transform: translateY(-50%); z-index: 11;
}
.round-badge__circle {
  position: absolute; inset: 0; border-radius: 50%; z-index: 10;
  background: var(--color-primary);
  transition: transform .5s cubic-bezier(.2, .84, .5, 1);
}
.round-badge:hover { background: var(--color-primary-hover); }


/* ==========================================================================
   10. BLOCK: contact-info  (left: label, phone, e-mail, address |
       right: 2 text blocks with thin line on the left)
   ========================================================================== */
.contact-info {
  padding: calc(86 * var(--u)) calc(144 * var(--u)) calc(58 * var(--u));
}
.contact-info__left { padding: 0 calc(46 * var(--u)); }
.contact-info__label {
  font-family: var(--font-text);
  font-size: calc(var(--fs-label) * var(--t));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-label);
  margin-bottom: calc(20 * var(--u));
}
.contact-info__phone {
  font-size: calc(var(--fs-phone) * var(--u));
  font-weight: 500; line-height: 1;
  margin-bottom: calc(20 * var(--u));
}
.contact-info__line {
  font-size: calc(var(--fs-contact) * var(--u));
  font-weight: 500; line-height: 1;
  margin-bottom: calc(20 * var(--u));
}
.contact-info__spacer { height: calc(10 * var(--u)); margin-bottom: calc(20 * var(--u)); }
.contact-info__right { padding: calc(10 * var(--u)); }


/* ==========================================================================
   11. BLOCK: text-line  (heading + text with a thin line on the left)
   ========================================================================== */
.text-line {
  border-left: 1px solid var(--color-line);
  padding: 25px 11%;
  margin-bottom: 20px;
}
.text-line:last-child { margin-bottom: 0; }
.text-line--wide { padding: 25px 5% 25px 6%; }
.text-line p {
  font-size: calc(var(--fs-text-lg) * var(--t));
  line-height: 1.647;
  margin: 10px 0;
}
.text-line p:last-child { margin-bottom: 0; }


/* ==========================================================================
   12. BLOCK: image-badge  (wide photo with a round-badge in the middle)
   ========================================================================== */
.image-badge { padding: calc(29 * var(--u)) calc(86 * var(--u)); }
.image-badge__box {
  position: relative;
  margin: 0 calc(10 * var(--u));
  min-height: calc(532 * var(--u));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.image-badge__box img.image-badge__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}


/* ==========================================================================
   13. BLOCK: person-text  (portrait + name left | text-line blocks right)
   ========================================================================== */
.person-text { padding: calc(29 * var(--u)) calc(144 * var(--u)) calc(58 * var(--u)); }
.person-text__person { padding: calc(46 * var(--u)); }
.person-text__person img { width: 100%; }
.person-text__name { margin-top: calc(20 * var(--u)); }
.person-text__texts { padding: 0 calc(27 * var(--u)); }


/* ==========================================================================
   14. BLOCK: legal-text  (Impressum, Datenschutz)
   ========================================================================== */
.legal-text {
  max-width: calc(var(--width-legal) * var(--u) + 40px);
  margin: 0 auto;
  padding: calc(122 * var(--u)) 20px calc(150 * var(--u));
}
.legal-text h1 {
  font-size: calc(var(--fs-h1-page) * var(--u));
  line-height: 1; letter-spacing: -0.02em;
  margin-bottom: calc(20 * var(--u));
}
.legal-text__body { font-size: calc(var(--fs-text) * var(--t)); line-height: 1.647; }
.legal-text__body h2 {
  font-size: calc(var(--fs-h2-legal) * var(--u));
  line-height: 1.103; letter-spacing: -0.02em;
  margin: 25px 0;
}
.legal-text__body h2.heading-block { font-size: calc(var(--fs-h3) * var(--u)); line-height: 1.023; margin: 25px 0; }
.legal-text__body strong { font-weight: 700; }
/* Version 2: legal texts with paragraphs, lists and links */
.legal-text__body p { margin: 0 0 1em; }
.legal-text__body ul { margin: 0 0 1em; padding-left: 1.4em; }
.legal-text__body li { margin: 0 0 .25em; }
.legal-text__body a { text-decoration: underline; }


/* ==========================================================================
   15. BLOCK: footer  (yellow band with big "BB" in the background,
       4 columns of spaced capitals, white strip with funding banner)
   ========================================================================== */
.site-footer__top {
  background: var(--color-primary) url("../assets/images/footer-bg-bb-monogram.jpg") 0 0 / cover no-repeat;
  padding: calc(126 * var(--u)) calc(var(--footer-gutter) * var(--u)) calc(113 * var(--u));
}
.site-footer__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  font-size: calc(var(--fs-label) * var(--t));
  font-weight: 500;
  line-height: 1.846;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text);
}
.site-footer__grid > div { text-align: right; }
.site-footer__grid > div:first-child { text-align: left; }
.site-footer__grid a:hover { text-decoration: underline; }
.site-footer__bottom {
  background: var(--color-footer-bottom);
  padding: 24px 20px;
}
.site-footer__bottom img { margin: 0 auto; width: 1024px; max-width: 100%; }


/* ==========================================================================
   16. BLOCK: back-to-top  (round outline with small arrow, bottom right)
   ========================================================================== */
.back-to-top {
  position: fixed; right: 12px; bottom: 25px; z-index: 100;
  width: 55px; height: 55px;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top svg { width: 55px; height: 55px; overflow: visible; }
.back-to-top path:first-child {
  stroke: #000; fill: none;
  stroke-dasharray: 175; stroke-dashoffset: 0;
  transform: rotate(-60deg); transform-origin: center;
  transition: .8s cubic-bezier(.43, .41, .36, .9);
}
.back-to-top path:last-child {
  fill: #000;
  transition: transform .6s cubic-bezier(.43, .41, .36, .9) .2s;
}
.back-to-top:hover path:first-child { stroke-dashoffset: 350; transform: rotate(-205deg); }
.back-to-top:hover path:last-child { transform: translate(2px, -10px); }


/* ==========================================================================
   17. BLOCK: error-page  (404)
   ========================================================================== */
.error-page { text-align: center; padding: calc(150 * var(--u)) 20px; }
.error-page h1 { font-size: calc(var(--fs-h1-page) * var(--u)); line-height: 1; margin-bottom: 30px; }
.error-page p { font-size: calc(var(--fs-text-lg) * var(--t)); margin-bottom: 30px; }
.error-page__links { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap;
  font-size: calc(var(--fs-label) * var(--t)); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.error-page__links a { border-bottom: 1px solid currentColor; }
.error-page__contact { margin: 40px 0 0; font-size: calc(var(--fs-text-lg) * var(--t)); }
.error-page__contact a { border-bottom: 1px solid currentColor; }


/* ==========================================================================
   24. LAYOUT CHANGES FOR SMALL SCREENS
   ========================================================================== */
@media (max-width: 1024px) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .site-footer__grid > div:nth-child(3) { text-align: left; }
}
@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; }
  .contact-info, .person-text { padding-left: 20px; padding-right: 20px; }
  .contact-info__right, .person-text__texts { padding: 30px 0 0; }
  .contact-info__left, .person-text__person { padding: 0; }
  .text-line, .text-line--wide { padding: 18px 5px 16px 30px; }
  .image-badge { padding: 20px; }
  .image-badge__box { margin: 0; min-height: 400px; }
  .page-hero--badge { min-height: 520px; justify-content: center; padding: 120px 20px 60px; }
  .round-badge { width: 226px; height: 226px; }
  /* Phone/tablet (Minna 2026-10-09): person more to the middle, circle smaller,
     bottom right – so it does not cover the face */
  /* 29 % = left arm touches the left screen edge on phones (Minna 2026-10-09, 2nd round) */
  .page-hero--badge img.page-hero__bg { object-position: 29% 50%; }
  /* Logo a bit bigger on phones, still clear of the hair (was approx. 57 px) */
  .site-header { height: max(72px, calc(var(--header-height) * var(--u))); padding: 0 12px; }
  .site-header__logo img { height: max(66px, calc(var(--logo-height) * var(--u))); }
  .page-hero--badge { justify-content: flex-end; align-items: flex-end; padding: 120px 16px 24px; }
  .page-hero--badge .round-badge { width: 190px; height: 190px; font-size: calc(16 * var(--t)); line-height: 1.45; }
}
/* Footer links easier to tap with a finger (Minna 2026-10-09): touch screens + small screens */
@media (max-width: 1024px), (pointer: coarse) {
  .site-footer__grid a { display: inline-block; padding: 10px 0; min-height: 44px; }
}
@media (max-width: 480px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__grid > div { text-align: left !important; }
}
@media (prefers-reduced-motion: reduce) {
  .round-badge__circle, .back-to-top path { transition: none; }
}


/* ==========================================================================
   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; } }


/* project colors in the two contrast modes (variable names of this project) */
html.a11y-contrast-light { --color-primary:#fff;--color-primary-hover:#fff;--color-page-bg:#fff;--color-text:#000;--color-label:#000;--color-line:#000;--color-footer-bottom:#fff;}
html.a11y-contrast-light .round-badge, html.a11y-contrast-dark .round-badge { border: 2px solid currentColor; }
html.a11y-contrast-light .site-footer__top, html.a11y-contrast-dark .site-footer__top { background-image: none !important; border-top: 2px solid currentColor;  }
html.a11y-contrast-dark { --color-primary:#000;--color-primary-hover:#000;--color-page-bg:#000;--color-text:#fff;--color-label:#FFE600;--color-line:#fff;--color-footer-bottom:#000; }