/* Styles for shortcode-specific components */

/* audio shortcode */
.sc-audio.inline-audio-player {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  flex-wrap: wrap;
}

.sc-audio .audio-inline {
  height: 28px;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.sc-audio .audio-download-link {
  font-size: 0.9rem;
  margin-left: 0.1rem;
  text-decoration: underline;
  white-space: nowrap;
}

/* toc shortcode */
.sc-toc.custom-toc {
  background-color: #f9f9f9;
  border-left: 4px solid #00aaff;
  padding: 10px;
  font-size: 80%;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.sc-toc.custom-toc ul {
  list-style-type: none;
  padding-left: 0;
}

.sc-toc.custom-toc li {
  margin-bottom: 5px;
}

.sc-toc.custom-toc a {
  color: #007acc;
  text-decoration: none;
}

.sc-toc.custom-toc a:hover {
  text-decoration: underline;
}

/* bg-sz-beruflich shortcode */
.sc-bg-sz-beruflich.sz-fullwidth {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: inherit;
  z-index: 1;
}

/* spacer shortcode */
.sc-spacer {
  display: block;
  inline-size: 100%;
  block-size: clamp(
    var(--min, 0.5rem),
    calc(var(--min, 0.5rem) + var(--vw, 2vw)),
    var(--max, 1.5rem)
  );
}

/* ===============
   Accordion Wide
   ---------------
   Full-bleed colored headers with container-width content.
   CSS-only via <details>/<summary> so no JS required.
*/
.sc-acc-wide { margin: 0; padding: 0 0 2rem 0; --acc-header-bg: rgba(0,0,0,0.16); --acc-border: rgba(0,0,0,0); --acc-cta: var(--primary-accent, #0eb1d2); --acc-cta-hover: #0aa1b9; --acc-cta-active: #031d3d; --acc-fg: var(--white, #fff); --acc-cta-width: clamp(120px, 20vw, 280px); }
.sc-acc-intro .container { width: min(100%, 1200px); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
.sc-acc-intro { padding-top: 0.5rem; padding-bottom: 0.25rem; }
.sc-acc-item { border: none; margin: 0 0 0.5rem 0; }

/* Controls */
.sc-acc-controls { padding-top: 1.5rem; padding-bottom: 0.5rem; }
.sc-acc-toggle { background: none; border: none; color: var(--acc-cta); font-weight: 700; font-size: 1.125rem; cursor: pointer; }
.sc-acc-toggle:hover, .sc-acc-toggle:focus { color: var(--acc-text); }

/* Remove native marker from summary */
.sc-acc-item > summary { list-style: none; }
.sc-acc-item > summary::-webkit-details-marker { display: none; }

/* Header bar (full-bleed background handled inline per-instance) */
.sc-acc-header-bleed { background: var(--acc-header-bg); position: relative; border-bottom: none; }
/* Accent rail inside container */
.sc-acc-rail { position: absolute; right: 0; top: 0; bottom: 0; width: var(--acc-cta-width); background: var(--acc-cta); transition: background-color .3s ease; }
.sc-acc-item[open] .sc-acc-rail { background: var(--table-accent-bg, var(--acc-cta-active)); }
.sc-acc-header { color: var(--acc-fg); display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; z-index: 1; }
.sc-acc-title { margin: 0; font-weight: 800; font-family: var(--font-headline, inherit); font-size: var(--h5-size, clamp(1.125rem, 2.6vw, 1.2rem)); text-transform: uppercase; letter-spacing: 0.02em; color: var(--acc-fg); text-shadow: 2px 2px 4px rgba(0,0,0,0.6); }
.sc-acc-icon { inline-size: 1.25rem; block-size: 1.25rem; position: absolute; right: calc(var(--acc-cta-width) / 2 - 0.625rem); top: 50%; transform: translateY(-50%); color: var(--acc-fg); transition: transform .3s ease; z-index: 2; }
.sc-acc-icon::before, .sc-acc-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: currentColor; transform: translateY(-50%); border-radius: 1px; }
.sc-acc-icon::after { transform: translateY(-50%) rotate(90deg); }
.sc-acc-item[open] .sc-acc-icon { transform: rotate(45deg); }
.sc-acc-header-bleed:hover::after { background: var(--acc-cta-hover); }

/* Content container, animated open/close via grid trick */
.sc-acc-panel { background: #fff; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(38px); transition: max-height 1.2s ease-in-out, opacity .6s ease-in-out .6s, transform .6s ease-in-out .6s; }
.sc-acc-item[open] .sc-acc-panel { max-height: 200vh; opacity: 1; transform: none; }
.sc-acc-inner { }
.sc-acc-body { width: min(100%, 1200px); margin: 0 auto; padding: clamp(1rem, 2.4vw, 1.5rem) clamp(1.2rem, 3vw, 2rem) clamp(2rem, 4vw, 3rem); line-height: 1.8; font-size: clamp(1rem, 1.8vw, 1.125rem); }
.sc-acc-body > *:first-child { margin-top: 0; }
.sc-acc-body > *:last-child { margin-bottom: 0; }

/* Rotate icon to minus when open */
.sc-acc-item[open] .sc-acc-icon::after { opacity: 0; }

/* Intro text above accordion: mirror hero typography */
.sc-acc-intro h1 {
  font-family: var(--font-headline) !important;
  font-size: clamp(2rem, 4.8vw, 3.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 0 0 1.2rem 0 !important;
  color: var(--white) !important;
  text-shadow: 4px 4px 8px rgba(0,0,0,0.9) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

/* ===============
   Accordion Revised (sc-acc2)
   Clean intro, compact rows, small accent pill
*/
.sc-acc2{ padding:48px 0 3rem 0; margin:0; color: var(--acc2-fg,var(--white)); --pill-right: clamp(1rem,3vw,2rem); --pill-w: 42px; --icon-w: 18px; }
.sc-acc2-intro .container{ width:min(100%,1200px); margin:0 auto; padding: 0 clamp(1rem,3vw,2rem); }
.sc-acc2-intro h1,.sc-acc2-intro h2,.sc-acc2-intro h3{ color: var(--body-font-color); text-shadow: none; }
.sc-acc2-intro h1{ font-family:var(--font-headline); font-weight:800; text-transform:none; font-size: clamp(2rem,4.2vw,3.2rem); margin:0 0 .75rem 0; }
.sc-acc2-intro h2{ font-family:var(--font-headline); font-weight:700; font-size: clamp(1.4rem,3.2vw,2.1rem); margin:0 0 .5rem 0; }
.sc-acc2-intro h3{ font-family:var(--font-headline); font-weight:500; font-size: clamp(1.1rem,2.2vw,1.4rem); margin:0 0 .25rem 0; }

.sc-acc2-item{ border:none; margin:0 0 1rem 0; }
.sc-acc2-item > summary{ list-style:none; }
.sc-acc2-item > summary::-webkit-details-marker{ display:none; }

.sc-acc2-header{ position:relative; display:flex; align-items:center; gap:1rem; color: var(--acc2-fg,var(--white)); background: rgba(255,255,255,0.18); box-shadow: var(--box-shadow); width: min(100%, 1200px); margin: 0 auto; padding: clamp(0.5rem,1.8vw,0.9rem) var(--acc2-pad-x, clamp(1rem,3vw,2rem)); }
.sc-acc2-title{ margin:0; font-family:var(--font-headline); font-weight:800; font-size: var(--h5-size,clamp(1.05rem,2.2vw,1.2rem)); text-transform: uppercase; letter-spacing:.02em; }

/* Compact accent pill behind + */
.sc-acc2-pill{ position:absolute; right: var(--pill-right); top:50%; transform: translateY(-50%); inline-size: var(--pill-w); block-size: 32px; background: var(--primary-accent,#0eb1d2); border-radius: 0; }
/* Keep pill color when open */
.sc-acc2-item[open] .sc-acc2-pill{ background: var(--primary-accent,#0eb1d2); }

.sc-acc2-icon{ position:absolute; right: calc(var(--pill-right) + (var(--pill-w) - var(--icon-w))/2); top:50%; transform: translateY(-50%); inline-size: var(--icon-w); block-size: var(--icon-w); color: var(--acc2-fg,var(--white)); }
.sc-acc2-icon::before,.sc-acc2-icon::after{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; background: currentColor; transform: translateY(-50%); }
.sc-acc2-icon::after{ transform: translateY(-50%) rotate(90deg); }
.sc-acc2-item[open] .sc-acc2-icon{ transform: translateY(-50%) rotate(45deg); }

/* Row hover/focus */
.sc-acc2-item > summary:hover .sc-acc2-header,
.sc-acc2-item > summary:focus-visible .sc-acc2-header{ background: rgba(255,255,255,0.28); outline:none; }

/* Open state subtle highlight and left keyline */
.sc-acc2-item[open] .sc-acc2-header{ background: rgba(255,255,255,0.35); box-shadow: inset 4px 0 0 var(--table-accent-bg, rgba(255,255,255,.25)), var(--box-shadow); }

/* Panel animation */
.sc-acc2-panel{ background: rgba(255,255,255,0.75); max-height:0; opacity:0; overflow:hidden; transform: translateY(24px); transition: max-height .9s ease, opacity .45s ease .45s, transform .45s ease .45s; box-shadow: var(--box-shadow); }
.sc-acc2-item[open] .sc-acc2-panel{ max-height: 160vh; opacity:1; transform:none; }
.sc-acc2-inner{}
.sc-acc2-body{ width:min(100%,1200px); margin:0 auto; padding: clamp(.8rem,2vw,1rem) clamp(1.2rem,3vw,2rem) clamp(1.6rem,3.6vw,2.4rem); line-height:1.7; font-size: clamp(1rem,1.6vw,1.1rem); color: var(--body-font-color); }

.sc-acc-intro h2 {
  font-family: var(--font-headline) !important;
  font-size: clamp(1.6rem, 3.8vw, 2.4rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin: 0 0 1rem 0 !important;
  color: var(--white) !important;
  text-shadow: 3px 3px 6px rgba(0,0,0,0.8) !important;
}
.sc-acc-intro h3 {
  font-family: var(--font-headline) !important;
  font-size: clamp(1.2rem, 2.8vw, 1.7rem) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  margin: 0 0 0.8rem 0 !important;
  color: var(--white) !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7) !important;
}