/* Code Hive GmbH: Sektionslayouts. Je Sektion eine eigene Layout-Familie. */

/* ================= 1 Hero ================= */
.hero {
  position: relative; isolation: isolate;
  min-height: 100dvh; display: flex; align-items: flex-end;
  padding-block: calc(var(--header-total) + var(--space-6)) var(--space-6);
  background: var(--tiefsee); color: var(--weiss);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Das Ausgangsmaterial liegt in 960x540 vor. Die Kompression deckt der flaechige
     Schleier in .hero::before ab. Eine Unschaerfe kostet hier mehr Schaerfe als sie bringt,
     falls sie doch gewuenscht ist: filter: blur(1.5px) saturate(1.06); */
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgb(7 31 38 / 0.92) 0%, rgb(7 31 38 / 0.66) 34%, rgb(7 31 38 / 0.18) 62%, rgb(7 31 38 / 0.34) 100%),
    linear-gradient(to right, rgb(7 31 38 / 0.62), transparent 62%),
    /* Flaechiger Schleier ueber dem ganzen Video, deckt die Kompression ab.
       Die alte Website nutzt dafuer rgba(33,100,128,0.8). Hier wird der Ton geteilt:
       Markenblau nimmt dem Bild die Buntheit, Tiefsee darunter haelt den Kontrast. */
    linear-gradient(rgb(33 101 127 / 0.42), rgb(33 101 127 / 0.42)),
    linear-gradient(rgb(7 31 38 / 0.52), rgb(7 31 38 / 0.52));
}
/* Feines Korn. Es bricht die Kompressionsbloecke des 960er Materials auf,
   ohne Schaerfe zu kosten, und liegt als eigene Ebene ueber dem Schleier. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* minmax(0, 1fr): Die implizite auto-Spalte waere so breit wie das laengste
   unteilbare Stueck der Ueberschrift geworden und damit breiter als .wrap.
   Die Ueberschrift stand dann bis an den Fensterrand ohne Aussenabstand. */
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
/* 24ch haelt die Ueberschrift auf dem Desktop zweizeilig. Mit 17ch brach
   die deutsche Fassung auf drei Zeilen um. */
.hero h1 { color: var(--weiss); max-width: 24ch; }
.hero__sub { font-size: var(--type-lead-size); line-height: var(--type-lead-line); max-width: 52ch; color: var(--nebel); }
.hero .btn-row { margin-top: var(--space-1); }
.hero__usps {
  display: grid; gap: var(--space-2); padding: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .hero__usps { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
.hero__usp { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 0.9375rem; line-height: 1.5; color: var(--weiss); }
.hero__usp .icon { color: var(--hive-tuerkis); margin-top: 2px; }
.hero__usp strong { display: block; font-family: var(--font-text); font-weight: 700; }
.hero__usp span { color: var(--dunst); }

/* Pausenschalter fuer das Hero-Video (WCAG 2.2.2, bewegtes Bild laenger als 5 Sekunden) */
.hero__videobtn {
  /* Oben rechts unter dem Header: dort ist auf jeder Breite Platz, die USP-Karte bleibt frei. */
  position: absolute; z-index: 2; inset-block-start: calc(var(--header-total) + var(--space-3)); inset-inline-end: var(--space-4);
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgb(255 255 255 / 0.28); color: var(--weiss);
  background: rgb(7 31 38 / 0.46);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
@media (hover: hover) and (pointer: fine) { .hero__videobtn:hover { background: rgb(7 31 38 / 0.72); border-color: rgb(255 255 255 / 0.5); } }
.hero__videobtn-i { width: 20px; height: 20px; fill: currentColor; }
.hero__videobtn .is-play { display: none; }
.hero__videobtn[aria-pressed="true"] .is-pause { display: none; }
.hero__videobtn[aria-pressed="true"] .is-play { display: inline; }

/* ================= 2 Partner (Marquee) ================= */
.partner { padding-block: var(--space-6); }
.partner__head { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.partner__label { text-align: center; color: var(--band-muted); font-size: var(--type-klein-size); }

/* ================= 3 Kennzahlen ================= */
.kpis { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }
.kpi__value {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; color: var(--hive-tuerkis);
  display: block; letter-spacing: -0.02em;
}
.kpi__label { margin-top: var(--space-2); color: var(--band-text); font-size: 0.9375rem; line-height: 1.45; }
.kpi + .kpi { position: relative; }
@media (min-width: 900px) { .kpi + .kpi::before { content: ""; position: absolute; left: calc(var(--space-4) / -2); top: 4px; bottom: 4px; width: 1px; background: var(--band-line); } }

/* ================= 4 Leistungen (Bento, 8 Zellen) ================= */
.bento { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 680px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bento { grid-template-columns: repeat(6, 1fr); } }
.bento__cell {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5); border-radius: var(--radius);
  background: var(--band-surface); border: 1px solid var(--band-line);
  transition: transform 240ms var(--ease), border-color 240ms var(--ease);
}
@media (min-width: 1000px) { .bento__cell { grid-column: span 2; } }
@media (hover: hover) and (pointer: fine) { .bento__cell:hover { transform: translateY(-3px); border-color: var(--hive-tuerkis); } }
.bento__cell .icon--lg { color: var(--band-accent); }
.bento__cell h3 { font-size: 1.25rem; hyphens: auto; }
.bento__cell p { color: var(--band-muted); font-size: 0.9375rem; }
.bento__cell .linkarrow { margin-top: auto; padding-top: var(--space-2); }
/* Zwei grosse Kacheln mit Foto */
@media (min-width: 1000px) { .bento__cell--wide { grid-column: span 3; } }
.bento__cell--media { color: var(--weiss); border-color: transparent; min-height: 320px; justify-content: flex-end; }
.bento__cell--media h3, .bento__cell--media p { color: var(--weiss); }
.bento__cell--media p { color: rgb(255 255 255 / 0.86); }
.bento__cell--media .linkarrow { color: var(--hive-tuerkis); }
.bento__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.bento__cell--media::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(7 31 38 / 0.96) 8%, rgb(7 31 38 / 0.82) 48%, rgb(7 31 38 / 0.55));
}
/* Kachel ohne passendes Foto: Wabenmuster aus dem Signet, kein Platzhalterbild */
.bento__cell--pattern { background: var(--tiefsee); border-color: var(--petrol); color: var(--weiss); min-height: 320px; justify-content: flex-end; }
.bento__cell--pattern h3 { color: var(--weiss); }
.bento__cell--pattern p { color: var(--dunst); }
.bento__cell--pattern .linkarrow { color: var(--hive-tuerkis); }
.bento__cell--pattern::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.22;
  background: url("../media/img/allgemein/wabe-muster.svg") repeat; background-size: 240px 140px;
}

/* ================= 5 ACOS (Signature-Diagramm) ================= */
/* minmax(0, 1fr) fuer die einspaltige Grundeinstellung: Die implizite
   auto-Spalte schrumpft nie unter das laengste Wort ihres Inhalts, dadurch
   sprengte die Ueberschrift auf 320px die Spalte. Die zweispaltigen Regeln
   darunter bleiben bewusst bei 1fr: Dort sollen sich die Spalten am Inhalt
   ausrichten (bei 1024px braucht .about__text 497px, mit minmax(0, 1fr) bekaeme
   es nur 400px und liefe ueber). */
.acos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
@media (min-width: 1000px) { .acos { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.acos__list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.acos__list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.acos__list .icon { color: var(--band-accent); margin-top: 3px; }

/* Wabe als Regelkreis: vier Rhomben, einer leuchtet im Takt */
.hive { position: relative; width: min(100%, 460px); margin-inline: auto; aspect-ratio: 1; }
.hive__svg { width: 100%; height: 100%; overflow: visible; }
.hive__cell { fill: var(--band-surface); stroke: var(--band-line); stroke-width: 2; transition: fill 400ms var(--ease), stroke 400ms var(--ease); }
.hive__cell.is-active { fill: var(--hive-tuerkis); stroke: var(--hive-tuerkis); }
.hive__label { font-family: "LFT Etica Mono", ui-monospace, monospace; font-size: 13px; font-weight: 600; fill: var(--band-heading); text-anchor: middle; letter-spacing: 0.06em; }
.hive__cell.is-active + .hive__label, .hive__label.is-active { fill: var(--tiefsee); }
.hive__sub { font-family: var(--font-text); font-size: 11px; fill: var(--band-muted); text-anchor: middle; }
.hive__cell.is-active ~ .hive__sub.is-active { fill: var(--tiefsee); }
.hive__core { fill: var(--band-surface-2); stroke: var(--hive-tuerkis); stroke-width: 2; }
.hive__coretext { font-family: var(--font-text); font-weight: 700; font-size: 12px; fill: var(--band-heading); text-anchor: middle; }
.hive__caption { margin-top: var(--space-4); text-align: center; font-size: var(--type-klein-size); color: var(--band-muted); }

/* ================= 6 Ablauf (Zeitachse) ================= */
.steps { display: grid; gap: var(--space-6); }
.step { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 860px) { .step { grid-template-columns: 96px 1.1fr 0.9fr; gap: var(--space-5); } }
.step__no {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1; color: var(--band-accent); position: relative;
}
@media (min-width: 860px) {
  .step__no::after { content: ""; position: absolute; left: 0.35em; top: 4.2rem; bottom: calc(-1 * var(--space-6) - 1rem); width: 2px; background: var(--band-line); }
  .step:last-child .step__no::after { display: none; }
}
.step__body h3 { margin-bottom: var(--space-2); }
.step__meta { display: grid; gap: 6px; margin-top: var(--space-3); font-size: 0.9375rem; }
.step__meta div { display: flex; gap: 8px; align-items: flex-start; color: var(--band-muted); }
.step__meta .icon { color: var(--band-accent); margin-top: 3px; }
.step__img { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--band-line); }
.step__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }

/* ================= 7 Vergleich ================= */
.compare { display: grid; gap: var(--space-4); }
@media (min-width: 860px) { .compare { grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--band-line); } }
.compare__col { padding: var(--space-5); }
@media (min-width: 860px) { .compare__col { padding: var(--space-5) var(--space-6); } }
.compare__col--them { background: var(--band-surface); border-radius: var(--radius); }
.compare__col--us { background: var(--tuerkis-wash); color: var(--tiefsee); border-radius: var(--radius); }
:root[data-theme="dark"] .compare__col--us { background: var(--petrol-tief); color: var(--nebel); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .compare__col--us { background: var(--petrol-tief); color: var(--nebel); } }
@media (min-width: 860px) { .compare__col { border-radius: 0; } }
.compare__col h3 { margin-bottom: var(--space-4); font-size: 1.5rem; }
.compare__col--us h3 { color: var(--tiefsee); }
:root[data-theme="dark"] .compare__col--us h3 { color: var(--weiss); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .compare__col--us h3 { color: var(--weiss); } }
.compare__item + .compare__item { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--band-line); }
.compare__col--us .compare__item + .compare__item { border-top-color: rgb(15 59 70 / 0.18); }
.compare__item h4 { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.compare__col--us .compare__item h4 { color: var(--tiefsee); }
:root[data-theme="dark"] .compare__col--us .compare__item h4 { color: var(--weiss); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .compare__col--us .compare__item h4 { color: var(--weiss); } }
.compare__item .icon { flex: none; margin-top: 3px; }
.compare__col--them .icon { color: var(--band-muted); }
.compare__col--us .icon { color: var(--tuerkis-text); }
:root[data-theme="dark"] .compare__col--us .icon { color: var(--hive-tuerkis); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .compare__col--us .icon { color: var(--hive-tuerkis); } }
.compare__item p { font-size: 0.9375rem; }
.compare__col--them p { color: var(--band-muted); }
.compare__col--us p { color: rgb(15 59 70 / 0.88); }
:root[data-theme="dark"] .compare__col--us p { color: var(--dunst); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .compare__col--us p { color: var(--dunst); } }

/* ================= 8 Referenzen ================= */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-5); }
.filter {
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--band-line);
  background: transparent; color: var(--band-text); cursor: pointer; font-size: 0.875rem;
  font-family: "LFT Etica Mono", ui-monospace, monospace;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
@media (hover: hover) and (pointer: fine) { .filter:hover { border-color: var(--hive-tuerkis); } }
.filter[aria-pressed="true"] { background: var(--hive-tuerkis); border-color: var(--hive-tuerkis); color: var(--tiefsee); }
.projects { display: grid; gap: var(--space-4); grid-template-columns: 1fr; grid-auto-rows: 1fr; }
@media (min-width: 680px) { .projects { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .projects { grid-template-columns: repeat(3, 1fr); } }
.project {
  display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
  background: var(--band-surface); border: 1px solid var(--band-line);
  transition: transform 240ms var(--ease), border-color 240ms var(--ease), opacity 240ms var(--ease);
}
@media (hover: hover) and (pointer: fine) { .project:hover { transform: translateY(-3px); border-color: var(--hive-tuerkis); } }
.project[hidden] { display: none; }
.project__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--band-surface-2); }
.project__img img { width: 100%; height: 100%; object-fit: cover; }
.project__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.project__body h3 { font-size: 1.0625rem; font-family: var(--font-text); font-weight: 700; line-height: 1.35; }
.project__list { display: grid; gap: 6px; font-size: 0.875rem; color: var(--band-muted); }
.project__list li { display: flex; gap: 8px; align-items: flex-start; }
.project__list .icon { color: var(--band-accent); width: 1em; height: 1em; margin-top: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--space-2); }
.tag {
  font-family: "LFT Etica Mono", ui-monospace, monospace; font-size: 0.6875rem;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: var(--band-surface-2); color: var(--band-muted); border: 1px solid var(--band-line);
}

/* ================= 9 Kundenstimmen ================= */
.quotes { display: grid; gap: var(--space-4); grid-template-columns: 1fr; grid-auto-rows: 1fr; }
@media (min-width: 720px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5); border-radius: var(--radius);
  background: var(--band-surface); border: 1px solid var(--band-line);
  min-height: 248px;
}
.quote__text {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--band-text); font-size: 0.9375rem; line-height: 1.6;
}
.quote__author { display: flex; gap: var(--space-3); align-items: center; margin-top: auto; }
.quote__author img { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; flex: none; }
.quote__name { font-weight: 700; color: var(--band-heading); font-size: 0.9375rem; }
.quote__role { font-size: 0.8125rem; color: var(--band-muted); line-height: 1.4; }
.quote .icon--mark { color: var(--band-accent); width: 1.75rem; height: 1.75rem; }

/* ================= 10 Unternehmen ================= */
.about { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
@media (min-width: 960px) { .about { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.about__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; }
.about__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.about__text p + p { margin-top: var(--space-3); }
.about__facts { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.about__facts li { display: flex; gap: var(--space-2); align-items: flex-start; }
.about__facts .icon { color: var(--band-accent); margin-top: 3px; }

/* ================= 11 Team ================= */
.lead-person {
  display: grid; gap: var(--space-5); align-items: center; margin-bottom: var(--space-6);
  padding: var(--space-5); border-radius: var(--radius);
  background: var(--band-surface); border: 1px solid var(--band-line);
}
@media (min-width: 760px) { .lead-person { grid-template-columns: 220px 1fr; gap: var(--space-6); } }
.lead-person img { border-radius: var(--radius); width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.lead-person blockquote { font-size: var(--type-lead-size); line-height: 1.5; color: var(--band-heading); font-family: var(--font-text); }
.lead-person .role { color: var(--band-muted); font-size: 0.9375rem; margin-top: 4px; }
.team { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .team { grid-template-columns: repeat(5, 1fr); } }
.person { border-radius: var(--radius); overflow: hidden; background: var(--band-surface); border: 1px solid var(--band-line); }
.person__img { aspect-ratio: 2 / 3; overflow: hidden; background: var(--band-surface-2); }
.person__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 400ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .person:hover .person__img img { transform: scale(1.04); } }
.person__body { padding: var(--space-3); }
.person__name { font-weight: 700; font-size: 0.9375rem; color: var(--band-heading); line-height: 1.3; }
.person__role { font-size: 0.8125rem; color: var(--band-muted); margin-top: 2px; }

/* ================= 12 Region ================= */
.region { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 900px) { .region { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-7); align-items: center; } }
.cities { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.city {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  border-radius: 999px; border: 1px solid var(--band-line); background: var(--band-surface);
  font-size: 0.9375rem;
}
.city .icon { color: var(--band-accent); width: 1em; height: 1em; }
.city span { color: var(--band-muted); font-size: 0.8125rem; }

/* ================= 13 FAQ ================= */
.faq-grid { display: grid; gap: 0 var(--space-7); }
@media (min-width: 1000px) { .faq-grid { grid-template-columns: repeat(2, 1fr); } }

/* ================= 14 Karriere ================= */
.career { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 860px) { .career { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-7); } }
.career img { border-radius: var(--radius); width: 100%; }
.career__stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-4); }

/* ================= 15 Kontakt ================= */
.contact { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .contact { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-7); align-items: start; } }
.contact__box { padding: var(--space-5); border-radius: var(--radius); background: var(--band-surface); border: 1px solid var(--band-line); }
.contact__data { display: grid; gap: var(--space-4); }
.contact__data a { color: var(--band-link); font-weight: 700; text-decoration: none; }
.contact__row { display: flex; gap: var(--space-3); align-items: flex-start; }
.contact__row .icon { color: var(--band-accent); margin-top: 3px; }
.contact__row dt { font-size: 0.8125rem; color: var(--band-muted); margin-bottom: 2px; }
.contact__row dd { margin: 0; }

/* ================= Unterseiten: Kopf ================= */
.pagehead {
  position: relative; background: var(--tiefsee); color: var(--weiss);
  padding-block: calc(var(--header-total) + var(--space-7)) var(--space-7);
}
:root[data-theme="dark"] .pagehead { background: var(--nacht-tief); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pagehead { background: var(--nacht-tief); } }
/* hyphens: auto, weil "Digitalisierungsfahrplan" und "Datenschutzerklaerung"
   in der Hausschrift breiter sind als die Spalte. Ohne Trennung ragte die
   Ueberschrift aus dem Satzspiegel und schob die Seite bis 930px Breite
   seitlich weg. Getrennt wird nur, wo es sonst nicht passt. */
.pagehead h1 { color: var(--weiss); max-width: 20ch; hyphens: auto; }
/* Auf Telefonen ein Stueck kleiner als die Tokengroesse. 44px Schaugroesse auf
   einer 343px breiten Spalte zwingt lange Komposita zu zwei Trennstrichen
   ("Digitali-sierungs-fahrplan"). Mit dieser Staffel bleibt es bei einem
   Trennstrich an der Fugenstelle, und die Unterzeile bekommt mehr Luft.
   Keine Aenderung an tokens.css, das ist eine Layoutentscheidung der Sektion. */
@media (max-width: 559px) {
  .pagehead h1 { font-size: clamp(1.75rem, 8.6vw, 3rem); }
}
.pagehead .lead { color: var(--nebel); margin-top: var(--space-4); }
.pagehead .btn-row { margin-top: var(--space-5); }
.pagehead .btn--secondary { --btn-fg: var(--weiss); }
.crumbs { font-family: "LFT Etica Mono", ui-monospace, monospace; font-size: 0.8125rem; color: var(--dunst); margin-bottom: var(--space-4); }
.crumbs a { color: var(--dunst); text-decoration: none; }
.crumbs a:hover { color: var(--hive-tuerkis); }
.crumbs span { margin-inline: 6px; color: var(--petrol); }

/* Zweispaltiger Textblock fuer Unterseiten */
.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-5); margin-bottom: var(--space-2); }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: var(--space-3); }
.prose ul { display: grid; gap: var(--space-2); }
.prose ul li { display: flex; gap: var(--space-2); align-items: flex-start; }
.prose ul .icon { color: var(--band-accent); margin-top: 4px; flex: none; }
.prose ol { display: grid; gap: var(--space-3); counter-reset: n; }
.prose ol li { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-2); counter-increment: n; }
.prose ol li::before { content: counter(n, decimal-leading-zero); font-family: var(--font-display); color: var(--band-accent); font-size: 1.1rem; }

/* Leistungsbausteine der Unterseiten */
.blocks { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 680px) { .blocks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .blocks--3 { grid-template-columns: repeat(3, 1fr); } }
.block { padding: var(--space-5); border-radius: var(--radius); background: var(--band-surface); border: 1px solid var(--band-line); display: flex; flex-direction: column; gap: var(--space-2); }
.block .icon--lg { color: var(--band-accent); }
.block h3 { font-size: 1.1875rem; }
.block p { color: var(--band-muted); font-size: 0.9375rem; }

/* Preis- und Phasenkarten */
.phases { display: grid; gap: var(--space-4); }
@media (min-width: 860px) { .phases { grid-template-columns: repeat(3, 1fr); } }
.phase { padding: var(--space-5); border-radius: var(--radius); border: 1px solid var(--band-line); background: var(--band-surface); display: flex; flex-direction: column; gap: var(--space-2); }
.phase__no { font-family: "LFT Etica Mono", ui-monospace, monospace; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--band-link); }
.phase h3 { font-size: 1.25rem; }
.phase__meta { margin-top: auto; padding-top: var(--space-3); font-size: 0.875rem; color: var(--band-muted); display: grid; gap: 4px; }
.phase--accent { border-color: var(--hive-tuerkis); box-shadow: 0 0 0 1px var(--hive-tuerkis); }

/* CTA-Band */
/* justify-items: start gibt den Kindern ihre max-content-Breite, und die kann
   groesser sein als die Spalte. Auf 320px ragte der Textblock dadurch um 20px
   aus .wrap heraus. max-width: 100% deckelt ihn, ohne die linksbuendige
   Ausrichtung aufzugeben. */
.ctaband { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); justify-items: start; }
.ctaband > * { max-width: 100%; }
@media (min-width: 860px) { .ctaband { grid-template-columns: 1fr auto; align-items: center; gap: var(--space-6); } }
.ctaband h2 { max-width: 22ch; }
.ctaband p { color: var(--band-muted); margin-top: var(--space-2); }

/* Ansprechpartner-Karte auf Unterseiten */
.advisor { display: grid; gap: var(--space-4); align-items: center; padding: var(--space-5); border-radius: var(--radius); background: var(--band-surface); border: 1px solid var(--band-line); }
@media (min-width: 620px) { .advisor { grid-template-columns: 120px 1fr auto; gap: var(--space-5); } }
.advisor img { width: 120px; height: 120px; border-radius: 999px; object-fit: cover; object-position: top; }
.advisor__name { font-weight: 700; color: var(--band-heading); }
.advisor__role { font-size: 0.875rem; color: var(--band-muted); }
.advisor__contact { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); font-size: 0.9375rem; }
.advisor__contact a { display: inline-flex; gap: 6px; align-items: center; color: var(--band-link); text-decoration: none; font-weight: 700; }

/* Beleg-Block unter dem ACOS-Diagramm, volle Breite */
.acos__proof {
  margin-top: var(--space-7); padding-top: var(--space-6);
  border-top: 1px solid var(--band-line);
}
.acos__proof .sealrow > div { max-width: 62ch; }