/* ========================================================================== */
/* ALEA – HEADER (Block 1)                                                    */
/* ========================================================================== */

:root{
  --alea-purple:#7454FF;
  --alea-ink:#0b1d3a;
  --alea-border:#DDE3EE;
  --alea-shadow:0 10px 30px rgba(2,23,61,.12);
}

/* Header Base */
[data-component="header"].header{
  background:var(--alea-purple)!important;
  color:#fff!important;
  position:static; top:auto !important; z-index:auto !important;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
[data-component="header"] .header-content{
  position:relative;
  display:flex; align-items:center; gap:12px;
  min-height:64px; padding:12px 16px;
}

/* Original Header-Picker etc. im Header aus */
[data-component="header"] .header-pickers,
[data-component="header"] .language-picker,
[data-component="header"] .version-picker,
[data-component="header"] [data-component="dropdown"]{
  display:none !important;
}

/* Toolbar rechts */
#alea-toolbar{
  margin-left:auto;
  display:flex; align-items:center; gap:12px;
  position:relative; z-index:5;
}

/* ===== Lupe =============================================================== */
#alea-toolbar .aleasearch-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:999px;
  background:#fff; color:var(--alea-purple);
  border:1px solid rgba(2,23,61,.1);
  box-shadow:0 4px 16px rgba(2,23,61,.12);
  cursor:pointer; pointer-events:auto; z-index:10;
}
#alea-toolbar .aleasearch-btn svg{ width:18px; height:18px; fill:currentColor; }

/* ===== Picker-Pills ======================================================= */
#alea-toolbar .pickers{ display:flex; align-items:center; gap:10px; }
#alea-toolbar .pill{
  display:inline-flex; align-items:center; gap:10px;
  min-height:36px; padding:8px 14px;
  background:#fff; color:var(--alea-ink);
  border:1px solid var(--alea-border); border-radius:999px;
  box-shadow:0 1px 2px rgba(2,23,61,.06);
  font:600 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  cursor:pointer; position:relative;
}
#alea-toolbar .pill .label{ white-space:nowrap; color:#111; }
#alea-toolbar .pill .caret{
  width:14px; height:14px; flex:0 0 14px;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4.47 6.47a.75.75 0 0 1 1.06 0L8 8.94l2.47-2.47a.75.75 0 1 1 1.06 1.06L8.53 10.53a.75.75 0 0 1-1.06 0L4.47 7.53a.75.75 0 0 1 0-1.06z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4.47 6.47a.75.75 0 0 1 1.06 0L8 8.94l2.47-2.47a.75.75 0 1 1 1.06 1.06L8.53 10.53a.75.75 0 0 1-1.06 0L4.47 7.53a.75.75 0 0 1 0-1.06z"/></svg>') center/contain no-repeat;
  background:#4b5b80;
}
#alea-toolbar .pill.lang .bubble{
  width:16px; height:16px; flex:0 0 16px;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.2 2 11.1c0 3.3 2.02 6.2 5 7.8V22l5.2-2.8c.5 0 .8 0 .8 0C18.7 19.2 22 15.6 22 11.1 22 6.2 17.52 2 12 2z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.2 2 11.1c0 3.3 2.02 6.2 5 7.8V22l5.2-2.8c.5 0 .8 0 .8 0C18.7 19.2 22 15.6 22 11.1 22 6.2 17.52 2 12 2z"/></svg>') center/contain no-repeat;
  background:var(--alea-purple);
}

/* ===== Dropdown Panels ==================================================== */
.alea-menu{
  position:absolute; left:50%; transform:translateX(-50%);
  top:calc(100% + 8px);
  min-width:220px; max-height:50vh; overflow:auto;
  background:#fff; border:1px solid var(--alea-border); border-radius:14px;
  box-shadow:var(--alea-shadow); padding:6px; z-index:1300; display:none;
  color:var(--alea-ink);
}
.alea-menu.is-open{ display:block; }
.alea-menu .item{ padding:10px 12px; border-radius:10px; cursor:pointer; color:#111; }
.alea-menu .item:hover,
.alea-menu .item[aria-selected="true"]{ background:#F4F6FB; }

/* ===== Drawer säubern (egal welche Variante) ============================= */
[data-component="drawer"] .drawer-search,
[data-component="drawer"] .drawer-pickers,
[data-component="drawer"] [data-component="search-bar"],
[data-component="drawer"] .search-bar-container,
[data-component="drawer"] .language-picker,
[data-component="drawer"] .version-picker,
[data-component="drawer"] .auto-width-select,
[data-component="drawer"] .picker,
[data-component="drawer"] .pickers,
[data-component="drawer"] [class*="picker"],
dialog[role="dialog"] .drawer-search,
dialog[role="dialog"] .drawer-pickers,
dialog[role="dialog"] [data-component="search-bar"],
dialog[role="dialog"] .language-picker,
dialog[role="dialog"] .version-picker,
dialog[role="dialog"] .auto-width-select,
dialog[role="dialog"] .picker,
dialog[role="dialog"] .pickers,
dialog[role="dialog"] [class*="picker"]{
  display:none !important;
}

/* ===== Sites-Suchleiste GLOBAL aus ====================================== */
[data-component="header"] [data-component="search-bar"],
.header-search,
.search-bar{
  display:none !important;
}

/* ===== Burger nur mobil als FAB ========================================= */
@media (max-width:1023.98px){
  .header-nav-toggle{
    position:fixed !important; right:16px; bottom:16px;
    inline-size:52px; block-size:52px;
    display:inline-flex !important; align-items:center; justify-content:center;
    border-radius:999px; background:var(--alea-purple); color:#fff; border:0;
    box-shadow:0 10px 24px rgba(2,23,61,.18); z-index:1500;
  }
  .header-nav-toggle [data-component="icon"], .header-nav-toggle svg{ color:#fff; fill:#fff; }
}
@media (min-width:1024px){ .header-nav-toggle{ display:none !important; } }

/* ===== Desktop Layout ==================================================== */
@media (min-width:769px){
  #alea-toolbar .pickers{ order:1; }
  #alea-toolbar .aleasearch-btn{ order:3; display:inline-flex !important; margin-left:12px; position:static; }
}

/* ===== Mobile Layout ===================================================== */
@media (max-width:768px){
  #alea-toolbar{ width:100%; margin-left:0; align-items:center; flex-direction:column; gap:8px; }
  #alea-toolbar .pickers{ order:1; width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; }
  #alea-toolbar .pill{ width:auto; max-width:90%; min-width:160px; justify-content:center; }
  /* Lupe fix oben rechts */
  #alea-toolbar .aleasearch-btn{ position:absolute; top:12px; right:16px; display:inline-flex !important; }
}

/* ===== Lightbox Suche (ersetzt komplett den bisherigen Block) ============ */
.alea-search-modal{
  position: fixed;
  inset: 0;
  display: none;            /* geschlossen */
  z-index: 2000;
  /* Stabilität mobil */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.alea-search-modal.is-open{
  /* geöffnet: kein Reflow-Jitter, saubere Zentrierung */
  display: grid;
  place-items: start center;
  padding: clamp(8px, 4vw, 24px);
}

/* Hintergrund abdunkeln + BLUR wie Viewport */
.alea-search-modal::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Panel passt sich dem verfügbaren Platz an, ohne die Seite zu verschieben */
.alea-search-panel{
  position: relative;               /* KEIN absolute/transform → weniger Wackeln */
  width: min(800px, 92vw);
  max-height: 80vh;                 /* nie höher als Bildschirm */
  overflow: auto;                   /* Inhalt scrollt im Panel */
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--alea-shadow, 0 20px 50px rgba(0,0,0,.18));
  padding: 16px;
  margin-top: clamp(24px, 8vh, 72px); /* optischer Abstand nach oben */
}

/* Header/Controls wie gehabt */
.alea-search-header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.alea-search-close{
  margin-left: auto;
  background: #F2F4F8;
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

/* Suchfeld – mobil ohne Zoom-Jump (>=16px!) */
.alea-search-field{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--alea-border, rgba(0,0,0,.12));
  border-radius: 12px;
}
.alea-search-field input{
  border: 0;
  outline: 0;
  flex: 1 1 auto;
  font: 500 16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial; /* 16px → verhindert iOS-Zoom */
  -webkit-text-size-adjust: 100%;
}

/* Optional: Scroll-Lock des Hintergrunds, ohne JS-Änderung (moderne Browser) */
@supports selector(body:has(.alea-search-modal.is-open)){
  body:has(.alea-search-modal.is-open){ overflow: hidden; }
}

/* Fallback: falls du im JS eine Klasse auf <body> setzt */
body.alea-search-open{ overflow: hidden; }


/* MOBILE PILL CENTERING — append at the end */
@media (max-width: 768px){
  /* Container der beiden Pills zentrieren */
  #alea-toolbar .pickers{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:auto;
    margin: 6px auto 0;
  }
  /* Jede Pill selbst mittig halten */
  #alea-toolbar .pill{
    margin:0 auto;
    width:max-content;
  }
}
/* MOBILE LOUPE ANCHOR — append at the end */
@media (max-width: 768px){
  [data-component="header"] .header-content{ position:relative; }
  #alea-toolbar .aleasearch-btn{
    position:absolute;
    right:16px;   /* bei Bedarf 12–20px feinjustieren */
    top:12px;     /* bei Bedarf 10–16px feinjustieren */
    transform:none;
    margin:0;
    z-index:5;
  }
}
/* HIDE PICKERS IN DRAWER — append at the end */
dialog[role="dialog"] .drawer-pickers,
dialog[role="dialog"] .drawer-section.drawer-pickers,
dialog[role="dialog"] [class*="language-picker"],
dialog[role="dialog"] [class*="version-picker"]{
  display:none !important;
}
/* MOBILE PILL CENTERING & HEADER SPACING */
@media (max-width: 768px){
  /* Headercontent bekommt etwas Luft, damit Lupe/Pills sich nie ins Gehege kommen */
  [data-component="header"] .header-content{
    padding-block: 8px 12px;   /* oben/unten Abstand im Header */
    min-block-size: 56px;      /* stabile Headerhöhe */
    position: relative;
  }

  /* Container der beiden Pills mittig, untereinander */
  #alea-toolbar .pickers{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    margin: 6px auto 0;
  }

  /* Jede Pill selbst mittig halten */
  #alea-toolbar .pill{
    margin: 0 auto;
    width: max-content;
  }
}
/* MOBILE LOUPE POSITION (rechtsbündig) */
@media (max-width: 768px){
  [data-component="header"] .header-content{ position: relative; }

  #alea-toolbar .aleasearch-btn{
    position: absolute;
    right: 16px;   /* ggf. 14–20 px feintunen */
    top: 10px;     /* ggf. 10–14 px feintunen */
    transform: none;
    z-index: 5;
    margin: 0;
  }
}
/* HIDE PICKERS IN MOBILE DRAWER */
dialog.drawer .drawer-section.drawer-pickers{
  display: none !important;
}

/* Absicherung für Fälle ohne .drawer-section (Build-Variante) */
dialog.drawer .drawer-pickers{
  display: none !important;
}

/* Falls ein Theme eigene Picker-Namen für Sprache/Version in den Drawer kopiert: */
dialog.drawer [class*="language-picker"],
dialog.drawer [class*="version-picker"]{
  display: none !important;
}
/***** MOBILE HEADER LAYOUT FIX *********************************************/
/* A) #alea-toolbar auf volle Breite bringen und Pills sauber zentrieren  */
@media (max-width: 768px){
  /* Der unmittelbare Header-Content dient als Positionier-Referenz */
  [data-component="header"] .header-content{
    position: relative;
    padding-inline: 16px;               /* stabiler Innenabstand */
    min-block-size: 56px;               /* konstante Header-Höhe mobil */
    align-items: center;
  }

  /* Der Toolbar-Container bekommt die volle Breite und zentriert seinen Inhalt */
  #alea-toolbar{
    flex: 1 1 100%;
    inline-size: 100%;
    display: grid;                      /* robustes, zentriertes Layout */
    grid-auto-flow: row;
    justify-items: center;              /* zentrale Ausrichtung */
    row-gap: 8px;
  }

  /* Die zwei Pills untereinander, mittig, ohne rechts-Shift */
  #alea-toolbar .pickers{
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    row-gap: 8px;
    width: 100%;
    margin: 0;                          /* kein ungewollter Restabstand */
  }

  /* Jede Pill selbst bleibt kompakt und mittig */
  #alea-toolbar .pill{
    width: max-content;
    margin: 0 auto;
  }
}

/* B) Lupe mobil aus dem Flexfluss lösen und bündig rechts im Header fixieren */
@media (max-width: 768px){
  #alea-toolbar .aleasearch-btn{
    position: absolute;
    top: 50%;
    right: 16px;                        /* ggf. 14–20px finetunen */
    transform: translateY(-50%);
    z-index: 10;                        /* über allen Header-Layern */
    margin: 0 !important;               /* Restabstände neutralisieren */
  }
}

/* C) Suchleiste (großes Input) mobil generell ausblenden – nur Lupe nutzen */
@media (max-width: 1024px){
  [data-component="header"] .header-search{
    display: none !important;
  }
}

/* D) Drawer: Picker konsequent ausblenden (nur im Drawer, Header-Pills bleiben) */
dialog.drawer .drawer-section.drawer-pickers,
dialog.drawer .drawer-pickers,
dialog.drawer auto-width-select.picker,
dialog.drawer .language-picker,
dialog.drawer .version-picker{
  display: none !important;
}

/* E) Falls Theme mobil die Pills-Spalte selbst wieder rechts schiebt – überstimmen */
@media (max-width: 768px){
  #alea-toolbar .pickers{
    justify-content: center !important;
    align-content: center !important;
  }
}

/* F) Sicherheit: Header-Logo nicht nach unten drücken (sporadischer Effekt) */
@media (max-width: 768px){
  .header .header-logo{ 
    block-size: 40px; 
    max-block-size: 100%;
    align-self: center;
  }
}

/* ========= ALEA – Mobile Toolbar Patch (non-destructive) ========= */

/* 0) Picker im mobilen Drawer ausblenden (nur im offenen Dialog) */
dialog[open] .drawer-pickers,
dialog[open] .drawer-section.drawer-pickers {
  display: none !important;
}

/* 1) Mobile Layout nur bis 768px */
@media (max-width: 768px) {
  /* Der Toolbar-Container soll die gesamte Breite nutzen,
     damit wir die Lupe nach ganz rechts schieben können. */
  #alea-toolbar {
    position: relative;
    z-index: 10;
    width: 100%;
    /* Wir FASSEN die Display-Art des Containers NICHT an,
       damit nichts "verschwindet". */
  }

  /* Die beiden Buttons (Version & Sprache) sauber zentriert, untereinander */
  #alea-toolbar .pickers {
    /* Wir zwingen nur die Kinder-Ausrichtung, nicht das Eltern-Display */
    display: flex !important;        /* sicher gegen grid/flex-Mischformen */
    flex-direction: column;          /* untereinander */
    align-items: center;             /* mittig */
    justify-content: center;
    width: 100%;
    max-width: 340px;                /* angenehme mobile Breite */
    margin-inline: auto;             /* Gesamtblock mittig */
    gap: 8px;
    padding-block: 8px;              /* etwas Luft, ohne Header zu quetschen */
  }

  /* Die einzelnen Pill-Buttons dürfen sich auf 100% strecken, bleiben aber mittig */
  #alea-toolbar .pickers > * {
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
  }

  /* 2) Such-Icon immer ganz rechts im Header */
  #alea-toolbar .aleasearch-btn {
    display: inline-flex;            /* robuste Zentrierung des SVGs */
    align-items: center;
    justify-content: center;

    margin-left: auto;               /* schiebt die Lupe ganz nach rechts */
    inline-size: 40px;
    block-size: 40px;
    border-radius: 999px;

    background: #fff;
    color: var(--alea-purple, #4F46F8);
    border: 1px solid rgba(34,23,61,.25);
    box-shadow: 0 4px 16px rgba(34,23,61,.12);
    z-index: 5;                      /* über Hero-Bild */
    /* KEIN position:absolute – wir bleiben nicht-invasiv */
  }

  /* 3) Große Suchleiste mobil ausblenden (du wolltest nur die Lupe) */
  .header-search { 
    display: none !important;
  }
}

/* ========= ALEA – Mobile Toolbar Fix (CSS-only, high specificity) ========= */

/* 0) Picker im mobilen Drawer verbergen (falls Scroll Sites sie einspeist) */
dialog[open] .drawer-pickers,
dialog[open] .drawer-section.drawer-pickers {
  display: none !important;
}

/* 1) Nur mobile Regeln anwenden */
@media (max-width: 768px) {

  /* 1.1 Toolbar selbst – nichts radikal umbauen, nur sicher ausrichten */
  header.header #alea-toolbar {
    /* wir lassen das vorhandene Layout bestehen, geben nur harte Ausrichtung */
    align-items: center !important;
    width: 100% !important;
    position: relative;
    z-index: 10;
  }

  /* 1.2 Lupe: immer ganz rechts */
  header.header #alea-toolbar .aleasearch-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;     /* schiebt nach ganz rechts */
    inline-size: 40px !important;
    block-size: 40px !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--alea-purple, #4F46F8) !important;
    border: 1px solid rgba(34,23,61,.25) !important;
    box-shadow: 0 4px 16px rgba(34,23,61,.12) !important;
  }

  /* 1.3 Die beiden Pill-Buttons (Version & Sprache): mittig untereinander  */
  header.header #alea-toolbar .pickers {
    display: flex !important;               /* gegen grid/flex Wechsel absichern */
    flex-direction: column !important;      /* untereinander */
    align-items: center !important;         /* zentriert */
    justify-content: center !important;
    width: 100% !important;
    max-width: 340px !important;
    margin-inline: auto !important;         /* Gesamtblock mittig */
    row-gap: 8px !important;
    padding-block: 8px !important;          /* etwas Luft ohne Header zu zerdrücken */
  }

  /* 1.4 Jedes Picker-Element darf sich vollbreit strecken, bleibt aber mittig */
  header.header #alea-toolbar .pickers > * {
    width: 100% !important;
    max-width: 340px !important;
    margin-inline: auto !important;
  }

  /* 1.5 Große Suchleiste mobil ausblenden – nur Icon bleibt */
  header.header .header-search {
    display: none !important;
  }
}
/* ===== Mobile-Layout des Toolbars hart fixieren ===== */
@media (max-width: 768px) {
  /* 2-Spalten-Grid im Toolbar: [Pickers][Lupe] */
  header[data-component="header"] #alea-toolbar{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding-inline: 16px !important; /* etwas Innenabstand, Logo bleibt groß */
  }

  /* Pickers immer in Spalte 1, zentriert, untereinander */
  header[data-component="header"] #alea-toolbar .pickers{
    grid-column: 1 / 2 !important;
    display: grid !important;
    justify-content: center !important;
    align-items: center !important;
    row-gap: 8px !important;      /* Abstand zwischen Version & Sprache */
    width: 100% !important;
    margin: 0 auto !important;
  }
  /* einzelne Pill-Buttons zentrieren */
  header[data-component="header"] #alea-toolbar .pickers > div,
  header[data-component="header"] #alea-toolbar .pickers > button{
    justify-self: center !important;
  }

  /* Lupe immer ganz rechts in Spalte 2 */
  header[data-component="header"] #alea-toolbar .aleasearch-btn{
    grid-column: 2 / 3 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    z-index: 5 !important;  /* bleibt klickbar über dem Hero */
  }

  /* Header insgesamt etwas „luftiger“, ohne Logo zu schrumpfen */
  header[data-component="header"]{
    /* Scroll Sites nutzt Block-Variablen — wir reduzieren nur den vertikalen Druck */
    --header-padding: 10px; /* sanft, damit das Logo nicht kleiner gedrückt wird */
  }

  /* Drawer-Picker (die zweite Kopie) definitiv ausblenden */
  dialog[role="dialog"] .drawer-pickers,
  dialog[open] .drawer-pickers{
    display: none !important;
  }
}

/* ===== Desktop: Suchfeld weg, nur Lupe rechts (falls noch nötig) ===== */
@media (min-width: 1024px){
  /* Safety: die große Suchleiste ausblenden, wenn die Lupe genutzt wird */
  .header-search{ display: none !important; }

  /* Lupe rechts halten */
  header[data-component="header"] #alea-toolbar .aleasearch-btn{
    justify-self: end !important;
    margin-left: 12px !important;
  }
}

/* ===== Universelle Failsafes (haben nur Wirkung, wenn nötig) ===== */

/* Falls ein höheres Layer die Zentrierung überschreibt */
header[data-component="header"] #alea-toolbar .pickers{
  justify-content: center !important;
  align-content: center !important;
}

/* Lupe-Button klickbar halten, wenn etwas darüber liegt */
header[data-component="header"] #alea-toolbar .aleasearch-btn{
  pointer-events: auto !important;
}
/* ===== ALEA – Mobile Header Fixes (nur Ergänzung) ===== */

@media (max-width: 768px) {

  /* 1) Header-Grundlayout: genug Platz + verlässliche Achse */
  header[data-component="header"] .header-content {
    /* übersteuert die product defaults */
    display: grid !important;
    grid-template-columns: 1fr auto; /* links: unsere Buttons (zentriert), rechts: Such-Icon */
    align-items: center !important;
    min-block-size: 56px !important;
    padding-inline: 12px 16px !important;
    position: relative !important;
  }

  /* 2) Unser Toolbar-Container sitzt auf der linken Grid-Spalte */
  header[data-component="header"] #alea-toolbar {
    grid-column: 1 !important;
    justify-self: center !important;
    width: 100% !important;
  }

  /* 3) Die beiden Picker: untereinander, sauber mittig, fixe Maxbreite */
  header[data-component="header"] #alea-toolbar .pickers {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 340px !important;  /* damit sie nicht anstoßen */
    margin: 0 auto !important;
  }

  /* 4) Einzelne "Pill"-Buttons wirklich zentrieren */
  header[data-component="header"] #alea-toolbar .pickers .pill {
    margin-inline: auto !important;
  }

  /* 5) Such-Icon immer ganz rechts, bündig */
  header[data-component="header"] #alea-toolbar .aleasearch-btn,
  header[data-component="header"] .aleasearch-btn {
    grid-column: 2 !important;
    justify-self: end !important;
    inline-size: 40px !important;
    block-size: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important; /* über Hero-Bild */
  }

  /* 6) Die Scroll-Sites-eigenen Header-Picker (die alte Zone) komplett ausblenden,
        damit nur unsere beiden "Pills" sichtbar sind. */
  header[data-component="header"] .header-pickers,
  header[data-component="header"] [data-component="header"] .header-pickers {
    display: none !important;
  }

  /* 7) Ganz wichtig: die Picker-Kopie im Drawer (Burger-Menü) ausblenden */
  dialog[open] .drawer-pickers,
  dialog .drawer-pickers {
    display: none !important;
  }

  /* 8) Der Header selbst darf das Logo nicht quetschen */
  header[data-component="header"] {
    align-items: center !important;
    /* keine extra Block-Paddings, wir steuern über .header-content */
  }
}

/* Desktop: Such-Icon rechts bleibt erhalten, die Suchleiste (falls Seite mit In-Page-Search)
   ist davon unabhängig. Nichts weiter nötig. */

/* === Minimal Override: Toolbar immer zentrieren ========================= */

/* Falls das Theme mit höherer Spezifität arbeitet, beide Selektoren gruppieren */
header[data-component="header"] #alea-toolbar,
#alea-toolbar {
  justify-content: center !important; /* wirkt auf Flex/Grid-Container */
  align-items: center !important;
  text-align: center;                 /* Fallback für Inline-/Block-Inhalte */
  margin-left: 0 !important;          /* neutralisiert evtl. right-push */
  margin-right: 0 !important;
}

/* Häufig sind direkte Kinder eigene Flex-Wrapper – ebenfalls zentrieren */
header[data-component="header"] #alea-toolbar > *,
#alea-toolbar > * {
  justify-content: center !important;
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* exakt diese Regel überschreibt deinen Screenshot-Eintrag */
@layer components {
  header.header { justify-content: center !important; }
}
/* === Mobile: Picker mittig, Such-Icon stabil rechts ===================== */
@media (max-width: 768px) {
  header[data-component="header"] #alea-toolbar {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    grid-auto-flow: row dense !important;
  }

  /* Standard: alle direkten Kinder in Spalte 1 … */
  header[data-component="header"] #alea-toolbar > * {
    grid-column: 1 !important;
  }

  /* … außer der Such-Button: explizit in Spalte 2, rechtsbündig */
  header[data-component="header"] #alea-toolbar .aleasearch-btn {
    grid-column: 2 !important;
    justify-self: end !important;
    align-self: center !important;

    /* Alles, was vorher “absolute” war, hart neutralisieren */
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;

    /* Sichtbarkeit sicherstellen */
    display: inline-flex !important;
    pointer-events: auto !important;
    z-index: auto !important;
  }
}
header.header {
  block-size: auto !important;
}
@media (max-width: 768px) {
  header[data-component="header"] #alea-toolbar .aleasearch-btn {
    position: relative !important;
    left: 100% !important; /* nach Bedarf 8–16px feinjustieren */
  }
}

/* === ALEA Fixed Footer – stabil, immer sichtbar ======================= */
:root{
  --alea-purple: #7454FF;
  --alea-fixed-footer-h: 90px;   /* Höhe des grauen Balkens */
  --alea-topup-size: 56px;       /* runde Buttons (gleich wie Mobile-Menu) */
  --alea-topup-bottom: 16px;     /* Abstand vom Rand */
}

/* Grauer Balken */
#alea-fixed-footer-bg{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--alea-fixed-footer-h);
  background: #f0f0f0;
  border-top: 1px solid var(--alea-purple);
  z-index: 1000;
  pointer-events: none;          /* nie Klicks abfangen */
}

/* Platz für den Balken schaffen */
body.has-fixed-footer{
  padding-bottom: var(--alea-fixed-footer-h);
}

/* === Mobile Drawer: Close über den runden Button unten rechts ============ */
@media (max-width: 1023.98px) {
  /* X in der Top-Bar ausblenden */
  header[data-component="header"] .drawer-toggle { display: none !important; }

  /* Wenn Menü offen: im runden Button ein weißes "X" zeigen */
  body.menu-open .header-nav-toggle svg { opacity: 0; }
  body.menu-open .header-nav-toggle::before,
  body.menu-open .header-nav-toggle::after {
    content: "";
    position: absolute;
    width: 22px; height: 2px;
    left: 50%; top: 50%;
    background: #fff; border-radius: 2px;
    transform-origin: center;
  }
  body.menu-open .header-nav-toggle::before { transform: translate(-50%, -50%) rotate(45deg); }
  body.menu-open .header-nav-toggle::after  { transform: translate(-50%, -50%) rotate(-45deg); }
}
/* Sichtbar und unten rechts – auch am Desktop */
@media (min-width: 1024px){
  .header-nav-toggle{
    position: fixed !important;
    right: 16px;
    bottom: 16px;
    display: inline-flex !important;
    inline-size: var(--alea-topup-size, 56px);
    block-size: var(--alea-topup-size, 56px);
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--alea-purple, #7454FF);
    color: #fff;
    box-shadow: 0 10px 24px rgba(2,23,61,.18);
    z-index: 1500 !important;
  }
}

/* Das alte 'am Desktop verstecken' neutralisieren, falls es woanders noch mal kommt */
.header-nav-toggle{ display: inline-flex !important; }

/* 1) Drawer-"X" im Kopf IMMER ausblenden (mobil + desktop) */
dialog.drawer .drawer-toggle,
dialog[role="dialog"] .drawer-toggle {
  display: none !important;
}

/* 2) FAB unten rechts: auch auf Desktop anzeigen, WENN Menü offen */
:root {
  --alea-fab-size: var(--alea-topup-size, 56px);
  --alea-fab-gap: var(--alea-topup-bottom, 16px);
}
body.menu-open .header-nav-toggle{
  position: fixed !important;
  right: var(--alea-fab-gap) !important;
  bottom: var(--alea-fab-gap) !important;
  inline-size: var(--alea-fab-size) !important;
  block-size: var(--alea-fab-size) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  background: var(--alea-purple, #7454FF) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(2,23,61,.18) !important;
  z-index: 2001 !important;
}

/* 2a) Im offenen Zustand das "X" zeichnen (statt Burger) */
body.menu-open .header-nav-toggle svg{ opacity: 0 !important; }
body.menu-open .header-nav-toggle::before,
body.menu-open .header-nav-toggle::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:22px; height:2px;
  background:#fff;
  border-radius:2px;
  transform-origin:center;
}
body.menu-open .header-nav-toggle::before{ transform:translate(-50%,-50%) rotate(45deg); }
body.menu-open .header-nav-toggle::after{  transform:translate(-50%,-50%) rotate(-45deg); }

/* 2b) Wenn Menü NICHT offen und Viewport >= 1024px: Button verbergen */
@media (min-width:1024px){
  body:not(.menu-open) .header-nav-toggle { display: none !important; }
}

/* 3) Während offenem Menü nichts anderes überlagern lassen */
body.menu-open #alea-fixed-footer-bg,
body.menu-open #alea-topup-btn { display: none !important; }

/* 0) Falls wir das X vorher versteckt haben: wieder einschalten */
dialog.drawer .drawer-toggle { display: inline-flex !important; }

/* 1) Im geöffneten Drawer das Close als runden Button unten rechts zeigen */
dialog.drawer[open] .drawer-toggle{
  position: fixed !important;              /* im Top-Layer, viewport-fixiert */
  right: var(--alea-topup-bottom, 16px) !important;
  bottom: var(--alea-topup-bottom, 16px) !important;
  inline-size: var(--alea-topup-size, 56px) !important;
  block-size: var(--alea-topup-size, 56px) !important;
  border-radius: 9999px !important;
  background: var(--alea-purple, #7454FF) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(2,23,61,.18) !important;
  z-index: 2147483647 !important;          /* Sicherheit, obwohl Top-Layer */
  align-items: center; justify-content: center;
}

/* 2) Das Icon weiß und in gleicher Größe wie Top-Up */
dialog.drawer[open] .drawer-toggle svg{
  width: 24px !important;
  height: 24px !important;
  fill: #fff !important;
  color: #fff !important;
}

/* 3) Reste der ursprünglichen Position neutralisieren (falls gesetzt) */
dialog.drawer[open] header.header .drawer-toggle{
  top: auto !important; left: auto !important;
}

/* 4) Optional: Burger während offenem Menü ausblenden (liegt ohnehin darunter) */
body.menu-open .header-nav-toggle{ opacity: 0; pointer-events: none; }

/* ===== ALEA Top-Up stabil & mittig (ohne iOS-Jump) ===================== */
:root{
  --alea-fixed-footer-h: 90px;   /* Fallback – JS setzt exakt */
  --alea-topup-size: 56px;
  --alea-topup-gap: 12px;        /* Abstand ÜBER dem grauen Footer */
  --alea-purple: #7454FF;
}

/* Der graue Footer-Hintergrund soll Klicks NICHT abfangen */
#alea-fixed-footer-bg { pointer-events: none; }

/* Button immer exakt mittig – ohne translateX und ohne env(...) */
#alea-topup-btn{
  position: fixed !important;
  inset-inline: 0 !important;          /* links+rechts 0 */
  margin-inline: auto !important;      /* sauber zentriert */
  bottom: max(8px, calc((var(--alea-fixed-footer-h, 90px) - var(--alea-topup-size, 56px)) / 2)) !important;
  inline-size: var(--alea-topup-size);
  block-size: var(--alea-topup-size);
  border: 0;
  border-radius: 9999px;
  display: inline-grid;
  place-items: center;
  background: var(--alea-purple);
  color: #fff;
  box-shadow: 0 10px 24px rgba(2,23,61,.18);
  z-index: 2000;                        /* über dem Footer */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ===== Desktop-Tabellen: komplett sichtbar, max. 700px ================== */
@media (min-width: 1024px){
  :root { --alea-table-max: 700px; }

  /* Wrapper dürfen nichts abschneiden */
  .theme-table,
  [data-component="table"]{
    overflow-x: visible !important;
    max-inline-size: 100% !important;
  }

  /* Überstimmt die Theme-Regeln mit hoher Spezifität */
  .fb-layout-body .theme-table [data-component="table"] > table,
  .fb-layout-body [data-component="attachments"] [data-component="table"] > table,
  .fb-layout-body [data-component="page-properties"] [data-component="table"] > table,
  [data-component="table"] > table{
    /* NICHT auf 100% zwingen */
    width: auto !important;
    inline-size: auto !important;

    /* Kappen & in Spalte einpassen */
    max-inline-size: min(100%, var(--alea-table-max)) !important;
    max-width: min(100%, var(--alea-table-max)) !important;

    margin-inline: 0 auto !important;   /* zentriert */
    table-layout: auto !important;
    box-sizing: border-box;
    border-collapse: collapse;
  }

  /* Inhalte dürfen nicht überstehen */
  [data-component="table"] img{
    max-inline-size: 100%;
    height: auto;
  }
}

#alea-topup-btn svg { width: 24px; height: 24px; fill: currentColor; }

/* Keine alten Wegblend-/Verschiebe-Effekte mehr */
.fixed-footer-item { transform: none !important; }
body.at-bottom-footer #alea-topup-btn { transform: none !important; }

/* Leicht kompakter auf sehr kleinen Geräten */
@media (max-width: 420px){
  :root{ --alea-topup-gap: 10px; }
}

/* Desktop: Tabellen nicht breiter als 700px und nie seitliches Scrollen */
@media (min-width: 1024px){
  .theme-table,
  [data-component="table"]{
    overflow-x: visible !important;
    max-inline-size: 100% !important;
  }
}
/* Desktop: Tabellen nie breiter als 700px, ohne seitliches Scrollen */
@media (min-width: 1024px){
  /* Wrapper sollen nicht schneiden und sich anpassen */
  .theme-table,
  [data-component="table"]{
    overflow-x: hidden !important;
    max-inline-size: 100% !important;
  }

  /* Sehr hohe Spezifität gegen Theme-Regeln */
  .fb-layout-body .theme-table [data-component="table"] > table,
  .fb-layout-body [data-component="attachments"] [data-component="table"] > table,
  .fb-layout-body [data-component="page-properties"] [data-component="table"] > table,
  [data-component="table"] > table{
    /* keine Zwangsbreite */
    width: auto !important;
    inline-size: auto !important;

    /* harte Kappung */
    max-width: min(100%, 700px) !important;
    max-inline-size: min(100%, 700px) !important;

    table-layout: auto !important;
    box-sizing: border-box !important;
    border-collapse: collapse !important;
    margin-inline: 0 auto !important; /* zentriert */
  }

  /* Inhalte in Zellen dürfen nicht überstehen */
  [data-component="table"] img,
  [data-component="table"] video,
  [data-component="table"] canvas{
    max-width: 100% !important;
    height: auto !important;
  }
}

/* === ALEA ToC – eigene Box unter der H1 ================================= */

/* Theme-/Viewport-ToC komplett deaktivieren (falls es noch irgendwo steckt) */
nav[data-component="toc"],
[data-vp-component="toc"],
.toc.sticky { display: none !important; }

/* Unsere neue Box */
.alea-toc-box{
  position: relative;
  display: block;
  margin-block: 12px 24px;                 /* ~20px Abstand gesamt */
  padding: 16px 20px;
  background: var(--alea-grey-50, #F5F6FA);
  border: 1px solid var(--alea-purple, #7454FF);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(2,23,61,.06);
  max-inline-size: min(100%, var(--alea-table-max, 600px)); /* wie Tabellen */
}

.alea-toc-box .toc-title{
  font-weight: 600;
  margin: 0 0 10px 0;
  color: var(--vp-theme-foreground-on-brand, #0D1B3E);
}

.alea-toc-box .toc-list{
  list-style: disclosure-open;
  margin: 0;
  padding-left: 14px;                      /* 10–15px Einzug für Einträge */
}

.alea-toc-box .toc-list li + li{ margin-top: 6px; }

.alea-toc-box .toc-list a{
  color: inherit;
  text-decoration: none;
}
.alea-toc-box .toc-list a:hover{ text-decoration: underline; }

/* Sicherheitsnetz – niemals eigenes Scrolling in der Box */
.alea-toc-box, .alea-toc-box *{
  overflow: visible !important;
  max-height: none !important;
  max-block-size: none !important;
}

/* === ALEA: Content-Breite bündig & mobil-safe ========================== */
/* Max. linker Einzug nur auf großen Screens, mobil bleibt es bündig */
:root{
  --alea-left-gap-max: 24px;  /* bei Bedarf anpassen (0–32px ist meist gut) */
}

/* Header, neue ToC-Box, Body etc. in der Content-Spur ausrichten */
.fb-layout-container > *{
  /* responsiv: von 0px (Phone) bis max 24px (Desktop) links, rechts auto */
  margin-inline: clamp(0px, 12vw, var(--alea-left-gap-max)) auto !important;
}

/* Wenn du auf Phones ABSOLUT bündig willst, fix: */
@media (max-width: 767px){
  .fb-layout-container > *{
    margin-inline: 0 auto !important;   /* links 0, rechts auto */
  }
}
@media (min-width: 1024px){
  :root{ --alea-left-gap-max: 180px; } /* z.B. 28–40px testen */
}

/* === ALEA: Sidebar hellblau + Content ohne linken Gap ================== */

/* 1) Content nicht mehr zentrieren: margin-inline:auto → 0 */
body .article-page {
  margin-inline: 0 !important;              /* entfernt die linke Lücke */
  /* optional, nur falls das Theme die Breite begrenzt: */
  /* max-inline-size: none !important;     // auskommentiert lassen, nur bei Bedarf aktivieren */
}

/* 2) Desktop: linker Navigationsbereich hellblau einfärben */
@media (min-width: 1024px) {
  :root { --alea-nav-bg: #E9F8FB; }         /* alea Hellblau – bei Bedarf anpassen */

  /* Haupt-Container der Navigation + Body einfärben */
  .navigator,
  .navigator .navigator-nav,
  .navigator .navigator-nav-body {
    background: var(--alea-nav-bg) !important;
  }

  /* dezente Trennlinie zur Inhaltsfläche (optional) */
  .navigator {
    border-inline-end: 1px solid #7454FF;
  }
}

/* 3) Safety: Hauptinhalt bleibt weiß (falls Sidebar-Farbe „durchscheint“) */
.article-page main, 
.article-page .main-content {
  background: #fff;
}

/* === ALEA: Mobile-Menü (Drawer) vollflächig hellblau ================== */
@media (max-width: 1023px) {
  /* Panel/Body des Menüs einfärben */
  .navigator .navigator-nav,
  .navigator .navigator-nav-body {
    background-color: #E9F8FB !important;
  }

  /* Wenn das Menü per Checkbox/Button geöffnet ist */
  .navigator > #navigator-state:checked ~ #navigator-nav,
  .navigator > #navigator-toggle[aria-expanded="true"] ~ #navigator-nav {
    background-color: #E9F8FB !important;
  }

  /* Fallbacks für Off-Canvas-/Drawer-Wrapper (versch. Themes) */
  .navigator .navigator-drawer,
  .navigator .drawer,
  .navigator .offcanvas,
  .navigator .off-canvas {
    background-color: #E9F8FB !important;
  }
}
/* === ALEA: Mobile Drawer (dialog.drawer) ============================== */
@media (max-width: 1023px) {
  /* Komplettes Drawer-Fenster + alle Sektionen hellblau */
  dialog.drawer[open],
  dialog.drawer[open] .drawer-section,
  dialog.drawer[open] .drawer-nav {
    background-color: #E9F8FB !important;
  }

  /* Grundzustand der Listenzeilen im Drawer: hellblau */
  dialog.drawer[open] .tree .tree-item-header {
    background-color: #E9F8FB !important;
  }

  /* Hover/Fokus: weiß */
  dialog.drawer[open] .tree .tree-item-header:hover,
  dialog.drawer[open] .tree .tree-item-header:focus-within {
    background-color: #FFFFFF !important;
  }

  /* Aktuelle Seite: weiß (überschreibt Theme-Regel mit var(--theme-primary-color)) */
  dialog.drawer[open] .tree .tree-item-header:has(> [aria-current="page"]) {
    background-color: #FFFFFF !important;
  }
}

/* === ALEA: Mobile-Tabellen – volle Containerbreite, nichts abgeschnitten === */
@media (max-width: 1023px) {
  /* Wrapper auf Spaltenbreite (nicht Viewportbreite) ziehen */
  .theme-table,
  [data-component="table"]{
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    width: 100% !important;
    margin-inline: 0 !important;
    overflow-x: visible !important;   /* nichts „verstecken“ */
    box-sizing: border-box;
  }

  /* Das echte <table> passt sich dem Wrapper an */
  .theme-table > table,
  [data-component="table"] > table{
    width: 100% !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse;
  }

  /* Medien in Zellen skalieren mit */
  .theme-table :is(img, svg, video, iframe),
  [data-component="table"] :is(img, svg, video, iframe){
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
}

/* Falls vorhanden BITTE entfernen (sonst wird rechts abgeschnitten):
   html, body, .article-page, .main-content { overflow-x: hidden !important; } */

/* === ALEA: Desktop Sidebar – Hover-Hintergrund weiß ================== */
@media (min-width: 1024px) {
  .navigator .tree .tree-item-header:hover,
  .navigator .tree .tree-item-header:focus-within {
    background-color: #FFFFFF !important;
  }
}
/* === ALEA: Desktop Sidebar – aktiver Eintrag weiß ================== */
@media (min-width: 1024px) {
  /* Aktuelle Seite (current page) */
  .navigator .tree .tree-item-header:has(> [aria-current="page"]) {
    background-color: #FFFFFF !important;
  }
}
/* ALEA: ToC auf Startseite mit Hero-Layout ausblenden */
main.article-overview-page.hero-layout .alea-toc-box {
  display: none !important;
}

/* === ALEA: Accordion Styles ===================================== */

/* Grundbox Accordion */
.items.accordion {
  background-color: #E9F8FB !important;  /* Alea-Hellblau */
  border: 1px solid #6B4EFF !important;  /* Alea-Lila */
  border-radius: 8px !important;
  overflow: hidden;
}

/* Einzelne Einträge – ohne Unterstriche */
.items.accordion .tree-item-header {
  border: none !important;
  transition: background-color 0.2s ease;
}

/* Hover-State: Hintergrund Weiß */
.items.accordion .tree-item-header:hover {
  background-color: #FFFFFF !important;
}

/* Aktiver / aktueller Eintrag: ebenfalls Weiß */
.items.accordion theme-disclosure[open] .tree-item-header,
.items.accordion theme-disclosure[aria-current="page"] .tree-item-header {
  background-color: #FFFFFF !important;
}

/* Pfeil-Button bleibt rechts */
.items.accordion theme-disclosure > button {
  margin-left: auto !important;
}

/* === ALEA: Desktop – Navigator Sidebar volle Höhe erlauben ============== */
@media (min-width: 1024px) {
  .navigator {
    block-size: auto !important;          /* überschreibt calc(100dvh - …) */
    max-height: none !important;          /* keine Begrenzung */
    height: auto !important;              /* sicherstellen, dass sie mitwächst */
    overflow-y: visible !important;       /* Scrollbar verhindern, falls geerbt */
  }
}
/* Nur 2-Spalten-Tabellen (keine dritte Spalte vorhanden) auf 50/50 setzen */
.theme-table [data-component="table"] > table
:has(> tbody > tr > :nth-child(2))
:not(:has(> thead > tr > :nth-child(3)))
:not(:has(> tbody > tr > :nth-child(3))) {
  table-layout: fixed !important;   /* Breitenberechnung fixen */
}

.theme-table [data-component="table"] > table
:has(> tbody > tr > :nth-child(2))
:not(:has(> thead > tr > :nth-child(3)))
:not(:has(> tbody > tr > :nth-child(3)))
> :is(thead,tbody,tfoot) > tr > :is(th,td):nth-child(1),
.theme-table [data-component="table"] > table
:has(> tbody > tr > :nth-child(2))
:not(:has(> thead > tr > :nth-child(3)))
:not(:has(> tbody > tr > :nth-child(3)))
> :is(thead,tbody,tfoot) > tr > :is(th,td):nth-child(2) {
  width: 50% !important;            /* exakt halbieren */
}

/* Inhalte zähmen, damit nichts aufzieht */
.theme-table table td, .theme-table table th { overflow-wrap:anywhere; word-break:break-word; }
.theme-table table img, .theme-table table svg { max-width:100% !important; height:auto !important; display:block; margin:0 auto; }

/* 1) Deutsche Silbentrennung in Tabellenzellen */
:lang(de) .theme-table table th,
:lang(de) .theme-table table td {
  hyphens: auto;               /* echte Silbentrennung */
  -webkit-hyphens: auto;
  word-break: normal;          /* KEIN willkürliches Brechen mehr */
  overflow-wrap: break-word;   /* bricht nur, wenn nötig (lange URLs etc.) */
}

/* 1b) Kurze Wörter möglichst nicht trennen (Browser-Support variiert) */
:lang(de) .theme-table table th,
:lang(de) .theme-table table td {
  hyphenate-limit-chars: 6 3 3;          /* min Wortlänge 6, vor/nach 3 */
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-lines: 2;
}

/* 2) Medien in Zellen zähmen */
.theme-table table img,
.theme-table table svg {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* 3) Spaltenbreiten erzwingen – 50/50 bzw. 33/33/33 */
.theme-table [data-component="table"] > table
:has(> tbody > tr > :nth-child(2))
:not(:has(> thead > tr > :nth-child(3)))
:not(:has(> tbody > tr > :nth-child(3))) {
  table-layout: fixed !important;
}
.theme-table [data-component="table"] > table
:has(> tbody > tr > :nth-child(2))
:not(:has(> thead > tr > :nth-child(3)))
:not(:has(> tbody > tr > :nth-child(3)))
> :is(thead,tbody,tfoot) > tr > :is(th,td):nth-child(-n+2) { width:50% !important; }

.theme-table [data-component="table"] > table
:has(> tbody > tr > :nth-child(3))
:not(:has(> thead > tr > :nth-child(4)))
:not(:has(> tbody > tr > :nth-child(4))) {
  table-layout: fixed !important;
}
.theme-table [data-component="table"] > table
:has(> tbody > tr > :nth-child(3))
:not(:has(> thead > tr > :nth-child(4)))
:not(:has(> tbody > tr > :nth-child(4)))
> :is(thead,tbody,tfoot) > tr > :is(th,td):nth-child(-n+3) { width:33.3333% !important; }

/* TOC – Marker als lila Dreieck, zentriert; alter Streifen wird überschrieben */
nav.alea-toc-box .toc-list { padding-left: 0; }
nav.alea-toc-box .toc-list li {
  list-style: none !important;
  position: relative;
  padding-left: 1.25em; /* Platz für Dreieck */
}

/* Reset + neuer Marker */
nav.alea-toc-box .toc-list li::before {
  /* alter Streifen sicher abschalten */
  background: none !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;

  /* neuer Marker */
  content: "▾" !important;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* vertikal mittig zur Zeile */
  color: var(--alea-purple, #7454FF) !important;
  font-size: 1.3em;
  line-height: 1;
}

/* Einrückung je Heading-Level */
nav.alea-toc-box .toc-list li[data-toc-level="1"] { padding-left: 1.25em; font-weight: 600; }
nav.alea-toc-box .toc-list li[data-toc-level="2"] { padding-left: calc(1.25em + 12px); }
nav.alea-toc-box .toc-list li[data-toc-level="3"] { padding-left: calc(1.25em + 24px); }
nav.alea-toc-box .toc-list li[data-toc-level="4"] { padding-left: calc(1.25em + 36px); }
nav.alea-toc-box .toc-list li[data-toc-level="5"] { padding-left: calc(1.25em + 48px); }
nav.alea-toc-box .toc-list li[data-toc-level="6"] { padding-left: calc(1.25em + 60px); }

/* ALEA Headline-Styling – nur außerhalb von Tabellen */
.article-body :is(h2, h3, h4, h5, h6):not(:where(table *, .theme-table *)) {
  position: relative;
  border-top: 1px solid rgba(116, 84, 255, 0.6); /* alea-lila mit leichter Transparenz */
  padding-top: 20px;
  margin-top: 40px;
  scroll-margin-top: 120px; /* TOC-Anchor-Korrektur */
  transition: border-color 0.2s ease;
}

/* kleinere Headlines dichter am Text */
.article-body :is(h4, h5, h6):not(:where(table *, .theme-table *)) {
  padding-top: 16px;
  margin-top: 32px;
}

/* Hover-Effekt nur außerhalb von Tabellen */
.article-body :is(h2, h3, h4, h5, h6):not(:where(table *, .theme-table *)):hover {
  border-color: #7454FF;
}

/* Desktop: Content + Tabellen-Container strikt auf 700px begrenzen */
@media (min-width:1024px){
  /* Haupt-Content */
  .article-page .fb-layout-container,
  .article-page .article-body.fb-layout-body,
  .article-page [data-searchable="content"].fb-layout-body {
    max-width: 700px !important;
  }

  /* Scroll-Sites Tabellen: Inline-Var --max-width ignorieren, echte max-width erzwingen */
  .article-page .theme-table {
    max-width: 700px !important;     /* schlägt inline --max-width */
    max-inline-size: 700px !important;
  }

  /* Tabellen-Inhalt nicht überbreit werden lassen */
  .article-page .theme-table > table {
    width: 100% !important;
    max-width: 700px !important;
  }
}
/* Desktop: zentralen Content-Wrapper strikt auf 700px setzen */
@media (min-width:1024px){
  /* äußerer Artikel-Container */
  .article-page .fb-layout-container {
    max-width: 700px !important;
    max-inline-size: 700px !important;
  }
  /* eigentlicher Body (Fallback, falls Container greift) */
  .article-page .article-body.fb-layout-body,
  .article-page [data-searchable="content"].fb-layout-body {
    max-width: 700px !important;
    max-inline-size: 700px !important;
  }
}
/* Scroll Sites – alles, was im Artikel per Inline --max-width begrenzt wird, auf 700px setzen */
@media (min-width:1024px){
  .article-page :is(.fb-layout-container, .fb-layout-body, [data-searchable="content"],
                    .theme-table, [data-component], .panel, .panel-content)[style*="--max-width"]{
    max-width: 700px !important;
    max-inline-size: 700px !important;
    margin-inline: auto !important;
  }
}
@media (min-width:1024px){
  /* 1) Content-Spalte im Grid auf 700 px */
  .article-page .main-content{
    grid-template-columns: 700px minmax(0, 700px) 1fr !important;
  }
  /* 2) Innerer Wrapper darf nicht kleiner klemmen */
  .article-page .fb-layout-container,
  .article-page .article-body.fb-layout-body,
  .article-page [data-searchable="content"].fb-layout-body{
    max-width: none !important;     /* alte 600er-Grenze neutralisieren */
    max-inline-size: none !important;
    width: 100% !important;         /* Track vollständig ausfüllen */
    justify-self: stretch !important;
    place-self: stretch !important;
  }
}
[data-component="child-pages"] > ul {
  border: 1px solid #7454FF !important; /* alea-lila */
  border-radius: var(--K15t--radius-large, 8px);
  background-color: var(--K15t--surface-raised, #fff);
}
/* Kopfspalten neutral, keine Link-Optik */
[data-component="table"] thead th,
[data-component="table"] thead th *,
[data-component="table"] tbody tr:first-child th,
[data-component="table"] tbody tr:first-child th * {
  color: #0c0c0c !important;
  text-decoration: none !important;
  background: #DEEBF7 !important;
}

/* Interaktion im Kopf deaktivieren (zusätzliche Sicherheit) */
[data-component="table"] thead th,
[data-component="table"] tbody tr:first-child th {
  pointer-events: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Sortier-Icons verstecken (falls noch gerendert) */
[data-component="table"] thead th button span,
[data-component="table"] thead th button span::after,
[data-component="table"] tbody tr:first-child th button span,
[data-component="table"] tbody tr:first-child th button span::after {
  display: none !important;
  content: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* === ALEA / Scroll Sites: iFrame Darstellung ========================== */
section.article-body iframe,
.content iframe,
iframe[data-component="iframe"] {
  width: 100% !important;
  border: 3px solid #7454FF !important;  /* alea-lila */
  overflow: hidden !important;
  min-height: 200vh !important;          /* großzügige Höhe – kein Scrollen */
  display: block !important;
  margin: 0 auto !important;
}

/* Einheitliche Regel auch für Mobilgeräte */
@media (max-width: 900px) {
  section.article-body iframe,
  .content iframe,
  iframe[data-component="iframe"] {
    min-height: 220vh !important;        /* gleicher Wert wie Desktop */
  }
}

/* ===== Expand Styling – finale Version mit ursprünglichem Pfeil ===== */

/* Kopfbereich (Expand-Button) */
.expand-control {
  font-size: 1.1rem !important;
  font-weight: 300 !important;
  color: #000 !important;
  background-color: #fff !important;
  border: 1px solid #7454FF !important;
  border-radius: 20px !important;
  padding: 0.8rem 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  gap: 0.4rem !important; /* Abstand zwischen Text und Pfeil */
  font-style: italic !important;
}
}

/* Rahmenfarbe bleibt gleich, offen/zu */
details.expand[open] .expand-control,
details.expand .expand-control {
  border-color: #7454FF !important;
}

/* ===== Pfeil im Expand-Button vollflächig in Alea-Lila (#7454FF) ===== */
.expand-control::after {
  content: "";
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: 0.3rem !important;
  background-color: #7454FF !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M5 3l6 5-6 5z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M5 3l6 5-6 5z'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.25s ease !important;
  transform-origin: center center !important;
}

/* Wenn geöffnet: Pfeil zeigt nach unten */
details[open] summary.expand-control::after {
  transform: rotate(90deg);
}

/* Ausgeklappter Bereich */
.expand-body {
  background-color: #fff !important;
  border: 1px solid #7454FF !important;
  border-top: none !important;
  border-radius: 20px 20px 20px 20px !important;
  padding: 1rem !important;
}
/* ===== Zusatz: Entfernt den weißen Scroll Sites Außenrahmen ===== */

/* Entfernt oder überschreibt den neutralen Standardrahmen */
.expand {
  border: none !important;
  box-shadow: none !important;
}

/* Optional: Falls Scroll Sites per Table-Container zusätzlich Rahmen zieht */
[data-component="table"] .expand {
  border: none !important;
  box-shadow: none !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* Falls Scroll Sites via CSS-Var den Border erzwingt */
:root {
  --K15t-border-neutral: transparent !important;
  --K15t-border-width: 0px !important;
}

/* ========== TABLE STYLING FIX FÜR SCROLL SITES ========== */

/* Rahmenfarbe für alle Tabellen innerhalb Scroll-Sites */
scroll-shadow table,
scroll-shadow td,
scroll-shadow th {
  border: 1px solid #7454FF !important;
  border-collapse: collapse !important;
}

/* Falls Scroll Sites Variablen verwendet – überschreiben */
scroll-shadow {
  --K15t-border-neutral: #7454FF !important;
  --K15t-border-width: 1px !important;
}

/* Wenn eine Zelle den Confluence-Hintergrund #998dd9 hat → ersetzen */
scroll-shadow td[style*="#998dd9"],
scroll-shadow th[style*="#998dd9"] {
  background-color: #7454FF !important;
}

/* Links in lila Zellen */
scroll-shadow td[style*="#998dd9"] a,
scroll-shadow th[style*="#998dd9"] a {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Einheitliches Padding und Textausrichtung */
scroll-shadow td,
scroll-shadow th {
  padding: 0.7rem 0.8rem !important;
  vertical-align: middle !important;
}

/* ===== 1. Tabellenzellen: Standardverhalten beibehalten ===== */
[data-component="table"] td {
  display: table-cell !important;
  text-align: left !important;        /* Standard-Text bleibt linksbündig */
  vertical-align: top !important;
  border: 1px solid #7454FF !important;
  border-collapse: collapse !important;
}

/* ===== 2. Nur Zellen mit Expand-Bereichen mittig ausrichten ===== */
[data-component="table"] td:has(details.expand) {
  text-align: left !important;      /* Zelle selbst mittig */
  vertical-align: middle !important;
}

/* ===== 3. Expand-Bereich immer untereinander, zentriert in der Zelle ===== */
[data-component="table"] td details.expand {
  display: block !important;          /* Jede Expand-Box nimmt volle Breite */
  margin: 0 auto 10px auto !important;
  text-align: center !important;      /* Button mittig */
  width: 100% !important;             /* Immer ganze Zellenbreite */
  max-width: 500px !important;        /* Optional: begrenzen für Lesbarkeit */
}

/* ===== 4. Expand-Button (Summary) mittig, einzeilig, schön skaliert ===== */
[data-component="table"] td details.expand summary.expand-control {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  white-space: nowrap !important;     /* Kein Zeilenumbruch */
  padding: 0.6em 1.5em !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* ===== 5. Expand-Body-Inhalt bleibt linksbündig (für Text etc.) ===== */
[data-component="table"] td details.expand .expand-body {
  text-align: left !important;
  margin-top: 0.5em !important;
}

/* ===== 5.4 Optional: Randdicke fixieren ===== */
[data-component="table"] {
  border-collapse: collapse !important;
}
/* ===== Fix: Inhalt im Expand-Body bleibt linksbündig ===== */
[data-component="table"] details.expand .expand-body {
  text-align: left !important;
}
/* Ersetze das Standard-Lila (#c0b6f2) durch das transparente alea-Lila (#7454FF54) */
.theme-table td[style*="#c0b6f2"],
.theme-table th[style*="#c0b6f2"],
[data-component="table"] td[style*="#c0b6f2"],
[data-component="table"] th[style*="#c0b6f2"] {
  --bg-color: #7454FF30 !important;
  background-color: #7454FF30 !important;
}

/* Button-Style */
a[href*="youtu"], .alea-play-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #7454ff !important;
  color: #fff !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: 2rem !important;
  padding: 0.9rem 1.8rem !important;
  width: fit-content !important;
  margin: 1rem auto !important;
  font-size: 1.05rem !important;
  box-shadow: 0 4px 10px rgba(116, 84, 255, 0.35) !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

a[href*="youtu"]:hover, .alea-play-button:hover {
  background-color: #5c3de0 !important;
  transform: scale(1.03) !important;
  box-shadow: 0 6px 16px rgba(116, 84, 255, 0.45) !important;
}

/* Overlay */
.alea-video-overlay {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 1rem;
  box-sizing: border-box;
}

/* YouTube-Player */
.alea-video-overlay iframe {
  width: 90%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}

/* Mobile Anpassung */
@media (max-width: 600px) {
  a[href*="youtu"], .alea-play-button {
    padding: 0.7rem 1.4rem !important;
    font-size: 0.95rem !important;
  }
  .alea-video-overlay iframe {
    width: 100%;
    border-radius: 8px;
  }
 
}
/* === ALEA YouTube Video Overlay – vollständiger Ersatzblock === */
.alea-video-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
}

/* === ALEA Video im Overlay – vergrößerte Darstellung === */
.alea-video-overlay iframe {
  width: 100vw !important;
  height: 95vh !important;
  max-width: 600px !important;
  border: none !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  transform: scale(1.35) !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5) !important;
}

/* Mobile-Feinanpassung */
@media (max-width: 768px) {
  .alea-video-overlay iframe {
    width: 100vw;
    height: 100vh;
    transform: scale(1.95);
  }
}

/* === ALEA Video Close Button – Finaler Block === */
.alea-close-btn {
  position: absolute !important;
  top: 4% !important;
  right: 4% !important;
  transform: translate(25%, -25%) !important; /* leicht über der Ecke des Videos */
  background: rgba(255, 255, 255, 0.95) !important;
  color: #000 !important;
  font-size: 1.8rem !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.35) !important;
  z-index: 10002 !important;
  transition: all 0.25s ease !important;
}

.alea-close-btn:hover {
  background: #7445ff !important; /* Alea-Lila */
  color: #fff !important;
}
/* HubSpot Chat ausblenden, wenn Overlay aktiv ist */
body:has(.alea-video-overlay) #hubspot-messages-iframe-container {
  display: none !important;
}

/* === Overlay allgemein === */
.alea-pdf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease;
}

/* === PDF-Frame === */
.alea-pdf-frame {
  width: 85vw;
  height: 85vh;
  border: none;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

/* Mobile optimiert */
@media (max-width: 768px) {
  .alea-pdf-frame {
    width: 95vw;
    height: 90vh;
  }
}

/* === Schließen-Button === */
.alea-close-btn {
  position: absolute;
  top: 4%;
  right: 4%;
  transform: translate(25%, -25%);
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  font-size: 1.8rem;
  font-weight: bold;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  transition: all 0.25s ease;
}
.alea-close-btn:hover {
  background: #7445ff;
  color: #fff;
}

/* === PDF-Button Style === */
.alea-pdf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.9em 1.6em;
  background: #7445ff;
  color: #fff !important;
  border-radius: 100px;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 6px 16px rgba(116, 69, 255, 0.35);
  cursor: pointer;
  transition: all 0.25s ease;
  margin: 1.2rem auto;
}
.alea-pdf-button:hover {
  background: #5b32cc;
  box-shadow: 0 8px 18px rgba(116, 69, 255, 0.45);
}

/* === Einblendeffekt === */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ——— ALEA KI SUCHEDITORIAL unterhalb der Suche ——— */
body[data-path*="/search"] .alea-ai-container {
  margin: 1.5rem auto;
  max-width: 640px;
  padding: 1.5rem;
  background: #f0f0f0;       /* wie gewünscht: #c6c6c6 bzw hellgrau */
  border: 1px solid rgba(107,46,191,0.15);
  border-radius: 20px;
  text-align: center;
  font-family: "Inter", sans-serif;
}
body[data-path*="/search"] .alea-ai-container h2 {
  color: #5b21b6;
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
}
body[data-path*="/search"] .alea-ai-container input {
  width: calc(100% - 24px);
  padding: 12px 12px;
  font-size: 1rem;
  border: 2px solid #6b2ebf;
  border-radius: 20px;
  margin-bottom: 1rem;
}
body[data-path*="/search"] .alea-ai-container button {
  background-color: #6b2ebf;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 14px 28px;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
body[data-path*="/search"] .alea-ai-container button:hover {
  background-color: #5520a0;
}

/* ===== SHARED OVERLAY ===== */
.alea-video-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.85) !important;
  z-index: 999999 !important;
  padding: 0 !important;
}

/* ===== CLOSER ===== */
.alea-close-btn {
  position: fixed !important;
  z-index: 1000000 !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 2rem !important;
  border: none !important;
  border-radius: 50% !important;
  width: 46px !important;
  height: 46px !important;
  cursor: pointer !important;
}

/* ===== STANDARD YOUTUBE ===== */
.alea-video-overlay iframe {
  width: 80vw !important;
  height: 45vw !important;
  max-width: 1200px !important;
  max-height: 675px !important;
  object-fit: contain !important;
  border: none !important;
}

/* ===== SHORTS: HOCHKANT ===== */
.alea-video-overlay.alea-short-video iframe {
  width: 45vh !important;
  height: 70vh !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  object-fit: contain !important;
}

/* MOBILE FIX */
@media (max-width: 768px) {
  .alea-video-overlay iframe {
    width: 92vw !important;
    height: 52vw !important;
  }

  .alea-video-overlay.alea-short-video iframe {
    width: 70vw !important;
    height: 45vh !important;
  }
}