/* Erzeugt aus css/ durch tools/kopfbereich-css.mjs. */

/* ===== 10-tokens.css ===== */
/* Gestaltungstokens und Schriften.
 *
 * Von Hand gepflegt, nicht extrahiert: die Werte stehen in `global.css` in
 * einem `@theme{}`-Block. Das ist eine Tailwind-4-At-Rule, die kein Browser
 * aufloest — ein reiner Textextrakt waere wirkungslos.
 *
 * Die Namen bleiben absichtlich `--color-*`, weil der extrahierte Code sie so
 * referenziert. Sie sind auf `.ceg-chrome` begrenzt und koennen deshalb nichts
 * ausserhalb des Kopfbereichs beeinflussen.
 */
.ceg-chrome {
  --color-brand: #164194;
  --color-brand-deep: #0e4194;
  --color-brand-soft: #005ca0;
  --color-ink: #333333;
  --color-muted: #666666;
  --color-paper: #ffffff;
  --color-surface: #f4f4f4;
  --color-rule: #e2e2e2;
  --color-rule-soft: #cccccc;
  --font-sans: 'Source Sans Pro', Helvetica, Arial, sans-serif;

  /* z-Index-Band: bewusst unter der Adminleiste (99999), damit sie bedienbar
     bleibt. Die beiden Dialoge brauchen keinen Wert — sie liegen im Top-Layer. */
  --ceg-z-kopf: 99900;
  --ceg-z-dropdown: 99901;
  --ceg-z-schwebend: 99902;
}

/* Schriften global: @font-face ist nicht kapselbar und traegt keine Selektoren. */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('https://dev.cegla.de/wp-content/uploads/pt-test/assets/fonts/source-sans-pro-v21-latin-300.woff2') format('woff2'),
       url('https://dev.cegla.de/wp-content/uploads/pt-test/assets/fonts/source-sans-pro-v21-latin-300.woff') format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('https://dev.cegla.de/wp-content/uploads/pt-test/assets/fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'),
       url('https://dev.cegla.de/wp-content/uploads/pt-test/assets/fonts/source-sans-pro-v21-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('https://dev.cegla.de/wp-content/uploads/pt-test/assets/fonts/source-sans-pro-v21-latin-italic.woff2') format('woff2'),
       url('https://dev.cegla.de/wp-content/uploads/pt-test/assets/fonts/source-sans-pro-v21-latin-italic.woff') format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('https://dev.cegla.de/wp-content/uploads/pt-test/assets/fonts/source-sans-pro-v21-latin-600.woff2') format('woff2'),
       url('https://dev.cegla.de/wp-content/uploads/pt-test/assets/fonts/source-sans-pro-v21-latin-600.woff') format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('https://dev.cegla.de/wp-content/uploads/pt-test/assets/fonts/source-sans-pro-v21-latin-700.woff2') format('woff2'),
       url('https://dev.cegla.de/wp-content/uploads/pt-test/assets/fonts/source-sans-pro-v21-latin-700.woff') format('woff');
}


/* ===== 20-basis.css ===== */

.ceg-chrome,
.ceg-chrome *,
.ceg-chrome *::before,
.ceg-chrome *::after { box-sizing: border-box; }

.ceg-chrome {
  
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


.ceg-chrome button {
  margin: 0; padding: 0;
  font: inherit; color: inherit;
  background: none; border: 0;
  line-height: inherit; text-align: inherit;
  -webkit-appearance: none; appearance: none;
}
.ceg-chrome a { text-decoration: none; }
.ceg-chrome img,
.ceg-chrome svg { display: block; max-width: 100%; }
.ceg-chrome ul,
.ceg-chrome ol { margin: 0; padding: 0; list-style: none; line-height: inherit; }
.ceg-chrome li { margin: 0; padding: 0; }
.ceg-chrome p { margin: 0; }
.ceg-chrome h1, .ceg-chrome h2, .ceg-chrome h3 { margin: 0; padding: 0; font-weight: inherit; }
.ceg-chrome input { font: inherit; }


/* ===== 25-navigation.css ===== */
/* --- Navigation: buttons --- */

.ceg-chrome .btn{
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 15px;
  border: 2px solid var(--color-brand);
  border-radius: 5px;
  background: var(--color-brand);
  color: #fff;
  transition: background 0.25s ease, color 0.25s ease, padding 0.25s ease;
  cursor: pointer;
}
.ceg-chrome .btn:hover{
  background: #fff;
  color: var(--color-brand);
}

/* Deeplink-Buttons (Direktzugang Fachpersonal): Produktnamen in
   Originalschreibweise, nicht in Versalien. */
.ceg-chrome .btn--deeplink{
  text-transform: none;
  letter-spacing: normal;
}

.ceg-chrome .btn--invert{
  background: #fff;
  color: var(--color-brand);
  border-color: #fff;
}
.ceg-chrome .btn--invert:hover{
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* --- Navigation: header --- */

.ceg-chrome .site-header{
  background: #fff; border-bottom: 1px solid #e8eaed;
  position: relative; z-index: 100;
}
.ceg-chrome .header-inner{
  max-width: 1140px; margin: 0 auto;
  display: flex; align-items: center; height: 68px; padding: 0 32px;
}
.ceg-chrome .logo-link{ margin-right: 48px; flex-shrink: 0; }
/* Wortmarke ohne "MEDIZINTECHNIK"-Unterzeile: 20px entspricht der bisherigen
   CEGLA-Glyphenhöhe (34px Gesamtbild × 146/250 Wortmarken-Anteil) */
.ceg-chrome .logo-link img{ height: 20px; width: auto; display: block; }

/* ----- Desktop-Nav ----- */
.ceg-chrome .nav-row{
  display: flex; align-items: center; gap: 2px;
  flex: 1; justify-content: center;
}
.ceg-chrome .nav-item{ position: relative; }
.ceg-chrome .nav-item > a{
  display: flex; align-items: center; gap: 5px;
  padding: 10px 16px; font-size: 15.5px; font-weight: 600; color: var(--color-ink);
  text-decoration: none; border-radius: 8px;
  transition: all 0.2s; white-space: nowrap;
}
.ceg-chrome .nav-item > a:hover,.ceg-chrome .nav-item:hover > a{ background: #f7f8fa; color: var(--color-brand); }
.ceg-chrome .nav-item > a .arrow{ font-size: 9px; opacity: 0.4; transition: transform 0.2s, opacity 0.2s; }
.ceg-chrome .nav-item:hover > a .arrow{ transform: rotate(180deg); opacity: 0.7; }

/* ----- Right side: search + CTA + burger ----- */
.ceg-chrome .nav-right{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ceg-chrome .search-btn{
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; border: 0; cursor: pointer;
  background: #f7f8fa; color: #8a9bb5; transition: all 0.2s; font-family: inherit;
}
.ceg-chrome .search-btn:hover{ background: #edf0f4; color: var(--color-brand); }
.ceg-chrome .cta-kontakt{
  padding: 9px 22px; border-radius: 5px;
  background: var(--color-brand); color: #fff;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: all 0.3s ease; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 1px;
  border: 2px solid var(--color-brand);
}
.ceg-chrome .cta-kontakt:hover{ background: #fff; color: var(--color-brand); border-radius: 25px; }

/* ----- Dropdown ----- */
.ceg-chrome .dropdown{
  display: none; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  background: #fff; border-radius: 0; border: 1px solid #e8eaed;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 12px; padding-top: 18px; margin-top: 0;
  z-index: 50;
}
.ceg-chrome .dropdown::before{
  content: ''; position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: #fff;
  border-left: 1px solid #e8eaed; border-top: 1px solid #e8eaed;
}
.ceg-chrome .dropdown::after{
  content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.ceg-chrome .nav-item:hover .dropdown,.ceg-chrome .nav-item:focus-within .dropdown{ display: block; }

.ceg-chrome .dd-grid{ display: grid; gap: 2px; }
.ceg-chrome .dd-grid.cols-2{ grid-template-columns: 1fr 1fr; min-width: 420px; }
.ceg-chrome .dd-grid.cols-1{ grid-template-columns: 1fr; min-width: 220px; }
.ceg-chrome .dd-grid.cols-2.dd-grid--titled{ min-width: 380px; }
.ceg-chrome .dd-grid a{
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; font-size: 14px; font-weight: 500;
  color: #2d3748; text-decoration: none;
  transition: all 0.15s; white-space: nowrap;
  border-bottom: 1px solid #f0f2f5;
}
.ceg-chrome .dd-grid a:hover{ background: #f7f8fa; color: var(--color-brand); }
.ceg-chrome .dd-grid.cols-2 > a:nth-child(odd){ border-right: 1px solid #f0f2f5; }
.ceg-chrome .dd-grid > a:nth-last-child(-n+2){ border-bottom: none; }
.ceg-chrome .dd-grid.cols-1 > a:nth-last-child(-n+2){ border-bottom: 1px solid #f0f2f5; }
.ceg-chrome .dd-grid.cols-1 > a:last-child{ border-bottom: none; }

/* Nested column divs (Wissen-Dropdown mit Sektionstiteln) */
.ceg-chrome .dd-grid.cols-2 > div{ display: flex; flex-direction: column; }
.ceg-chrome .dd-grid.cols-2 > div:first-child{ border-right: 1px solid #f0f2f5; }
.ceg-chrome .dd-grid.cols-2 > div a{
  border-bottom: 1px solid #f0f2f5; border-right: none;
}
.ceg-chrome .dd-grid.cols-2 > div a:last-child{ border-bottom: none; }
.ceg-chrome .dd-section-title{
  display: block; padding: 6px 14px 4px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-muted);
}

/* Highlight-Eintrag im Dropdown (App, leichter-atmen.de) */
.ceg-chrome .dd-app-highlight{
  padding: 0 0 10px; margin-bottom: 8px;
  border-bottom: 1px solid #f0f2f5;
}
.ceg-chrome .dd-app-highlight--green{ border-color: #d0f0e6; }
.ceg-chrome .dd-app-highlight a{
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; font-size: 14px; font-weight: 600;
  color: var(--color-brand); text-decoration: none; transition: all 0.15s;
}
.ceg-chrome .dd-app-highlight--green a{ color: #0d7a5f; }
.ceg-chrome .dd-app-highlight a:hover{ background: #f7f8fa; }
.ceg-chrome .dd-badge{
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
  background: #eef2fa; color: var(--color-brand);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.ceg-chrome .dd-badge--green{ background: #e6f7f2; color: #0d7a5f; }

.ceg-chrome .dd-footer{ border-top: 1px solid #f0f2f5; margin: 6px -4px -4px; padding: 8px 4px 0; }
.ceg-chrome .dd-footer a{
  display: block; padding: 10px 14px;
  font-size: 13px; color: var(--color-brand); font-weight: 600;
  text-decoration: none; transition: all 0.15s;
}
.ceg-chrome .dd-footer a:hover{ background: #f7f8fa; }

/* --- Navigation: mobil --- */

.ceg-chrome .hamburger{
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 0; background: none; cursor: pointer;
  flex-direction: column; gap: 5px;
  padding: 8px; margin-left: 8px;
}
.ceg-chrome .hamburger span{
  display: block; width: 20px; height: 2px;
  background: var(--color-ink); border-radius: 1px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ceg-chrome.mobile-menu{
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: #fff; z-index: 200;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.ceg-chrome.mobile-menu.open{ display: block; }
.ceg-chrome .mobile-menu-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-rule);
}
.ceg-chrome .mobile-menu-close{
  width: 40px; height: 40px; border: 0; background: none;
  font-size: 24px; color: var(--color-ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ceg-chrome .mobile-menu-body{ padding: 8px 0; }
.ceg-chrome .mobile-menu-item{ border-bottom: 1px solid #f5f5f5; }
.ceg-chrome .mobile-menu-link{
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  font-size: 16px; font-weight: 600; color: var(--color-ink);
  text-decoration: none; cursor: pointer;
}
.ceg-chrome .mobile-menu-link:hover{ background: var(--color-surface); }
.ceg-chrome .mobile-menu-link .m-arrow{
  font-size: 12px; color: var(--color-muted);
  transition: transform 0.2s;
}
.ceg-chrome .mobile-menu-link.expanded .m-arrow{ transform: rotate(180deg); }
.ceg-chrome .mobile-submenu{ display: none; padding: 0 20px 12px; }
.ceg-chrome .mobile-submenu.open{ display: block; }
.ceg-chrome .mobile-submenu a{
  display: block; padding: 10px 16px;
  font-size: 15px; color: var(--color-muted);
  text-decoration: none; border-left: 2px solid var(--color-rule);
  transition: all 0.15s;
}
.ceg-chrome .mobile-submenu a:hover{
  color: var(--color-brand);
  border-color: var(--color-brand);
  background: var(--color-surface);
}
.ceg-chrome .mobile-submenu-title{
  display: block; padding: 12px 16px 4px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-muted);
}
.ceg-chrome .mobile-submenu-footer{
  margin-top: 6px;
  color: var(--color-brand) !important;
  font-weight: 600;
}
.ceg-chrome .mobile-menu-highlight{
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; margin: 0 0 8px;
  border-radius: 8px; border-left: none !important;
  font-size: 14px; font-weight: 600;
  text-decoration: none;
}
.ceg-chrome .mobile-menu-highlight--blue{ background: #eef2fa; color: var(--color-brand) !important; }
.ceg-chrome .mobile-menu-highlight--green{ background: #e6f7f2; color: #0d7a5f !important; }
.ceg-chrome .mobile-menu-highlight .m-badge{
  font-size: 10px; padding: 2px 6px;
  border-radius: 8px; background: rgba(255, 255, 255, 0.7);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.ceg-chrome .mobile-menu-cta{
  display: block; margin: 16px 20px; padding: 14px;
  text-align: center; border-radius: 5px;
  background: var(--color-brand); color: #fff;
  font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  text-decoration: none;
  border: 2px solid var(--color-brand);
}

@media (max-width: 980px) {
  .ceg-chrome .nav-row,.ceg-chrome .search-btn{ display: none; }
  .ceg-chrome .site-header{ position: sticky; top: 0; }
  .ceg-chrome .site-header .header-inner{ height: 56px; padding: 0 20px; }
  .ceg-chrome .hamburger{ display: flex; }
  .ceg-chrome .site-header .cta-kontakt{ display: none; }
  .ceg-chrome .logo-link{ margin-right: 0; }}

/* --- Navigation: fab --- */


/* ----- Floating-Button: rundes CEGLA-„C" ----- */
.ceg-chrome .bleib-informiert__fab{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(22, 65, 148, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ceg-chrome .bleib-informiert__fab:hover{
  transform: translateY(-2px);
}

.ceg-chrome .bleib-informiert__fab-c{
  width: 44px;
  height: 44px;
  display: block;
}

/* ----- Popup (natives <dialog>) ----- */
.ceg-chrome.bleib-informiert__dialog{
  margin: auto;
  padding: 0;
  border: none;
  border-radius: 20px;
  width: min(520px, calc(100vw - 32px));
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: 0 30px 70px rgba(15, 23, 48, 0.32);
  overflow: visible;
}

.ceg-chrome.bleib-informiert__dialog::backdrop{
  background: rgba(15, 23, 48, 0.55);
  backdrop-filter: blur(3px);
}

.ceg-chrome .bleib-informiert__panel{
  position: relative;
  padding: 44px 48px 40px;
  text-align: center;
  border-radius: 20px;
}

.ceg-chrome .bleib-informiert__close{
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ceg-chrome .bleib-informiert__close:hover{
  background: var(--color-surface);
  color: var(--color-ink);
}

.ceg-chrome .bleib-informiert__close svg{
  width: 20px;
  height: 20px;
}

/* Icon-Badge über der Überschrift. */
.ceg-chrome .bleib-informiert__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(22, 65, 148, 0.08);
  color: var(--color-brand);
}

.ceg-chrome .bleib-informiert__badge svg{
  width: 30px;
  height: 30px;
}

.ceg-chrome .bleib-informiert__heading{
  margin: 0 0 12px;
  color: var(--color-brand);
  font-size: 27px;
  line-height: 1.2;
}

.ceg-chrome .bleib-informiert__text{
  margin: 0 auto 26px;
  max-width: 40ch;
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.6;
}

.ceg-chrome .bleib-informiert__cta{
  display: block;
  width: 100%;
  padding: 14px 24px;
  font-size: 14px;
}

/* Trenner mit zentriertem Label ("Folgen Sie uns:"). */
.ceg-chrome .bleib-informiert__divider{
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 30px 0 20px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ceg-chrome .bleib-informiert__divider::before,.ceg-chrome .bleib-informiert__divider::after{
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-rule);
}

.ceg-chrome .bleib-informiert__social{
  display: flex;
  justify-content: center;
  gap: 16px;
}

.ceg-chrome .bleib-informiert__social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-brand);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.ceg-chrome .bleib-informiert__social a:hover{
  background: var(--color-brand);
  color: #fff;
  transform: translateY(-2px);
}

.ceg-chrome .bleib-informiert__social svg{
  width: 24px;
  height: 24px;
}

/* ----- Mobil: Button auf rundes Icon zusammenklappen, damit er wenig
   verdeckt (Hinweis Erik). Label nur für Screenreader (aria-label). ----- */
@media (max-width: 640px) {
  .ceg-chrome .bleib-informiert__fab{
    right: 16px;
    bottom: 16px;
    width: 60px;
    height: 60px;
  }

  .ceg-chrome .bleib-informiert__fab-c{
    width: 38px;
    height: 38px;
  }

  .ceg-chrome .bleib-informiert__panel{
    padding: 40px 24px 32px;
  }

  .ceg-chrome .bleib-informiert__heading{
    font-size: 23px;
  }}

/* Sanftes Einblenden des Popups (respektiert prefers-reduced-motion). */
@media (prefers-reduced-motion: no-preference) {
  .ceg-chrome.bleib-informiert__dialog[open]{
    animation: bleib-informiert-in 0.2s ease;
  }}

@keyframes bleib-informiert-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ===== 30-dialog.css ===== */


/* ----- Vier gleichwertige Kacheln (2×2) ----- */
/* Die Ueberschrift traegt beim Oeffnen den Fokus (tabindex=-1); ein Ring um
   eine nicht bedienbare Ueberschrift waere irrefuehrend. */
.ceg-chrome .bleib-informiert__heading:focus { outline: none; }
.ceg-chrome .bleib-informiert__text { margin-bottom: 20px; }

.ceg-chrome .bleib-informiert__kanaele {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Gleiche Zeilenhoehe: eine umbrechende Kurzzeile darf keine Kachel groesser
     machen als die anderen — „gleichwertig" heisst auch gleich gross. */
  grid-auto-rows: 1fr;
  gap: 12px;
}
.ceg-chrome .bleib-informiert__kanaele li { margin: 0; padding: 0; }

.ceg-chrome .bleib-informiert__kanal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 100%;
  min-height: 136px;
  padding: 18px 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
  color: var(--color-brand);
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.ceg-chrome .bleib-informiert__kanal:hover,
.ceg-chrome .bleib-informiert__kanal:focus-visible {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
  transform: translateY(-2px);
}

.ceg-chrome .bleib-informiert__kanal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 48, 0.12);
}
.ceg-chrome .bleib-informiert__kanal:hover .bleib-informiert__kanal-icon,
.ceg-chrome .bleib-informiert__kanal:focus-visible .bleib-informiert__kanal-icon {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.ceg-chrome .bleib-informiert__kanal-icon svg { width: 24px; height: 24px; }

.ceg-chrome .bleib-informiert__kanal-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}
.ceg-chrome .bleib-informiert__kanal-hinweis {
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-muted);
}
.ceg-chrome .bleib-informiert__kanal:hover .bleib-informiert__kanal-hinweis,
.ceg-chrome .bleib-informiert__kanal:focus-visible .bleib-informiert__kanal-hinweis {
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 640px) {
  .ceg-chrome .bleib-informiert__kanaele { gap: 10px; }
  .ceg-chrome .bleib-informiert__kanal { min-height: 118px; padding: 14px 8px 12px; gap: 6px; border-radius: 12px; }
  .ceg-chrome .bleib-informiert__kanal-icon { width: 40px; height: 40px; }
  .ceg-chrome .bleib-informiert__kanal-icon svg { width: 20px; height: 20px; }
  .ceg-chrome .bleib-informiert__kanal-label { font-size: 15px; }
  .ceg-chrome .bleib-informiert__kanal-hinweis { font-size: 12px; }
}

/* ----- Aufmerksamkeitsimpuls des C (FB-14) -----
 *
 * Ein Ring laeuft einmal nach aussen, der Knopf hebt sich kurz. Ausgeloest
 * durch die Klasse `ceg-impuls`, die das Skript kurz nach dem Laden setzt und
 * nach dem Ende wieder entfernt — es gibt keine Endlosschleife. Der Ring ist
 * ein Pseudoelement und bleibt ohne Klasse unsichtbar; er faengt keine Klicks.
 */
.ceg-chrome .bleib-informiert__fab::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 0 rgba(22, 65, 148, 0.5);
}
.ceg-chrome .bleib-informiert__fab.ceg-impuls { animation: ceg-fab-impuls 1.2s ease-out 1; }
.ceg-chrome .bleib-informiert__fab.ceg-impuls::after { animation: ceg-fab-ring 1.2s ease-out 1; }

@keyframes ceg-fab-impuls {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.08); }
  60%  { transform: scale(1); }
  100% { transform: scale(1); }
}
@keyframes ceg-fab-ring {
  0%   { opacity: 0.9; box-shadow: 0 0 0 0 rgba(22, 65, 148, 0.5); }
  100% { opacity: 0;   box-shadow: 0 0 0 22px rgba(22, 65, 148, 0); }
}

/* Bewegungsreduktion: kein Impuls, dafuer eine ruhige, dauerhafte
   Hervorhebung durch einen schmalen Markenring. */
@media (prefers-reduced-motion: reduce) {
  .ceg-chrome .bleib-informiert__fab.ceg-impuls,
  .ceg-chrome .bleib-informiert__fab.ceg-impuls::after { animation: none; }
  .ceg-chrome .bleib-informiert__fab {
    box-shadow: 0 0 0 3px rgba(22, 65, 148, 0.28), 0 6px 20px rgba(22, 65, 148, 0.3);
  }
}

/* ----- VF7-03: Das C wird kleiner und bekommt einen ruhigen Dauer-Blickfang -----
 *
 * Philipp am 07.09.2026: "Dieses C unten soll so ein bisschen animiert werden und ein
 * bisschen kleiner, aber vielleicht so, dass es einfach so eine kleine schoene Animation
 * hat, sodass es mehr ins Auge sticht."
 *
 * Groesse: 68 -> 56 px (Bild 44 -> 36 px), mobil 60 -> 50 px (Bild 38 -> 32 px). Beide Werte
 * bleiben klar ueber der 44-px-Mindestflaeche fuer Finger, und der Abstand zu Divis
 * Back-to-Top in derselben Ecke waechst von 35 auf 45 px (Gotcha 50, nachgemessen 1440x900).
 * Die Regeln stehen hinter dem global.css-Extrakt und ueberschreiben ihn deshalb bei
 * gleicher Spezifitaet - im Basisfall wie im 640-px-Block.
 *
 * Animation: der einmalige Impuls (FB-14) bleibt unveraendert und gewinnt waehrend seiner
 * 1,2 s. Zusaetzlich laeuft ein Grundtakt von 8 s, davon rund 6,5 s Ruhe: ein kurzes Atmen
 * des Knopfes und eine weiche Welle nach aussen.
 *
 * Vier Punkte aus der Gegenpruefung vom 07.09.2026 sind hier eingearbeitet:
 * 1. Startverzoegerung 4,5 s statt 3 s, aktive Phase am ANFANG des Zyklus. Vorher setzte der
 *    Impuls den Takt zurueck und die erste Bewegung kam erst nach rund 14 s - der Blickfang
 *    kam zu spaet. Jetzt: Impuls bei 2,5 s, erste Taktbewegung bei 4,5 s, danach alle 8 s.
 * 2. Die Welle laeuft ueber transform und opacity statt ueber animiertes box-shadow. Beide
 *    Eigenschaften liegen im Compositor; ein endlos animierter Schatten haette auf jeder
 *    Seite dauerhaft neu gezeichnet. Die Ringstaerke steht jetzt statisch im Schatten.
 * 3. Bei offenem Dialog ruht der Takt. Der bestehende Impuls hat dafuer einen JS-Waechter;
 *    der Takt ist reines CSS und braucht deshalb die :has()-Bedingung. Kennt eine Engine
 *    :has() nicht, laeuft der Takt weiter - das ist der bisherige Zustand, kein Bruch.
 * 4. Hover und Tastaturfokus schalten nur den Takt ab, nicht den Impuls: ohne
 *    :not(.ceg-impuls) haette eine Mausbewegung waehrend der 1,2 s den Impuls abgebrochen.
 */
.ceg-chrome .bleib-informiert__fab { width: 56px; height: 56px; animation: ceg-fab-takt 8s ease-in-out 4.5s infinite; }
.ceg-chrome .bleib-informiert__fab-c { width: 36px; height: 36px; }
.ceg-chrome .bleib-informiert__fab::after {
  box-shadow: 0 0 0 7px rgba(22, 65, 148, 0.4);
  animation: ceg-fab-welle 8s ease-out 4.5s infinite;
}

/* Runder Fokusring: die allgemeine Chrome-Regel setzt border-radius 2px und machte aus dem
   Kreis beim Tabben ein Quadrat. */
.ceg-chrome .bleib-informiert__fab:focus-visible { border-radius: 999px; }

/* Takt aus bei Hover und Tastaturfokus, damit die vorhandene Hover-Anhebung sichtbar bleibt -
   aber niemals waehrend des FB-14-Impulses. */
.ceg-chrome .bleib-informiert__fab:hover:not(.ceg-impuls),
.ceg-chrome .bleib-informiert__fab:focus-visible:not(.ceg-impuls) { animation: none; }
.ceg-chrome .bleib-informiert__fab:hover:not(.ceg-impuls)::after,
.ceg-chrome .bleib-informiert__fab:focus-visible:not(.ceg-impuls)::after { animation: none; opacity: 0; }

/* Takt aus, solange das Kanal-Popup offen ist. */
.ceg-chrome .bleib-informiert:has(.bleib-informiert__dialog[open]) .bleib-informiert__fab,
.ceg-chrome .bleib-informiert:has(.bleib-informiert__dialog[open]) .bleib-informiert__fab::after { animation: none; }

@keyframes ceg-fab-takt {
  0%        { transform: scale(1); }
  4%        { transform: scale(1.07); }
  9%        { transform: scale(0.985); }
  14%       { transform: scale(1.012); }
  18%, 100% { transform: scale(1); }
}
@keyframes ceg-fab-welle {
  0%        { opacity: 0.5; transform: scale(1); }
  22%       { opacity: 0;   transform: scale(1.55); }
  100%      { opacity: 0;   transform: scale(1.55); }
}

@media (max-width: 640px) {
  .ceg-chrome .bleib-informiert__fab { width: 50px; height: 50px; }
  .ceg-chrome .bleib-informiert__fab-c { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .ceg-chrome .bleib-informiert__fab,
  .ceg-chrome .bleib-informiert__fab::after { animation: none; }
  .ceg-chrome .bleib-informiert__fab::after { opacity: 0; }
}


/* ===== 40-integration.css ===== */
/* Integration in die bestehende WordPress-/Divi-Seite.
 *
 * Diese Datei laeuft NICHT durch den Scoper: sie braucht Vorfahren-Bedingungen
 * (`.admin-bar .ceg-chrome`), die ein reiner Praefixer nicht ausdruecken kann.
 * Alle Regeln sind trotzdem auf `.ceg-chrome` beschraenkt.
 */

/* Der Kopfbereich liegt ausserhalb von `#page-container`, das im Child-Theme
   `overflow-x: hidden` traegt. Ohne eigenen Schutz koennte ein zu breites
   Dropdown eine horizontale Bildlaufleiste erzeugen. */
.ceg-chrome--kopf { overflow-x: clip; }

/* Kein `transform`, `filter`, `perspective`, `contain` oder `will-change` auf
   diesen Wrappern — sonst entsteht ein Containing Block und `position: fixed`
   der schwebenden Elemente bricht. Das ist eine Review-Regel, kein Stil. */
.ceg-chrome--kopf { position: relative; z-index: var(--ceg-z-kopf); }
.ceg-chrome .site-header { z-index: var(--ceg-z-kopf); }
.ceg-chrome .dropdown { z-index: var(--ceg-z-dropdown); }
.ceg-chrome .bleib-informiert__fab { z-index: var(--ceg-z-schwebend); }

/* Adminleiste: sie ist ab 601px fest positioniert (32px, unter 783px 46px) und
   unter 601px mitscrollend. Nur im festen Fall braucht der Dialog einen Versatz. */
@media screen and (min-width: 601px) {
  .admin-bar .ceg-chrome .mobile-menu[open] { top: 32px; height: calc(100% - 32px); }
}
@media screen and (min-width: 601px) and (max-width: 782px) {
  .admin-bar .ceg-chrome .mobile-menu[open] { top: 46px; height: calc(100% - 46px); }
}

/* Mobilmenue als natives <dialog>.
 *
 * Der Top-Layer schlaegt jeden z-index — auch `mystickyelements-pro` mit 99999 —
 * ohne Wettruesten. Die aus `global.css` uebernommenen Regeln gehen von einem
 * `<div>` mit `.open` aus; hier wird auf das Dialog-Verhalten umgestellt. */
.ceg-chrome.mobile-menu { display: none; }
.ceg-chrome.mobile-menu[open] { display: block; }
.ceg-chrome.mobile-menu {
  position: fixed; inset: 0;
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: #fff; color: var(--color-ink);
  overscroll-behavior: contain;
}
.ceg-chrome.mobile-menu::backdrop { background: rgb(0 0 0 / 45%); }

/* Ohne <dialog>-Unterstuetzung faellt das Menue auf einen festen Aufsatz
   zurueck; dann braucht es doch einen hohen z-index. */
.ceg-chrome.mobile-menu.ceg-mobil--fallback[open] { z-index: 99998; }


.ceg-chrome.bleib-informiert__dialog { border: 0; padding: 0; background: var(--color-paper); color: var(--color-ink); }
.ceg-chrome .bleib-informiert__panel { background: var(--color-paper); }
.ceg-chrome.bleib-informiert__dialog::backdrop { background: rgb(0 0 0 / 45%); }

/* Dropdowns oeffnen per Hover nur dort, wo es ein echtes Zeigegeraet gibt.
   Auf Touch fuehrt Hover sonst zu haengenden Menues. */
@media (hover: none), (pointer: coarse) {
  .ceg-chrome .nav-item:hover > .dropdown { display: none; }
}
/* Oeffnungslogik.
 *
 * Die uebernommene Regel `.nav-item:focus-within .dropdown{display:block}` haelt
 * das Dropdown offen, solange IRGENDEIN Element im Punkt den Fokus hat — auch
 * der Aufklapp-Knopf selbst. Nach ESC springt der Fokus zurueck auf den Knopf,
 * und das Menue klappt sofort wieder auf. Deshalb wird sie hier ersetzt:
 * offen ist, was der Knopf sagt, oder was den Fokus IM Dropdown hat. */
.ceg-chrome .nav-item > .dropdown { display: none; }
.ceg-chrome .nav-item:focus-within > .dropdown { display: none; }
.ceg-chrome .nav-item > .dropdown:focus-within { display: block; }
.ceg-chrome .nav-item > .ceg-dd-schalter[aria-expanded="true"] + .dropdown { display: block; }
@media (hover: hover) and (pointer: fine) {
  .ceg-chrome .nav-item:hover > .dropdown { display: block; }
}
.ceg-chrome .ceg-dd-schalter { cursor: pointer; }
.ceg-chrome .ceg-dd-schalter[aria-expanded="true"] .arrow { transform: rotate(180deg); }
.ceg-chrome .arrow { display: inline-block; transition: transform 0.15s ease; }

/* Sichtbarer Fokus — Divi entfernt Outlines an vielen Stellen. */
.ceg-chrome a:focus-visible,
.ceg-chrome button:focus-visible,
.ceg-chrome input:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Sprunglink zum Inhalt. */
.ceg-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-brand); color: #fff;
  padding: 12px 20px; font-weight: 600;
}
.ceg-skip:focus { left: 0; z-index: calc(var(--ceg-z-kopf) + 5); }

/* Nur fuer Screenreader. */
.ceg-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Suchfeld im Kopfbereich. */
.ceg-suche { display: none; }
.ceg-suche[data-offen="1"] { display: flex; align-items: center; gap: 6px; }
.ceg-suche input[type="search"] {
  border: 1px solid var(--color-rule); border-radius: 4px;
  padding: 6px 10px; font-size: 15px; min-width: 200px;
}

/* Anker unter dem Kopfbereich nicht verstecken. */
.ceg-chrome ~ #page-container [id] { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: reduce) {
  .ceg-chrome *,
  .ceg-chrome *::before,
  .ceg-chrome *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Das Child-Theme blendet in der Druckansicht `#main-header` aus. Diese Regel
   greift nach dem Tausch ins Leere, deshalb hier der Ersatz. */
@media print {
  .ceg-chrome { display: none !important; }
}

/* Oberpunkte ohne eigene Uebersichtsseite: gleiche Optik wie ein Link, aber
   kein Ziel. Besser als ein Klick, der sicher auf 404 fuehrt. */
.ceg-chrome .ceg-kein-ziel { cursor: default; }


.ceg-chrome .nav-item { display: flex; align-items: center; }
.ceg-chrome .nav-item > a,
.ceg-chrome .nav-item > .ceg-kein-ziel {
  padding-right: 6px;
}
.ceg-chrome .nav-item > .ceg-kein-ziel {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 6px 10px 16px;
  font-size: 15.5px; font-weight: 600; color: var(--color-ink);
  border-radius: 8px; white-space: nowrap;
}
.ceg-chrome .ceg-dd-schalter {
  display: flex; align-items: center;
  padding: 10px 12px 10px 0;
  border-radius: 8px;
  color: var(--color-ink);
  transition: color 0.2s, background 0.2s;
}
.ceg-chrome .nav-item:hover > a,
.ceg-chrome .nav-item:hover > .ceg-kein-ziel,
.ceg-chrome .nav-item:hover > .ceg-dd-schalter { background: #f7f8fa; color: var(--color-brand); }
.ceg-chrome .nav-item > a { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ceg-chrome .ceg-dd-schalter { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ceg-chrome .ceg-dd-schalter .arrow { font-size: 9px; opacity: 0.4; }
.ceg-chrome .nav-item:hover .ceg-dd-schalter .arrow,
.ceg-chrome .ceg-dd-schalter[aria-expanded="true"] .arrow { opacity: 0.7; }