/* ===== Summary (Desktop: sticky; Mobile: Bottom Sheet bleibt) ===== */

:root{
  /* Typo */
  --topbar-height: 64px;  /* große Headlines */
}

@media (max-width:900px){
#summary, .summary, aside#summary, aside.summary{
  grid-column:2;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow: 0 8px 24px rgba(2,8,23,.06);
  padding-top:5px;
  padding-bottom:5px;
  position: sticky; 
  max-height: calc(100dvh - var(--topbar-height, 64px) - 56px);
  overflow: auto;
  justify-self: stretch; align-self: start; z-index:1;
  margin-top:9.4em;
}
}

@media (min-width:900px){
#summary, .summary, aside#summary, aside.summary{
  grid-column:2;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow: 0 8px 24px rgba(2,8,23,.06);
  padding: var(--space-2);
  position: sticky; 
  max-height: calc(100dvh - var(--topbar-height, 64px) - 56px);
  overflow: auto;
  justify-self: stretch; align-self: start; z-index:1;
  margin-top:9.4em;
}
}

.sheet-toggle{display:none}

/* Typo */
#summary{ display:flex; flex-direction:column; font-size: 15px; line-height: 1.45; }
#summary .sum-title{ font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: 800; margin:0;}
#summary .sum-label{ margin-top: var(--space-2); margin-bottom: 1em; font-size: 12px; font-weight: 800; letter-spacing: .06em; color:#6b7280; text-transform: uppercase; border-top: 1px solid #eef3ff;padding-top: var(--space-2); }
#summary .sum-line{ margin-top:0px; color: var(--text); line-height: 1.4; font-size: 16px; }
#summary .sum-sep{ height:1px; background:linear-gradient(90deg,#eef3ff 0,#e9eefc 100%); margin:12px 0; border-radius:1px; }

#summary .sum-body{ display:flex; flex-direction:column; gap: 2px; flex:1; }
#summary .sum-footer{ margin-top:auto; }
#summary .btn-cta{ display:block; width:100%; margin-top: var(--space-2); border:0; border-radius:999px; padding:14px 18px; font-weight:800; font-size:16px; background: #1e90ff; color:#fff; cursor:pointer; }
#summary .btn-cta.is-disabled, #summary .btn-cta[disabled]{ background:#a7d2ff; cursor:not-allowed; }

/* Datum + Zeitraum */
#summary .sum-line-group{ display:flex; flex-direction:column; }
#summary .sum-line-group .sum-line{ margin-top:0; }
#summary .sum-line-group .sum-line + .sum-line{ margin-top:2px; }
#summary .sum-sub{ font-size: 0.98rem; font-weight: 500; color: inherit; opacity:.95; }

/* Mobile Bottom-Sheet (wie von dir gewünscht) */
@media (max-width: 900px){
  .layout{ padding-bottom: 72px; }
  #summary{
    position: fixed !important; left:0; right:0; bottom:0; margin:0;
    border-radius:16px 16px 0 0; box-shadow: 0 -10px 30px rgba(2,8,23,.15); z-index:50;
    --sheet-collapsed: 54px; --sheet-height: 70dvh;
    max-height: var(--sheet-height); height: var(--sheet-height);
    transform: translateY(calc(100% - var(--sheet-collapsed)));
    transition: transform .28s ease; overflow: hidden;
  }
  #summary.is-open{ transform: translateY(0); }
  #summary .sheet-toggle{
    appearance:none; border:0; background:transparent; width:100%;
    display:grid; grid-template-columns:28px 1fr auto; align-items:center;
    gap:10px; padding:10px 16px; cursor:pointer;
  }
  #summary .sheet-drag{ display:block;width:0px; height:5px; border-radius:3px; background:#C8D2E6; justify-self:left;}
  #summary .sheet-title{ font-weight:800; font-size:16px; color: var(--text); justify-content: center;white-space: nowrap;}
  #summary .sheet-hint{ font-size:13px; color:#6b7280;float:right;white-space: nowrap; }
  #summary .sum-title{padding-left:16px;padding-right:16px; padding-top:15px;}
  #summary .sum-body{ overflow:auto; max-height: calc(var(--sheet-height) - var(--sheet-collapsed) - 70px); padding-left:16px;padding-right:16px;}
  #summary .sum-footer{ position: sticky; bottom:0; background:inherit; padding-top:8px;}
}






/* Desktop: niemals im Header anzeigen */
.btn-cta--inbar{ display:none !important; width:auto !important; min-width:0 !important; }

/* Verwende denselben Breakpoint wie dein Summary-CSS (980px) */
@media (max-width:900px){
  /* Toggle-Leiste als Positionierungs-Container – in beiden Zuständen */
  .sheet-toggle{ position:relative; padding-right:120px; min-height:44px; }
  /* Verhindere, dass der Button abgeschnitten wird */
  #summary{ overflow:visible; }
  .sum-body{ overflow:visible; }

  /* CTA immer sichtbar auf Mobile */
  .btn-cta--inbar{
    display:inline-flex !important;
    position:flex;
    right:12px;
    top:50%;
    transform: translateY(-50%);
    height:15px!important;
    padding:5 5px;
    align-items:center; justify-content:center;
    z-index:1001;
    width:auto !important; min-width:0 !important;
    margin-top:0px!important;
  }

  /* Wenn Sheet zu ist, bleibt er in der Leiste (gleiche Regeln wie oben) */
  .summary:not(.is-open) .btn-cta--inbar{
    right:12px; top:50%; transform:translateY(-50%);
  }

  /* Wenn offen, optional leicht höher setzen, falls Header größer wird */
  .summary.is-open .btn-cta--inbar{
    right:12px; top:12px; transform:none; height:36px;
  }

  /* Platz schaffen & Doppel-CTA verhindern */
  .sheet-hint{ display:none; }
  .sum-footer .btn-cta{ display:none !important; }
}

@media (min-width:1000px){
  .btn-cta--inbar{ display:none !important; }
}



/* Default: header CTA hidden everywhere */
.btn-cta--inbar{ display:none !important; width:auto !important; min-width:0 !important; }
/* Mobile layout */
/* Einheitliches Verhalten mobile (gleicher Breakpoint wie Summary verwenden) */
@media (max-width:900px){
  .sheet-toggle{ position:relative; padding-right:120px; min-height:44px; }

  /* Button IMMER zeigen */
  .btn-cta--inbar{
    display:inline-flex !important;
    position:absolute;
    right:12px; top:50%; transform:translateY(-50%);
    height:36px; padding:0 12px; z-index:1001;
    width:auto !important; min-width:0 !important;
  }

  /* Optional: im offenen Zustand etwas höher setzen */
  .summary.is-open .btn-cta--inbar{ top:12px; transform:none; }
  .sum-footer .btn-cta{ display:none !important; }
}
@media (min-width:1000px){
  .btn-cta--inbar{ display:none !important; }
}
/* Desktop: keep header CTA hidden */
@media (min-width:1000px){
  .btn-cta--inbar{ display:none !important; }
}