/**
 * @file
 * basetheme:two-cols — generic two-column band. Scoped under .bt-sdc--two-cols.
 * Inherits tokens/typography/flags from normal via libraryOverrides.
 *
 * Flags:
 *   (default)      1fr / 1fr columns, transparent panel      (band 1 Ausgangslage)
 *   narrow-left    0.85fr / 1.15fr columns                   (band 5 Warum mit mir)
 *   qa-grid        right-column <ul> -> 2-col Q&A grid       (band 5)
 *   feature-panel  blue inset card panel + baked icons       (band 4 Warum n8n)
 */

/* ---- Columns ---- */
.bt-sdc--two-cols .bt-sdc__cols {
  display:grid; grid-template-columns:1fr 1fr; gap:3.1rem; align-items:start;
}
.bt-sdc--two-cols.narrow-left .bt-sdc__cols {
  grid-template-columns:0.85fr 1.15fr; gap:3.4rem;
}
@media (max-width:1023px) {
  /* narrow-left listed explicitly so its (0,3,0) desktop rule doesn't outrank
     this collapse (a generic .bt-sdc__cols selector would lose the specificity
     tie and leave narrow-left bands 2-col on mobile). */
  .bt-sdc--two-cols .bt-sdc__cols,
  .bt-sdc--two-cols.narrow-left .bt-sdc__cols { grid-template-columns:1fr; gap:1.6rem; }
}

/* left column smaller heading scale (bands 1 & 5) */
.bt-sdc--two-cols h2 { font-size:clamp(1.5rem, 3.1vw, 2rem); line-height:1.16; }
.bt-sdc--two-cols.narrow-left h2 { font-size:clamp(1.45rem, 3vw, 1.85rem); line-height:1.2; }
.bt-sdc--two-cols.narrow-left h2 strong { color:var(--bt-accent); font-weight:500; }

/* ---- Right-column default list: dashed rows with hairlines (band 1) ---- */
.bt-sdc--two-cols .bt-sdc__col--right ul { list-style:none; margin:0; padding:0; }
.bt-sdc--two-cols .bt-sdc__col--right li {
  display:flex; gap:0.75rem; margin:0; padding:0.75rem 0;
  border-top:1px solid var(--bt-line);
  font-size:0.9rem; line-height:1.5; color:var(--bt-body);
}
.bt-sdc--two-cols .bt-sdc__col--right li::before { content:"\2014"; color:var(--bt-accent); flex:none; }
.bt-sdc--two-cols .bt-sdc__col--right li:last-child { border-bottom:1px solid var(--bt-line); }
.bt-sdc--two-cols .bt-sdc__col--right ul + p { margin-top:1.1rem; font-size:0.9rem; line-height:1.6; }

/* ---- qa-grid: right-column <ul> becomes a 2-col Q&A grid (band 5) ---- */
.bt-sdc--two-cols.qa-grid .bt-sdc__col--right ul {
  display:grid; grid-template-columns:1fr 1fr; gap:0.6rem 1.5rem; margin-top:1.3rem;
}
.bt-sdc--two-cols.qa-grid .bt-sdc__col--right li {
  border:0; padding:0; gap:0.6rem; font-size:0.9rem; line-height:1.5; color:var(--bt-body-2);
}
.bt-sdc--two-cols.qa-grid .bt-sdc__col--right li::before { content:"\00B7"; }
.bt-sdc--two-cols.qa-grid .bt-sdc__col--right ul + p { margin-top:1.5rem; font-size:0.98rem; line-height:1.72; }
@media (max-width:1023px) {
  .bt-sdc--two-cols.qa-grid .bt-sdc__col--right ul { grid-template-columns:1fr; }
}

/* ==========================================================================
   feature-panel — blue inset card panel with two icon cards (band 4)
   ========================================================================== */
/* Shared blue-panel shell — used by `feature-panel` (page 1) AND `panel-checklist`
   (page 2 / business-analyse). panel-checklist is only ADDED to these selectors;
   feature-panel's rendering is unchanged. */
.bt-sdc--two-cols.feature-panel .bt-sdc__inner,
.bt-sdc--two-cols.panel-checklist .bt-sdc__inner { max-width:1200px; }

.bt-sdc--two-cols.feature-panel .bt-sdc__panel,
.bt-sdc--two-cols.panel-checklist .bt-sdc__panel {
  position:relative; overflow:hidden;
  background:var(--bt-blue); border-radius:20px; padding:3.4rem 3.2rem 3.2rem;
  color:var(--bt-ondark-body);
}
@media (max-width:1023px) {
  .bt-sdc--two-cols.feature-panel .bt-sdc__panel,
  .bt-sdc--two-cols.panel-checklist .bt-sdc__panel { padding:2.2rem 1.5rem; }
}
/* decorative rings */
.bt-sdc--two-cols.feature-panel .bt-sdc__panel::before,
.bt-sdc--two-cols.feature-panel .bt-sdc__panel::after,
.bt-sdc--two-cols.panel-checklist .bt-sdc__panel::before,
.bt-sdc--two-cols.panel-checklist .bt-sdc__panel::after {
  content:""; position:absolute; border-radius:50%; pointer-events:none;
}
.bt-sdc--two-cols.feature-panel .bt-sdc__panel::before,
.bt-sdc--two-cols.panel-checklist .bt-sdc__panel::before {
  top:-50px; right:-50px; width:240px; height:240px; border:1px solid rgba(255,255,255,0.07);
}
.bt-sdc--two-cols.feature-panel .bt-sdc__panel::after,
.bt-sdc--two-cols.panel-checklist .bt-sdc__panel::after {
  top:20px; right:20px; width:140px; height:140px; border:1px solid rgba(196,106,69,0.28);
}

/* intro (header) */
.bt-sdc--two-cols.feature-panel .bt-sdc__header { position:relative; z-index:2; max-width:760px; }
.bt-sdc--two-cols.feature-panel mark { color:var(--bt-peach); }
.bt-sdc--two-cols.feature-panel mark::before { background:var(--bt-peach); }
.bt-sdc--two-cols.feature-panel .bt-sdc__header h2 {
  color:var(--bt-ondark-h); font-size:clamp(1.5rem, 3.2vw, 2.05rem); line-height:1.16;
}
.bt-sdc--two-cols.feature-panel .bt-sdc__header p {
  margin-top:1.2rem; max-width:64ch; color:var(--bt-ondark-body-2);
  font-size:0.98rem; line-height:1.72;
}

/* cards */
.bt-sdc--two-cols.feature-panel .bt-sdc__cols {
  position:relative; z-index:2; margin-top:2.1rem;
  grid-template-columns:1fr 1fr; gap:1.4rem;
}
@media (max-width:1023px) {
  .bt-sdc--two-cols.feature-panel .bt-sdc__cols { grid-template-columns:1fr; gap:1.4rem; }
}
.bt-sdc--two-cols.feature-panel .bt-sdc__col {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:14px; padding:1.6rem 1.5rem;
}
.bt-sdc--two-cols.feature-panel .bt-sdc__col h3 {
  display:flex; align-items:center; gap:0.65rem; margin:0 0 0.75rem;
  color:var(--bt-ondark-h); font-size:1.08rem; line-height:1.25;
}
.bt-sdc--two-cols.feature-panel .bt-sdc__col p {
  color:#BFD2DF; font-size:0.84rem; line-height:1.64;
}
/* baked icon chips (editors cannot author SVG) */
.bt-sdc--two-cols.feature-panel .bt-sdc__col h3::before {
  content:""; width:1.85rem; height:1.85rem; flex:none; border-radius:9px;
  background-color:rgba(196,106,69,0.18); background-repeat:no-repeat;
  background-position:center; background-size:18px 18px;
}
.bt-sdc--two-cols.feature-panel .bt-sdc__col--left h3::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23E7B59A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}
.bt-sdc--two-cols.feature-panel .bt-sdc__col--right h3::before {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23E7B59A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
}
/* card-2 link (field_simple_link) — peach text link, not a button */
.bt-sdc--two-cols.feature-panel .bt-sdc__link { margin-top:0.85rem; }
.bt-sdc--two-cols.feature-panel .bt-sdc__link a {
  display:inline-flex; align-items:center; gap:0.4rem;
  background:none; padding:0; border-radius:0;
  font-size:0.82rem; font-weight:500; color:var(--bt-peach); text-decoration:none;
  transition:color .2s;
}
.bt-sdc--two-cols.feature-panel .bt-sdc__link a:hover { color:#fff; transform:none; }
.bt-sdc--two-cols.feature-panel .bt-sdc__link a::after { content:"\2192"; }

/* ==========================================================================
   PAGE 2 (business-analyse) flags
   ========================================================================== */

/* --------------------------------------------------------------------------
   panel-checklist — blue inset card, left prose + right bordered ✓-checklist
   sub-card (band 3 "Rolle der KI"). Shares the blue shell above.
   -------------------------------------------------------------------------- */
.bt-sdc--two-cols.panel-checklist .bt-sdc__cols {
  position:relative; z-index:2; margin:0;
  grid-template-columns:1fr 1fr; gap:3rem; align-items:start;
}
@media (max-width:1023px) {
  .bt-sdc--two-cols.panel-checklist .bt-sdc__cols { grid-template-columns:1fr; gap:2rem; }
}

/* eyebrow (dash-less, peach) + light copy in the left prose column */
.bt-sdc--two-cols.panel-checklist mark { color:var(--bt-peach); }
.bt-sdc--two-cols.panel-checklist mark::before { display:none; }
.bt-sdc--two-cols.panel-checklist .bt-sdc__col--left h2 {
  color:var(--bt-ondark-h); font-size:clamp(1.4rem, 3.2vw, 2.05rem); line-height:1.16;
}
.bt-sdc--two-cols.panel-checklist .bt-sdc__col--left p {
  color:#C4D6E2; font-size:clamp(0.84rem, 2vw, 0.92rem); line-height:1.68; margin-top:1rem;
}
.bt-sdc--two-cols.panel-checklist .bt-sdc__col--left h2 + p { margin-top:1.1rem; }
.bt-sdc--two-cols.panel-checklist strong { color:#E7EFF5; font-weight:500; }

/* right column = bordered sub-card with a peach label + 1-col ✓ checklist */
.bt-sdc--two-cols.panel-checklist .bt-sdc__col--right {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:14px; padding:1.75rem 1.65rem;
}
.bt-sdc--two-cols.panel-checklist .bt-sdc__col--right h5 {
  color:var(--bt-peach); font-size:0.7rem; letter-spacing:0.12em; margin:0 0 1.1rem;
}
.bt-sdc--two-cols.panel-checklist .bt-sdc__col--right ul {
  list-style:none; margin:0; padding:0; display:block;
}
.bt-sdc--two-cols.panel-checklist .bt-sdc__col--right li {
  display:flex; gap:0.7rem; margin:0; padding:0.7rem 0;
  border-top:1px solid rgba(255,255,255,0.1);
  font-size:0.86rem; line-height:1.5; color:#DCE8F0;
}
.bt-sdc--two-cols.panel-checklist .bt-sdc__col--right li:last-child {
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.bt-sdc--two-cols.panel-checklist .bt-sdc__col--right li::before {
  content:""; width:17px; height:17px; flex:none; margin-top:0.12rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23E7B59A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --------------------------------------------------------------------------
   cards — two equal white bordered cards (band 5 "Zwei Säulen"). Dash-less
   accent <mark> labels; larger h3 card titles; a contained arrowlist → 1-col.
   -------------------------------------------------------------------------- */
.bt-sdc--two-cols.cards .bt-sdc__cols {
  grid-template-columns:1fr 1fr; gap:1.75rem; align-items:stretch;
}
@media (max-width:1023px) {
  .bt-sdc--two-cols.cards .bt-sdc__cols { grid-template-columns:1fr; gap:1.4rem; }
}
.bt-sdc--two-cols.cards .bt-sdc__col {
  background:#fff; border:1px solid var(--bt-line); border-radius:16px; padding:2.4rem 2.15rem;
}
@media (max-width:1023px) {
  .bt-sdc--two-cols.cards .bt-sdc__col { padding:1.6rem 1.3rem; }
}
.bt-sdc--two-cols.cards mark { color:var(--bt-accent); }
.bt-sdc--two-cols.cards mark::before { display:none; }
.bt-sdc--two-cols.cards h3 {
  font-size:clamp(1.19rem, 2.6vw, 1.35rem); line-height:1.22; margin:0;
}
.bt-sdc--two-cols.cards h3 + p { margin-top:1rem; }

/* card-2 arrowlist → single column inside the narrow card */
.bt-sdc--two-cols.cards.arrowlist .bt-sdc__col--right ul {
  grid-template-columns:1fr; column-gap:0; margin-top:1rem;
}
.bt-sdc--two-cols.cards.arrowlist .bt-sdc__col--right li {
  padding:0.6rem 0; font-size:0.84rem; border-top-color:rgba(22,41,58,0.09);
}
.bt-sdc--two-cols.cards.arrowlist .bt-sdc__col--right li:last-child {
  border-bottom:1px solid rgba(22,41,58,0.09);
}
.bt-sdc--two-cols.cards.arrowlist .bt-sdc__col--right ul + p { margin-top:1.1rem; }