/**
 * @file
 * basetheme:normal — DEFAULT editorial band + the SHARED BASE component.
 *
 * Holds, for every layout (hero, two-cols inherit this library):
 *   1. Design tokens            5. Shared flags (on-dark, wide, narrow, center,
 *   2. Base typography             cta, usecase-grid, note-callout, steps-numbered,
 *   3. Layout shell / inner        statement, pill-dark)
 *   4. Reveal animation         6. CTA / link buttons
 *
 * Everything is scoped under `.bt-sdc*`. Zero page chrome here (that lives in
 * css/layout/basetheme.css). Established by page 1 (Automatisierung); these values
 * are the site standard — see docs/DesignSystem_KB.md.
 * Root font-size is 18.5px (set in basetheme.css) so 1rem = 18.5px here.
 */

.bt-sdc, .bt-sdc * { box-sizing:border-box; }

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
.bt-sdc {
  --bt-ink:#16293A;            /* headings / dark text */
  --bt-body:#3C4F5E;           /* body gray */
  --bt-body-soft:#4A5C6A;
  --bt-body-2:#2E4150;
  --bt-label:#8A7A6A;          /* muted uppercase label */
  --bt-accent:#C46A45;         /* terracotta */
  --bt-accent-hov:#B25C39;
  --bt-bg:#F5F1EA;             /* page cream */
  --bt-dark:#102A40;
  --bt-blue:#1F4A6B;
  --bt-ondark-h:#FBFCFD;
  --bt-ondark-body:#C9D9E4;
  --bt-ondark-body-2:#CFE0EC;
  --bt-ondark-mut:#8FB0C6;
  --bt-peach:#E7B59A;
  --bt-line:rgba(22,41,58,0.1);
  --bt-hairline:rgba(22,41,58,0.08);
  --bt-serif:'Spectral', Georgia, 'Times New Roman', serif;
  --bt-sans:'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --bt-gutter:2.2rem;
}

/* ==========================================================================
   2. Layout shell
   ========================================================================== */
.bt-sdc { font-family:var(--bt-sans); color:var(--bt-body); }

/* The band is full-bleed (see basetheme.css .site-main); the inner column is
   contained to the theme's "Max content width" setting
   (--basetheme-container-width, exposed by basetheme_preprocess_page). The
   design's standard column is 1080px — set the theme setting to 1080. The two
   wider bands (hero, feature-panel) use `wide` (1200); band 6 uses `narrow`. */
.bt-sdc__inner {
  width:100%;
  max-width:var(--basetheme-container-width, 1080px);   /* content box incl. gutter (border-box) */
  margin-inline:auto;
  padding-inline:var(--bt-gutter);
}
.bt-sdc.wide  .bt-sdc__inner { max-width:1200px; }
.bt-sdc.narrow .bt-sdc__inner { max-width:760px; }

@media (max-width:1023px) {
  .bt-sdc__inner { padding-inline:1.4rem; }   /* page's own mobile gutter */
}

/* ==========================================================================
   3. Base typography  (double-class `.bt-sdc.bt-sdc` beats base.css h1..h6)
   ========================================================================== */
.bt-sdc.bt-sdc h1,
.bt-sdc.bt-sdc h2,
.bt-sdc.bt-sdc h3,
.bt-sdc.bt-sdc h4,
.bt-sdc.bt-sdc h5 { margin:0; font-weight:500; line-height:1.2; }

.bt-sdc h2 {
  font-family:var(--bt-serif); font-weight:500;
  font-size:clamp(1.55rem, 3.4vw, 2.15rem);
  line-height:1.14; letter-spacing:-0.01em; color:var(--bt-ink);
}
.bt-sdc h3 {
  font-family:var(--bt-serif); font-weight:500; font-size:1.2rem;
  line-height:1.25; color:var(--bt-ink);
}

/* Eyebrow / kicker — a <mark> (CKEditor "highlight"), NOT a heading (SEO: keeps
   the document outline clean). `<mark>` is RESERVED for eyebrows in this system.
   Authored as `<p><mark class="marker-…">…</mark></p>`. CKEditor stamps a colour
   class (marker-green/yellow/pink/blue, pen-*) and the editor may pick any of them,
   so we style the TAG ONLY and never a `.marker-*`/`.pen-*` class. The
   `!important` transparent bg neutralises whatever highlight colour was chosen. */
.bt-sdc mark {
  background:transparent !important;   /* drop the chosen highlight colour */
  font-family:var(--bt-sans); font-weight:500; font-size:0.76rem;
  line-height:1; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--bt-accent); display:inline-flex; align-items:center; gap:0.65rem;
}
.bt-sdc mark::before {
  content:""; width:1.3rem; height:1px; background:var(--bt-accent); flex:none;
}
.bt-sdc p:has(> mark) { margin:0 0 0.8rem; }

/* Muted uppercase mini-label */
.bt-sdc h5 {
  font-family:var(--bt-sans); font-weight:400; font-size:0.76rem;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--bt-label);
  margin:0 0 1rem;
}

.bt-sdc p { font-size:0.98rem; line-height:1.72; color:var(--bt-body); margin:0; }
.bt-sdc h2 + p { margin-top:1.2rem; }
.bt-sdc p + p { margin-top:1rem; }
.bt-sdc strong { font-weight:500; color:var(--bt-ink); }

/* ==========================================================================
   4. Reveal-on-scroll (armed by normal.js; content stays visible if JS/IO absent)
   ========================================================================== */
.bt-sdc__inner.reveal.is-armed {
  opacity:0; transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);
}
.bt-sdc__inner.reveal.is-armed.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  .bt-sdc__inner.reveal.is-armed { opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   5. normal layout — single column ± actions
   ========================================================================== */
.bt-sdc--normal .bt-sdc__actions { margin-top:1.9rem; }

/* ==========================================================================
   6. CTA / link buttons  (field_simple_link renders an <a> here)
   ========================================================================== */
.bt-sdc__actions a,
.bt-sdc__link a {
  display:inline-flex; align-items:center; gap:0.55rem;
  background:var(--bt-accent); color:#fff; font-weight:500; font-size:0.9rem;
  padding:0.82rem 1.5rem; border-radius:9px; text-decoration:none;
  transition:background .2s, transform .2s;
}
.bt-sdc__actions a:hover,
.bt-sdc__link a:hover { background:var(--bt-accent-hov); transform:translateY(-1px); }
.bt-sdc__actions a::after { content:"→"; }   /* editor omits the arrow in link text */

/* ==========================================================================
   SHARED FLAGS
   ========================================================================== */

/* on-dark — flip text to the light palette (bg comes from field_background_color) */
.bt-sdc.on-dark h1,
.bt-sdc.on-dark h2,
.bt-sdc.on-dark h3 { color:var(--bt-ondark-h); }
.bt-sdc.on-dark p { color:var(--bt-ondark-body); }
.bt-sdc.on-dark mark { color:var(--bt-ondark-mut); }
.bt-sdc.on-dark strong { color:var(--bt-ondark-h); }

/* center — centered column + text (eyebrow gets a rule on both sides) */
.bt-sdc.center .bt-sdc__body { text-align:center; }
.bt-sdc.center mark::after {
  content:""; width:1.3rem; height:1px; background:var(--bt-accent); flex:none;
}
.bt-sdc.center h2 { max-width:20ch; margin-inline:auto; }
.bt-sdc.center .bt-sdc__body > p:not(:has(> mark)) { max-width:56ch; margin-inline:auto; }

/* cta — enlarge the band heading (Kontakt) */
.bt-sdc.cta h2 {
  font-size:clamp(1.8rem, 4.2vw, 2.8rem);
  line-height:1.1; letter-spacing:-0.015em;
}

/* usecase-grid — a <ul> becomes a 3-col bordered card grid; flat list <=1023 */
.bt-sdc.usecase-grid ul {
  list-style:none; margin:2.4rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--bt-line); border:1px solid var(--bt-line);
  border-radius:14px; overflow:hidden;
}
.bt-sdc.usecase-grid li {
  background:#fff; padding:1.5rem; margin:0; display:flex; gap:0.7rem;
  font-size:0.9rem; line-height:1.55; color:var(--bt-body-2);
}
.bt-sdc.usecase-grid li::before {
  content:"\2022"; color:var(--bt-accent); font-size:1.1rem; line-height:1; flex:none;
}
@media (max-width:1023px) {
  .bt-sdc.usecase-grid ul {
    display:block; background:transparent; border:0; border-radius:0; margin-top:1.6rem;
  }
  .bt-sdc.usecase-grid li {
    background:transparent; padding:0.8rem 0; border-top:1px solid var(--bt-line);
  }
  .bt-sdc.usecase-grid li:last-child { border-bottom:1px solid var(--bt-line); }
}

/* note-callout — a <blockquote> becomes a beige info box */
.bt-sdc.bt-sdc blockquote { margin:0; }
.bt-sdc.note-callout blockquote {
  position:relative;
  margin-top:1.7rem; background:var(--bt-bg); border-radius:12px;
  padding:1.3rem 1.4rem 1.3rem 3.15rem;   /* left inset reserves the icon column */
  font-size:0.9rem; line-height:1.66; color:var(--bt-body);
}
/* Absolute icon (not a flex item) so inline <strong> stays inline in the text. */
.bt-sdc.note-callout blockquote::before {
  content:""; position:absolute; left:1.4rem; top:1.4rem; width:20px; height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23C46A45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* steps-numbered — h3+p sequence becomes numbered rows 01..NN */
.bt-sdc.steps-numbered .bt-sdc__body { counter-reset:step; border-bottom:1px solid var(--bt-line); }
.bt-sdc.steps-numbered h2 { margin-bottom:1.3rem; }
.bt-sdc.steps-numbered h3 {
  counter-increment:step; position:relative;
  margin:0; padding:1.7rem 0 0 6.3rem; border-top:1px solid var(--bt-line);
  font-size:1.2rem;
}
.bt-sdc.steps-numbered h3::before {
  content:counter(step, decimal-leading-zero);
  position:absolute; left:0; top:1.7rem;
  font-family:var(--bt-serif); font-size:1.6rem; color:var(--bt-accent); line-height:1;
}
.bt-sdc.steps-numbered h3 + p {
  margin-top:0.55rem; padding:0 0 1.7rem 6.3rem;
  font-size:0.92rem; line-height:1.66; color:var(--bt-body-soft);
}
@media (max-width:1023px) {
  .bt-sdc.steps-numbered h3 { padding-left:0; }
  .bt-sdc.steps-numbered h3::before { position:static; display:block; margin-bottom:0.2rem; }
  .bt-sdc.steps-numbered h3 + p { padding-left:0; }
}

/* statement — the first real <p> (the one after the eyebrow) becomes a large
   Spectral statement. `p:has(> mark)` is the eyebrow; `+ p` is the statement. */
.bt-sdc.statement .bt-sdc__body > p:has(> mark) + p {
  font-family:var(--bt-serif); font-weight:400;
  font-size:clamp(1.15rem, 2.2vw, 1.35rem); line-height:1.5; color:var(--bt-ink);
}

/* pill-dark — trailing <blockquote> becomes an inline dark pill */
.bt-sdc.pill-dark blockquote {
  margin-top:1.9rem; display:inline-flex; padding:0.9rem 1.5rem;
  background:var(--bt-dark); border-radius:10px;
  font-size:0.92rem; line-height:1.5; color:#EAF1F6; font-weight:500;
}

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

/* arrowlist / checklist — a <ul> becomes a 2-col marker list with hairline rows.
   Collapses to 1 column <=1023. `.bt-sdc.bt-sdc.<flag>` (double-class) beats the
   two-cols default right-column list so the flag also works inside a two-cols
   right column (band 4). `cards`/`panel-checklist` contexts force these to 1-col. */
.bt-sdc.bt-sdc.arrowlist ul,
.bt-sdc.bt-sdc.checklist ul {
  list-style:none; margin:1.4rem 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; column-gap:3rem;
}
.bt-sdc.bt-sdc.arrowlist li,
.bt-sdc.bt-sdc.checklist li {
  display:flex; gap:0.76rem; margin:0; padding:0.97rem 0;
  border-top:1px solid var(--bt-line);
  font-size:0.89rem; line-height:1.5; color:var(--bt-body);
}
.bt-sdc.bt-sdc.arrowlist li::before {
  content:"\203A"; color:var(--bt-accent); flex:none; margin-top:-0.05rem;
}
.bt-sdc.bt-sdc.checklist li { padding:0.9rem 0; }
.bt-sdc.bt-sdc.checklist 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='%23C46A45' 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;
}
@media (max-width:1023px) {
  .bt-sdc.bt-sdc.arrowlist ul,
  .bt-sdc.bt-sdc.checklist ul { grid-template-columns:1fr; column-gap:0; }
}

/* statement-end — the LAST body <p> becomes a large Spectral 500 statement
   (distinct from `statement`, which targets the FIRST p after the eyebrow). */
.bt-sdc.statement-end .bt-sdc__body > p:last-of-type {
  font-family:var(--bt-serif); font-weight:500;
  font-size:clamp(0.92rem, 2vw, 1rem); line-height:1.7; color:var(--bt-ink);
  max-width:64ch; margin-top:2.2rem;
}

/* eyebrow-plain — dash-less eyebrow (suppresses the base ::before rule and the
   center flag's ::after rule). Placed after `center` so the ::after tie resolves
   here. */
.bt-sdc.eyebrow-plain mark::before { display:none; }
.bt-sdc.eyebrow-plain mark::after { content:none; }