:root {
/*      --acc-border: #e6e6e6;*/
      --acc-text: #222;
      --acc-muted: #6b7280; /* dezentes Grau */
/*      --acc-radius: 5px;
      --acc-padding: 1px;   1rem;  */
      --acc-transition: 180ms ease;
    }

    .acc {
      margin-top: 10px;
      border: 1px solid var(--acc-border);
      border-radius: var(--acc-radius);
      background: transparent;
    }

    .acc + .acc {
      margin-top: .75rem;
    }

    /* H4 + Trigger-Button */
    .acc h4 {
      margin: 0; 
      padding: 2px;
      font-size: 14px;  /* 1.125rem; /* h4-Feeling, dezent */
      font-weight: 600;
      color: var(--acc-text);
    }

    .acc h4 button {letter-spacing: 1px; font-family: 'Montserrat-Light'; font-weight: bold; margin-bottom: 20px;}
    .acc h4 span {font-size: 14px;}
   
    /* Button als Block-Header */
    .acc-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      padding: .9rem var(--acc-padding);
      background: transparent;
      border: 0;
      text-align: left;
      cursor: pointer;
    }

    /* Fokus sichtbar & schön */
    .acc-trigger:focus-visible {
      outline: 2px solid #94a3b8;
      outline-offset: 2px;
      border-radius: calc(var(--acc-radius) - 2px);
    }

    .acc-label {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      color: var(--acc-text);
    }

    /* Chevron links – dezent */
    .acc-chevron {
      width: 1.1em;
      display: inline-flex;
      flex: 0 0 auto;
      justify-content: center;
      align-items: center;
      color: var(--acc-muted);
      transition: transform var(--acc-transition);
    }

    /* Rotation bei geöffnetem Zustand */
    .acc-trigger[aria-expanded="true"] .acc-chevron {
      transform: rotate(90deg);
    }

    /* Content-Bereich */
    .acc-panel {
      padding: 0 var(--acc-padding) var(--acc-padding) var(--acc-padding);
      line-height: 1.6;
      color: #333;
    }

    /* optional: zarter Divider oben am Panel */
    .acc-panel::before {
      content: "";
      display: block;
      height: 1px;
      background: var(--acc-border);
      margin: 0 calc(var(--acc-padding) * -1) var(--acc-padding);
      opacity: .7;
    }

    /* Sanfte Show/Hide-Animation (max-height Trick) */
    .acc-panel[data-animate] {
      overflow: hidden;
      transition: grid-template-rows var(--acc-transition), opacity var(--acc-transition);
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
    }
    .acc-panel[data-animate] > div {
      min-height: 0; /* wichtig für grid-Animation */
    }
/*    .acc-trigger[aria-expanded="true"] + .acc-panel[data-animate] {
      grid-template-rows: 1fr;
      opacity: 1;
    }  */

    .acc-panel[data-animate][data-open="true"] {
      grid-template-rows: 1fr;
      opacity: 1;
    }

    /* der „aufblendende“ Bereich im Panel */
/*    .reveal {
      display: none;            nimmt vor dem Öffnen keinen Platz ein 
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 180ms ease, transform 180ms ease;
    }*/

    /* wenn sichtbar, sanft einblenden */
/*    .reveal.is-visible {
      opacity: 1;
      transform: none;
    }*/
    
    
    /* Standard: mobile first -> Tabs unsichtbar */
    .tabbar { display: none; }

/* 1) Versteckte Panels vollständig aus dem Flow nehmen */
.info-panel[hidden] {
  display: none !important;
  opacity: 0;
  transform: translateY(4px);
}

/* 2) Sichtbare Panels zeigen (hier darf display:block bleiben) */
.info-panel:not([hidden]) {
  display: block; /* bleibt */
  opacity: 1;
  transform: none;
  transition: opacity .18s ease, transform .18s ease;
}

/* 3) NEU – stellt sicher, dass der Inhalt immer sichtbar ist,
   auch wenn JS .is-visible zu spät setzt */
.info-panel:not([hidden]) .reveal {
  opacity: 1;
  transform: none;
}

/* 4) Basisanimation für .reveal */
.reveal {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

    
/* nur setzen, wenn in .acc-label keine eigenen Links/Buttons stecken */
.acc-label { pointer-events: none; }    
  
.atextMenu .hbtn.is-active { font-weight: 600;}

    /* Accordion nur mobil sichtbar */
@media (min-width:1000px) {
    .acc { display: none; }
    .tabbar { display: flex; }
    .tab-trigger[aria-selected="true"] { font-weight: 600; }
}