/* Referenzen (UseCase) design tokens + scoped base. Values mirror wissen.css so the two areas
   look like one site, while staying separately overridable. */
:root {
  --ref-blue: #095494;
  --ref-orange: #E56100;
  --ref-text: #4E5455;
  --ref-bg-blue: #EDF7FF;
  --ref-bg-cream: #FFF0D9;
  --ref-bg-grey: #F2F2F2;
  --ref-radius: 10px;
  --ref-gap: 1.5rem;
}

.ref-content { color: var(--ref-text); }
.ref-content h2, .ref-content h3 { color: var(--ref-text); }

/* Layout — minmax(0,…) + min-width:0 stop a wide table from stretching the whole page. */
.ref-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  max-width: 1550px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.ref-sidebar, .ref-content { min-width: 0; }
.ref-content div:has(> table) { overflow-x: auto !important; }
.ref-content table { min-width: 100%; }

/* Sidebar */
.ref-sidebar { position: sticky; top: 100px; font-size: .9em; }
.ref-sidebar__company { margin: 0; font-weight: 600; color: var(--ref-text); line-height: 1.3; }
.ref-sidebar__subtitle { margin: 0 0 1.25rem; color: var(--ref-text); }
.ref-sidebar__cta { margin-top: 1.5rem; }

/* Icon ToC — pill rows, active row cream with an orange icon. */
.ref-toc__list { list-style: none; margin: 0; padding: 0; }
.ref-toc__item { margin: 0 0 .5rem; }
.ref-toc__item a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .85rem;
  border-radius: var(--ref-radius);
  background: var(--ref-bg-blue);
  color: var(--ref-text);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.ref-toc__icon { width: 22px; height: 22px; flex: 0 0 22px; color: var(--ref-blue); }
.ref-toc__item a:hover { background: #E2F0FC; }
.ref-toc__item.is-active a { background: var(--ref-bg-cream); color: var(--ref-orange); font-weight: 600; }
/* currentColor on the inlined SVG is what makes this recolouring possible. */
.ref-toc__item.is-active .ref-toc__icon { color: var(--ref-orange); }
.ref-toc__toggle { display: none; }

.ref-breadcrumb { font-size: .85em; color: var(--ref-text); margin: 0 0 1rem; }
.ref-content h2, .ref-h2 { scroll-margin-top: 100px; }

/* Mobile — sidebar above the content, ToC collapsed behind a toggle. */
@media (max-width: 849px) {
  .ref-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .ref-sidebar { position: static; }
  .ref-toc__toggle {
    display: block;
    width: 100%;
    text-align: left;
    padding: .65rem .85rem;
    border-radius: var(--ref-radius);
    background: var(--ref-bg-blue);
    color: var(--ref-blue);
    font-weight: 600;
    border: 0;
  }
  .ref-toc__nav { display: none; margin-top: .5rem; }
  .ref-toc.is-open .ref-toc__nav { display: block; }
}

/* Hero — template-rendered: label, image left, UseCase wordmark, title, intro, anchor CTA. */
.ref-hero { max-width: 1550px; margin: 2rem auto 0; padding: 0 1rem; }
.ref-hero__label { margin: 0 0 1rem; font-weight: 600; color: var(--ref-text); }
.ref-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: start; }
.ref-hero__grid--no-media { grid-template-columns: minmax(0, 1fr); }
.ref-hero__img { display: block; width: 100%; height: auto; border-radius: var(--ref-radius); }
.ref-usecase { display: inline-block; margin: 0 0 .75rem; font-size: 2rem; font-weight: 700; color: var(--ref-blue); line-height: 1; }
/* Kundenlogo variant: match the text wordmark's footprint via height, keep the image ratio. */
.ref-usecase--img { height: 2.5rem; width: auto; max-width: 60%; object-fit: contain; }
.ref-hero__title { margin: 0 0 1.25rem; color: var(--ref-text); }
.ref-hero__intro { color: var(--ref-text); }
.ref-hero__intro p { margin: 0 0 1rem; }
.ref-hero__cta { display: inline-block; margin-top: .5rem; font-weight: 600; color: var(--ref-blue); text-decoration: none; }
.ref-hero__cta:hover { text-decoration: underline; }

@media (max-width: 849px) {
  .ref-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* Sektion 8 — Weitere Cases: three teaser cards, image over a light-blue body. */
.ref-weitere { max-width: 1550px; margin: 3rem auto; padding: 0 1rem; }
.ref-weitere__heading { margin: 0 0 1.5rem; color: var(--ref-text); }
.ref-weitere__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ref-gap); }
.ref-card { display: flex; flex-direction: column; border-radius: var(--ref-radius); overflow: hidden; }
.ref-card__media { display: block; }
.ref-card__img { display: block; width: 100%; height: 220px; object-fit: cover; }
.ref-card__body { flex: 1; padding: 1.25rem; background: var(--ref-bg-blue); }
.ref-card__body .ref-usecase { font-size: 1.25rem; margin-bottom: .5rem; }
.ref-card__body .ref-usecase--img { height: 1.75rem; }
.ref-card__title { margin: 0 0 .25rem; font-weight: 600; color: var(--ref-text); }
.ref-card__text { margin: 0 0 1rem; color: var(--ref-text); }
.ref-card__link { font-weight: 600; color: var(--ref-blue); text-decoration: none; }
.ref-card__link:hover { text-decoration: underline; }

@media (max-width: 1023px) { .ref-weitere__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 649px)  { .ref-weitere__grid { grid-template-columns: minmax(0, 1fr); } }

/* Sektion 1 — Eckdaten im Überblick */
.ref-eckdaten { margin: 2rem 0; }
.ref-eckdaten__heading { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; line-height: 1.6; color: var(--ref-text); }
.ref-eckdaten__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  padding: 2rem;
  border: 1px solid #D9D9D9;
  border-radius: var(--ref-radius);
}
.ref-eckdaten__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.ref-eckdaten__icon { width: 34px; height: 34px; flex: 0 0 34px; color: var(--ref-orange); }
.ref-eckdaten__label { font-size: 1.15em; color: var(--ref-orange); }
.ref-eckdaten__body { color: var(--ref-text); }
.ref-eckdaten__body p { margin: 0; }

@media (max-width: 849px) { .ref-eckdaten__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.25rem; } }
@media (max-width: 549px) { .ref-eckdaten__grid { grid-template-columns: minmax(0, 1fr); } }

/* Sektion 2 — AddOn-Übersicht */
.ref-addons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; margin: 2rem 0; }
.ref-addons--no-media { grid-template-columns: minmax(0, 1fr); }
.ref-addons__text { background: var(--ref-bg-blue); padding: 2rem; color: var(--ref-text); }
.ref-addons__heading { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; line-height: 1.6; color: var(--ref-text); }
.ref-addons__brand { font-size: 1.35em; font-weight: 700; color: var(--ref-blue); }
.ref-addons__list { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.ref-addons__list li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; color: var(--ref-blue); }
.ref-addons__list li::before { content: "\203A"; position: absolute; left: .4rem; top: -.1rem; font-size: 1.3em; font-weight: 700; color: var(--ref-blue); }
.ref-addons__media { display: flex; }
.ref-addons__img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 849px) {
  .ref-addons { grid-template-columns: minmax(0, 1fr); }
  .ref-addons__text { padding: 1.25rem; }
  .ref-addons__img { height: auto; }
}

/* Sektion 3 — Dont's */
.ref-donts { margin: 2rem 0; padding: 2rem; background: var(--ref-bg-grey); border-radius: var(--ref-radius); }
.ref-donts__heading { margin: 0 0 1.25rem; font-size: 1rem; font-weight: 700; line-height: 1.6; color: var(--ref-text); }
.ref-donts__list { list-style: none; margin: 0; padding: 0; }
.ref-donts__list li { position: relative; padding-left: 2rem; margin-bottom: .75rem; color: var(--ref-text); }
.ref-donts__list li::before {
  content: "X";
  position: absolute; left: 0; top: 0;
  font-weight: 700; color: #A11B1B;
}

@media (max-width: 849px) { .ref-donts { padding: 1.25rem; } }

/* Sektion 4 — Ablauf. Numbers come from a CSS counter, so reordering steps cannot desync them. */
.ref-ablauf { margin: 2.5rem 0; counter-reset: ref-ablauf; }
.ref-ablauf__heading { margin: 0 0 2rem; color: var(--ref-text); }
.ref-ablauf__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
.ref-ablauf__step { counter-increment: ref-ablauf; position: relative; padding: 0 .75rem; text-align: center; }
.ref-ablauf__num {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 auto 1rem;
  border: 2px solid var(--ref-blue); border-radius: var(--ref-radius);
  background: var(--ref-bg-blue); color: var(--ref-blue);
  font-size: 1.4rem; font-weight: 700;
  position: relative; z-index: 1;
}
.ref-ablauf__num::before { content: counter(ref-ablauf) "."; }
/* The connecting line runs behind the badges, stopping short at the first and last step. */
.ref-ablauf__step::before {
  content: ""; position: absolute; top: 28px; left: 0; right: 0;
  border-top: 2px solid var(--ref-blue); z-index: 0;
}
.ref-ablauf__step:first-child::before { left: 50%; }
.ref-ablauf__step:last-child::before { right: 50%; }
.ref-ablauf__body { color: var(--ref-text); font-size: .95em; }
.ref-ablauf__title { color: var(--ref-text); }
.ref-ablauf__footnote { margin-top: 2rem; color: var(--ref-text); font-size: .95em; }

/* Mobile — vertical stack, badge left of the text, line running down between badges. */
@media (max-width: 849px) {
  .ref-ablauf__track { grid-auto-flow: row; grid-auto-columns: auto; }
  .ref-ablauf__step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 1rem; text-align: left; padding: 0 0 1.5rem; }
  .ref-ablauf__num { margin: 0; }
  .ref-ablauf__step::before { top: 56px; bottom: 0; left: 27px; right: auto; border-top: 0; border-left: 2px solid var(--ref-blue); }
  .ref-ablauf__step:first-child::before { left: 27px; }
  .ref-ablauf__step:last-child::before { display: none; }
}

/* Sektion 5 — Boxed Content */
.ref-boxed { margin: 2rem 0; padding: 2rem; background: var(--ref-bg-blue); border-radius: var(--ref-radius); }
/* h3.ref-boxed__heading (not just the class) to out-specificity the ".ref-content h3 { color:
   var(--ref-text) }" base rule above — this heading needs the blue accent colour instead. */
h3.ref-boxed__heading { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; line-height: 1.6; color: var(--ref-blue); }
.ref-boxed__body { color: var(--ref-text); }
.ref-boxed__body p:last-child { margin-bottom: 0; }

@media (max-width: 849px) { .ref-boxed { padding: 1.25rem; } }

/* Sektion 6 — Gegenüberstellung minimalistisch */
.ref-vergleich { margin: 2.5rem 0; }
.ref-vergleich__heading { margin: 0 0 1.5rem; color: var(--ref-text); }
.ref-vergleich__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.ref-vergleich__col { padding-left: 1.25rem; border-left: 3px solid var(--ref-blue); }
.ref-vergleich__col--before { border-left-color: #A11B1B; }
.ref-vergleich__label { margin: 0 0 1rem; font-weight: 700; color: var(--ref-text); }
.ref-vergleich__list { list-style: none; margin: 0; padding: 0; }
.ref-vergleich__list li { margin-bottom: .85rem; color: var(--ref-text); }

@media (max-width: 649px) { .ref-vergleich__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } }

/* Sektion 7 — Freisteller-Zitat. Per the design brief the cut-out portrait stands half in
   front of the quote box: bottoms aligned, the portrait's left half outside the box, its top
   free to rise above the box. Flexbox keeps that true for any quote length — the figure is as
   tall as the taller of the two, so no min-height guard is needed. */
.ref-zitat { display: flex; align-items: flex-end; margin: 3rem 0; }
/* The negative margin pulls the box behind the portrait's right half; the box's padding-left
   (overlap + text gap) below must clear the same 110px so the two stay in sync. */
.ref-zitat__media { flex: 0 0 26%; max-width: 260px; margin-right: -110px; position: relative; z-index: 1; }
.ref-zitat__img { display: block; width: 100%; height: auto; }
.ref-zitat__box { position: relative; flex: 1; min-width: 0; padding: 2.5rem 3rem 2.5rem calc(110px + 3rem); background: var(--ref-bg-blue); border-radius: var(--ref-radius); }
.ref-zitat__mark { position: absolute; top: .5rem; right: 3rem; font-size: 5rem; line-height: 1; font-weight: 700; color: var(--ref-blue); }
.ref-zitat__text { margin: 0 0 1rem; padding: 0 4rem 0 0; border: 0; font-style: italic; color: var(--ref-text); }
.ref-zitat__text p:last-child { margin-bottom: 0; }
.ref-zitat__cite { color: var(--ref-text); }
.ref-zitat--no-media .ref-zitat__box { padding-left: 3rem; }

@media (max-width: 849px) {
  /* Stacked on mobile: portrait above, dipping slightly into the box below it. */
  .ref-zitat { display: block; }
  .ref-zitat__media { width: 140px; max-width: none; margin: 0 0 -1rem 1rem; }
  .ref-zitat__box { padding: 2rem 1.5rem; }
  .ref-zitat--no-media .ref-zitat__box { padding-left: 1.5rem; }
  .ref-zitat__text { padding-right: 0; }
  .ref-zitat__mark { right: 1.5rem; top: -1.25rem; font-size: 3.5rem; }
}