/*
 * Andreas Gregory — AG Design System 3.2
 * Zentrales Design- und Komponentensystem für Startseite, Projekte und Insights
 *
 * Enthält:
 * - globale Tokens, Typografie, Breiten und Abstände
 * - Header-/Navigations-/Footer-Referenzkomponenten
 * - Startseitenkomponenten
 * - redaktionelle Artikel-/Insight-Komponenten
 * - Projektkomponenten
 * - technische Diagrammsprache
 * - Prozess-, Wirkungs- und Beziehungsdarstellungen
 * - Bildbehandlung und responsive Regeln
 *
 * Architekturregel:
 * Inhalt = WordPress, Struktur = AG-Komponenten/Templates,
 * Gestaltung = dieses Design System, Site-Hülle = Astra/WordPress.
 */

/* =========================================================
   01. TOKENS
   ========================================================= */

body.ag-site-system-active,
.ag-page {
    --ag-color-bg: #ffffff;
    --ag-color-text: #383838;
    --ag-color-heading: #242424;
    --ag-color-muted: #686868;
    --ag-color-line: #d9ddde;
    --ag-color-soft: #f5f6f4;
    --ag-color-tech: #eef2f3;
    --ag-color-brand: #8f1a34;
    --ag-color-accent: #355b66;
    --ag-color-accent-soft: #d9e4e7;
    --ag-color-footer: #222627;
    --ag-color-footer-text: #f3f3f0;
    --ag-color-header-bg: #ffffff;

    --ag-width-wide: 75rem;          /* 1200 px */
    --ag-width-visual: 77.5rem;      /* 1240 px */
    --ag-width-lead: 52rem;          /* 832 px */
    --ag-width-content: 45rem;       /* 720 px */
    --ag-width-statement: 64rem;     /* 1024 px */
    --ag-width-reading: 48rem;       /* 768 px – redaktionelle Lesebreite */
    --ag-width-article-lead: 40rem;  /* 640 px – Lead auf Einzelseiten */

    --ag-page-padding: clamp(1.25rem, 0.8rem + 1.8vw, 2rem);

    --ag-space-1: 0.5rem;
    --ag-space-2: 0.75rem;
    --ag-space-3: 1rem;
    --ag-space-4: 1.5rem;
    --ag-space-5: 2rem;
    --ag-space-6: 3rem;
    --ag-space-7: 4rem;
    --ag-space-8: 6rem;
    --ag-space-9: 8rem;

    --ag-section-space: clamp(4.25rem, 3.2rem + 2.3vw, 6.5rem);
    --ag-grid-gap: clamp(1.5rem, 1rem + 1.4vw, 2.75rem);
    --ag-header-height: 4.25rem;
    --ag-logo-width-desktop: 325px;
    --ag-logo-width-mobile: 220px;
    --ag-header-padding-top: 2rem;
    --ag-logo-nav-gap: 2rem;
    --ag-header-nav-height: 3.35rem;
    --ag-header-sticky-height: 10rem;
    --ag-toc-height: 3rem;

    --ag-font-small: clamp(0.875rem, 0.84rem + 0.1vw, 0.95rem);
    --ag-font-body: clamp(1.0625rem, 1rem + 0.18vw, 1.18rem);
    --ag-font-h3: clamp(1.28rem, 1.15rem + 0.42vw, 1.58rem);
    --ag-font-statement: clamp(1.45rem, 1.18rem + 0.85vw, 1.95rem);
    --ag-font-statement-lg: clamp(1.8rem, 1.3rem + 1.45vw, 2.45rem);
    --ag-font-h2: clamp(2rem, 1.45rem + 1.8vw, 2.9rem);
    --ag-font-hero-statement: clamp(2rem, 1.4rem + 2vw, 2.72rem);
    --ag-font-lead: clamp(1.3rem, 1.08rem + 0.7vw, 1.7rem);
    --ag-font-h1: clamp(3.2rem, 2rem + 3.6vw, 4.8rem);

    color: var(--ag-color-text);
    background: var(--ag-color-bg);
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/* =========================================================
   02. BASE
   ========================================================= */

.ag-page,
.ag-page *,
.ag-page *::before,
.ag-page *::after {
    box-sizing: border-box;
}

.ag-page :where(h1, h2, h3, p, ul, ol, figure) {
    margin: 0;
}

.ag-page :where(ul, ol) {
    padding: 0;
}

.ag-page :where(h1, h2, h3) {
    color: var(--ag-color-heading);
    text-wrap: balance;
}

.ag-page :where(p, li) {
    text-wrap: pretty;
}

.ag-page a {
    color: inherit;
}

.ag-page img {
    max-width: 100%;
}

.ag-page [id] {
    scroll-margin-top: calc(var(--ag-header-height) + var(--ag-toc-height) + 1.5rem);
}

.ag-skip-link {
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 9999;
    transform: translateY(-180%);
    padding: 0.75rem 1rem;
    background: var(--ag-color-heading);
    color: #fff;
    text-decoration: none;
}

.ag-skip-link:focus {
    transform: translateY(0);
}


/* =========================================================
   03. HEADER / PRIMARY NAV
   ========================================================= */

.ag-site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--ag-header-height);
    background: rgba(255,255,255,0.96);
    border-bottom: 1px solid var(--ag-color-line);
    backdrop-filter: blur(10px);
}

.ag-header-inner {
    width: min(calc(100% - (2 * var(--ag-page-padding))), var(--ag-width-wide));
    height: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ag-space-5);
}

.ag-header-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    text-decoration: none;
    white-space: nowrap;
}

.ag-header-brand strong {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ag-color-heading);
}

.ag-header-brand span {
    font-size: 0.85rem;
    color: var(--ag-color-muted);
}

.ag-primary-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 1vw, 1.65rem);
}

.ag-primary-nav a {
    position: relative;
    padding-block: 0.35rem;
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--ag-color-text);
}

.ag-primary-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--ag-color-accent);
    transition: right 160ms ease;
}

.ag-primary-nav a:hover::after,
.ag-primary-nav a:focus-visible::after {
    right: 0;
}

.ag-nav-toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--ag-color-heading);
    cursor: pointer;
}

.ag-nav-toggle span,
.ag-nav-toggle::before,
.ag-nav-toggle::after {
    content: "";
    display: block;
    width: 1.45rem;
    height: 1px;
    margin: 0.32rem auto;
    background: currentColor;
    transition: transform 160ms ease, opacity 160ms ease;
}

.ag-nav-toggle[aria-expanded="true"] span {
    opacity: 0;
}

.ag-nav-toggle[aria-expanded="true"]::before {
    transform: translateY(0.33rem) rotate(45deg);
}

.ag-nav-toggle[aria-expanded="true"]::after {
    transform: translateY(-0.33rem) rotate(-45deg);
}


/* =========================================================
   04. LAYOUT
   ========================================================= */

.ag-main {
    display: block;
}

.ag-section {
    width: 100%;
    padding-block: var(--ag-section-space);
}

.ag-section--soft {
    background: var(--ag-color-soft);
}

.ag-section--tech {
    background: var(--ag-color-tech);
}

.ag-section--bordered {
    border-block-start: 1px solid var(--ag-color-line);
}

/* Redaktionell wählbare vertikale Dichte je Section. */
/* Modifier bewusst spezifischer als die allgemeine .ag-section-Regel.
   So bleiben die redaktionellen Abstandsvarianten auch dann wirksam,
   wenn WordPress/Astra oder Inline-CSS später eine allgemeine
   .ag-section-Paddingregel ausgibt. */
.ag-section.ag-section--compact {
    padding-block: clamp(2.5rem, 2rem + 1.2vw, 3.5rem);
}

.ag-section.ag-section--spacious {
    padding-block: clamp(5.5rem, 4.2rem + 3vw, 8rem);
}

.ag-container {
    width: min(calc(100% - (2 * var(--ag-page-padding))), var(--ag-width-wide));
    margin-inline: auto;
}

.ag-container--wide {
    max-width: var(--ag-width-wide);
}

.ag-container--visual {
    max-width: var(--ag-width-visual);
}

.ag-container--lead {
    max-width: var(--ag-width-lead);
}

.ag-container--content {
    max-width: var(--ag-width-content);
}

.ag-container--statement {
    max-width: var(--ag-width-statement);
}

.ag-grid {
    display: grid;
    gap: var(--ag-grid-gap);
}

.ag-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ag-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ag-split {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: clamp(2.5rem, 2rem + 3vw, 5rem);
    align-items: start;
}


.ag-media-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.25rem, 1.75rem + 2vw, 4rem);
    align-items: start;
    margin-block: var(--ag-space-7) var(--ag-space-6);
}

.ag-media-split--media-left {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.ag-media-split__content {
    min-width: 0;
}

.ag-media-split__content .ag-text {
    max-width: 36rem;
}

.ag-media-split__content .ag-statement {
    margin-block: var(--ag-space-5) 0;
    max-width: 31ch;
}

.ag-media-split__media {
    margin: 0;
    min-width: 0;
}

.ag-media-split__media img {
    display: block;
    width: 100%;
    height: auto;
}

.ag-media-split__media .ag-figure-caption {
    max-width: none;
    margin-block-start: var(--ag-space-3);
}


/* =========================================================
   05. HERO
   ========================================================= */

.ag-hero {
    min-height: clamp(29rem, 58svh, 38rem);
    display: flex;
    align-items: center;
    padding-block: clamp(4rem, 3rem + 3vw, 6rem);
}

.ag-hero-inner {
    width: min(calc(100% - (2 * var(--ag-page-padding))), var(--ag-width-wide));
    margin-inline: auto;
}

.ag-brand {
    font-size: var(--ag-font-small);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color: var(--ag-color-brand);
}

.ag-hero-title {
    margin-block-start: var(--ag-space-3);
    max-width: 16ch;
    font-size: var(--ag-font-h1);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 600;
}

.ag-hero-lead {
    margin-block-start: var(--ag-space-5);
    max-width: 38ch;
    font-size: var(--ag-font-lead);
    line-height: 1.37;
}

.ag-hero .ag-statement--hero {
    margin-block: clamp(3.25rem, 2rem + 2vw, 4.5rem) var(--ag-space-6);
}


/* =========================================================
   06. VISUAL / PHOTO / FIGURE SYSTEM
   ========================================================= */

.ag-visual-band {
    padding-block: 0 clamp(2.75rem, 2.2rem + 1.2vw, 3.75rem);
}

.ag-visual {
    margin: 0;
}

.ag-visual--panorama {
    overflow: hidden;
    aspect-ratio: 14 / 5;
    background: var(--ag-color-tech);
}

.ag-visual--panorama img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ag-figure {
    margin-block: var(--ag-space-7);
}

.ag-figure--diagram {
    padding: clamp(1.5rem, 1rem + 1vw, 2.25rem);
    border: 1px solid var(--ag-color-line);
    background: var(--ag-color-bg);
}

.ag-figure--model {
    max-width: 46rem;
    margin-inline: auto;
}

.ag-figure--model img {
    display: block;
    width: 100%;
    height: auto;
}

.ag-figure-caption {
    margin-block-start: var(--ag-space-3);
    max-width: var(--ag-width-content);
    font-size: var(--ag-font-small);
    line-height: 1.5;
    color: var(--ag-color-muted);
}


/* =========================================================
   07. TOC
   ========================================================= */

.ag-toc {
    position: sticky;
    top: 0;
    z-index: 900;
    height: var(--ag-toc-height);
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(10px);
}

.ag-toc-inner {
    width: min(calc(100% - (2 * var(--ag-page-padding))), var(--ag-width-wide));
    height: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    border-block: 1px solid var(--ag-color-line);
}

.ag-toc-inner::-webkit-scrollbar {
    display: none;
}

.ag-toc-list {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    list-style: none;
    white-space: nowrap;
}

.ag-toc a {
    display: inline-flex;
    align-items: center;
    height: var(--ag-toc-height);
    border-bottom: 2px solid transparent;
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.015em;
    text-decoration: none;
    color: var(--ag-color-muted);
}

.ag-toc a:hover,
.ag-toc a:focus-visible,
.ag-toc a[aria-current="true"] {
    color: var(--ag-color-heading);
    border-bottom-color: var(--ag-color-accent);
}


/* =========================================================
   08. TYPOGRAPHY / CONTENT
   ========================================================= */

.ag-section-header {
    margin-block-end: var(--ag-space-6);
}

.ag-section-kicker {
    display: block;
    margin-block-end: var(--ag-space-3);
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ag-color-brand);
}

.ag-section-title {
    max-width: 19ch;
    font-size: var(--ag-font-h2);
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 500;
}

.ag-section-title--long {
    max-width: 26ch;
    font-size: clamp(1.9rem, 1.5rem + 1.35vw, 2.55rem);
    line-height: 1.1;
}

.ag-subtitle,
.ag-item-title {
    font-size: var(--ag-font-h3);
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 500;
}

.ag-text,
.ag-item-text {
    font-size: var(--ag-font-body);
    line-height: 1.62;
}

.ag-text {
    max-width: var(--ag-width-content);
}

.ag-text--lead {
    max-width: var(--ag-width-lead);
}

.ag-text > * + * {
    margin-block-start: var(--ag-space-4);
}

.ag-text--compact > * + * {
    margin-block-start: var(--ag-space-3);
}

.ag-statement {
    max-width: 32ch;
    margin-block: var(--ag-space-6);
    font-size: var(--ag-font-statement);
    line-height: 1.34;
    letter-spacing: -0.01em;
    font-weight: 500;
    color: var(--ag-color-heading);
}

.ag-statement--large {
    max-width: 28ch;
    margin-block: var(--ag-space-7);
    font-size: var(--ag-font-statement-lg);
    line-height: 1.2;
}

.ag-statement--hero {
    max-width: 24ch;
    font-size: var(--ag-font-hero-statement);
    line-height: 1.14;
    letter-spacing: -0.02em;
}

.ag-statement--question {
    max-width: 30ch;
}

.ag-statement--wide {
    max-width: 39ch;
}

.ag-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45em 0.8em;
    list-style: none;
    font-size: var(--ag-font-small);
    line-height: 1.45;
    letter-spacing: 0.02em;
    font-weight: 500;
    color: var(--ag-color-muted);
}

.ag-terms > li {
    display: inline-flex;
    align-items: center;
}

.ag-terms > li:not(:last-child)::after {
    content: "·";
    margin-inline-start: 0.8em;
    opacity: 0.65;
}


/* =========================================================
   09. TECHNICAL DIAGRAM LANGUAGE
   ========================================================= */

.ag-diagram-label {
    margin-block-end: var(--ag-space-4);
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ag-color-accent);
}

/* System / integration sketch */
.ag-system-diagram {
    margin-block: var(--ag-space-7);
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    border: 1px solid var(--ag-color-line);
    background: var(--ag-color-bg);
}

.ag-system-inputs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--ag-space-4);
}

.ag-system-input {
    position: relative;
    padding: 1rem 0.85rem 1.35rem;
    border-block-start: 2px solid var(--ag-color-heading);
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ag-color-heading);
}

.ag-system-input::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2rem;
    width: 1px;
    height: 2rem;
    background: var(--ag-color-accent);
}

.ag-system-bus {
    position: relative;
    height: 3.5rem;
    margin-inline: 10%;
    border-block-end: 1px solid var(--ag-color-accent);
}

.ag-system-bus::before {
    content: "Integration";
    position: absolute;
    left: 50%;
    bottom: 0.45rem;
    transform: translateX(-50%);
    padding-inline: 0.55rem;
    background: var(--ag-color-bg);
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ag-color-accent);
}

.ag-system-bus::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2.3rem;
    width: 1px;
    height: 2.3rem;
    background: var(--ag-color-accent);
}

.ag-system-output {
    width: min(100%, 30rem);
    margin: 2.3rem auto 0;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--ag-color-accent);
    background: var(--ag-color-tech);
    text-align: center;
}

.ag-system-output strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ag-color-heading);
}

.ag-system-output span {
    display: block;
    margin-block-start: 0.25rem;
    font-size: 0.9rem;
    color: var(--ag-color-muted);
}

/* Process diagram */
.ag-process-diagram {
    position: relative;
    margin-block-start: var(--ag-space-7);
    padding-block-start: 1.2rem;
}

.ag-process-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--ag-grid-gap);
}

.ag-process-grid::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--ag-color-accent);
}

.ag-process-step {
    position: relative;
    padding-block-start: 2rem;
    min-width: 0;
}

.ag-process-step::before {
    content: "";
    position: absolute;
    left: 0;
    top: -0.24rem;
    width: 0.55rem;
    height: 0.55rem;
    border: 1px solid var(--ag-color-accent);
    border-radius: 50%;
    background: var(--ag-color-bg);
}

.ag-process-step:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: -0.78rem;
    right: calc(var(--ag-grid-gap) / -2 - 0.38rem);
    width: 0.76rem;
    font-size: 0.9rem;
    color: var(--ag-color-accent);
    background: var(--ag-color-tech);
    text-align: center;
}

.ag-process-number {
    display: block;
    margin-block-end: 0.55rem;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ag-color-accent);
}

.ag-process-step h3 {
    font-size: clamp(1.2rem, 1.08rem + 0.3vw, 1.42rem);
    line-height: 1.15;
    font-weight: 600;
}

.ag-process-step p {
    margin-block-start: 0.8rem;
    font-size: clamp(0.95rem, 0.92rem + 0.12vw, 1.02rem);
    line-height: 1.52;
}


.ag-process-rail {
    position: relative;
    margin-block-start: var(--ag-space-6);
    padding: 0.85rem 1rem 0.85rem 2.4rem;
    border-block: 1px solid var(--ag-color-accent);
    font-size: 0.82rem;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0.025em;
    color: var(--ag-color-heading);
}

.ag-process-rail::before {
    content: "";
    position: absolute;
    left: 0.9rem;
    top: 50%;
    width: 0.55rem;
    height: 0.55rem;
    border: 1px solid var(--ag-color-accent);
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--ag-color-tech);
}

/* Principle modules */
.ag-principle-grid {
    margin-block-start: var(--ag-space-7);
}

.ag-principle-grid:not(:last-child) {
    margin-block-end: clamp(2rem, 1.55rem + 1vw, 3rem);
}

.ag-item--principle {
    position: relative;
    padding-block-start: 1.45rem;
    border-block-start: 1px solid var(--ag-color-accent);
}

.ag-item--principle::before {
    content: "";
    position: absolute;
    left: 0;
    top: -0.26rem;
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid var(--ag-color-accent);
    background: var(--ag-color-bg);
}

.ag-item-title + .ag-item-text {
    margin-block-start: var(--ag-space-3);
}

/* Structure map */
.ag-structure-diagram {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ag-space-4);
    margin-block: var(--ag-space-7);
    padding-block-end: 3.7rem;
}

.ag-structure-node {
    position: relative;
    padding: 1.15rem 1rem;
    min-height: 5rem;
    display: flex;
    align-items: center;
    border-block-start: 1px solid var(--ag-color-accent);
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 600;
}

.ag-structure-node::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.6rem;
    width: 1px;
    height: 1.6rem;
    background: var(--ag-color-accent);
}

.ag-structure-core {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding-block: 0.65rem;
    border-block: 1px solid var(--ag-color-accent);
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ag-color-accent);
}

/* Impact chain */
.ag-impact-chain {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-block: var(--ag-space-7);
    list-style: none;
    border-block: 1px solid var(--ag-color-line);
}

.ag-impact-chain li {
    position: relative;
    padding: 1.3rem 1rem;
    min-width: 0;
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.22rem);
    line-height: 1.2;
    font-weight: 600;
    color: var(--ag-color-heading);
}

.ag-impact-chain li + li {
    border-inline-start: 1px solid var(--ag-color-line);
}

.ag-impact-chain li:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -0.55rem;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    width: 1.1rem;
    background: var(--ag-color-bg);
    text-align: center;
    color: var(--ag-color-accent);
}


/* =========================================================
   10. SCENARIOS / CARDS
   ========================================================= */

.ag-scenario-grid {
    margin-block-start: var(--ag-space-7);
}

.ag-scenario-grid:not(:last-child) {
    margin-block-end: clamp(2rem, 1.55rem + 1vw, 3rem);
}

.ag-item--scenario {
    padding: clamp(1.5rem, 1.1rem + 1vw, 2.2rem);
    border: 1px solid var(--ag-color-line);
    background: var(--ag-color-bg);
}

.ag-item--scenario .ag-item-title {
    font-size: clamp(1.18rem, 1.08rem + 0.32vw, 1.4rem);
}

.ag-item--scenario .ag-item-text {
    margin-block-start: var(--ag-space-3);
}


/* =========================================================
   11. ACTION / BUTTON
   ========================================================= */

.ag-action {
    margin-block-start: var(--ag-space-7);
    padding-block-start: var(--ag-space-6);
    border-block-start: 1px solid var(--ag-color-line);
}

.ag-action-title {
    font-size: var(--ag-font-h3);
    line-height: 1.2;
    font-weight: 500;
}

.ag-action-text {
    margin-block-start: var(--ag-space-3);
    max-width: var(--ag-width-content);
    font-size: var(--ag-font-body);
    line-height: 1.6;
}

.ag-page .ag-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.1rem;
    margin-block-start: var(--ag-space-5);
    padding: 0.8rem 1.35rem;
    border: 1px solid var(--ag-color-heading);
    background: var(--ag-color-heading);
    color: #fff;
    font-size: 0.96rem;
    line-height: 1;
    font-weight: 600;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
}

.ag-page .ag-button:hover,
.ag-page .ag-button:focus-visible {
    background: transparent;
    color: var(--ag-color-heading);
}


/* =========================================================
   12. FOOTER
   ========================================================= */

.ag-site-footer {
    padding-block: clamp(3.5rem, 3rem + 2vw, 5rem);
    background: var(--ag-color-footer);
    color: var(--ag-color-footer-text);
}

.ag-footer-inner {
    width: min(calc(100% - (2 * var(--ag-page-padding))), var(--ag-width-wide));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--ag-space-7);
}

.ag-footer-brand strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 600;
}

.ag-footer-brand span {
    display: block;
    margin-block-start: 0.35rem;
    color: rgba(255,255,255,0.7);
}

.ag-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: start;
    gap: 0.7rem 1.3rem;
}

.ag-footer-nav a {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.82);
    text-decoration: none;
}

.ag-footer-nav a:hover,
.ag-footer-nav a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.22em;
}

.ag-footer-meta {
    grid-column: 1 / -1;
    padding-block-start: var(--ag-space-5);
    border-block-start: 1px solid rgba(255,255,255,0.18);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.58);
}


/* =========================================================
   13. RESPONSIVE
   ========================================================= */

@media (max-width: 64rem) {
    .ag-process-diagram {
        overflow-x: auto;
        padding-block-end: var(--ag-space-3);
        scrollbar-width: thin;
    }

    .ag-process-grid {
        min-width: 58rem;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .ag-process-step:not(:last-child)::after {
        display: none;
    }

    .ag-process-rail {
        margin-block-start: var(--ag-space-5);
    }

}

@media (max-width: 52rem) {
    .ag-header-brand span {
        display: none;
    }

    .ag-nav-toggle {
        display: block;
    }

    .ag-primary-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: var(--ag-header-height);
        display: none;
        padding: 1rem var(--ag-page-padding) 1.35rem;
        border-bottom: 1px solid var(--ag-color-line);
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .ag-primary-nav[data-open="true"] {
        display: flex;
    }

    .ag-split,
    .ag-media-split,
    .ag-grid--2,
    .ag-grid--3 {
        grid-template-columns: 1fr;
    }

    .ag-media-split {
        gap: var(--ag-space-6);
        align-items: start;
    }

    .ag-media-split--stacked-media-compact .ag-media-split__media {
        width: min(100%, 32rem);
        justify-self: start;
    }

    .ag-system-inputs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ag-system-input:nth-child(1)::after,
    .ag-system-input:nth-child(2)::after {
        height: 1rem;
        bottom: -1rem;
    }

   .ag-system-bus {
        margin-inline: 0;
    }

    .ag-impact-chain {
        grid-template-columns: 1fr;
        border-block: 0;
        border-inline-start: 1px solid var(--ag-color-line);
    }

    .ag-impact-chain li {
        padding: 0.9rem 0 0.9rem 1.35rem;
        border-block-end: 1px solid var(--ag-color-line);
    }

    .ag-impact-chain li + li {
        border-inline-start: 0;
    }

    .ag-impact-chain li:not(:last-child)::after {
        content: "↓";
        left: -0.55rem;
        right: auto;
        top: auto;
        bottom: -0.55rem;
        transform: none;
        background: var(--ag-color-bg);
    }

    .ag-structure-diagram {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-block-end: 3.7rem;
    }

    .ag-footer-inner {
        grid-template-columns: 1fr;
        gap: var(--ag-space-5);
    }

    .ag-footer-nav {
        justify-content: flex-start;
    }

    .ag-footer-meta {
        grid-column: auto;
    }
}

@media (max-width: 37.5rem) {
    .ag-toc {
        position: static;
        height: auto;
    }

    .ag-toc-inner {
        height: auto;
        padding-block: 0.25rem;
    }

    .ag-toc a {
        height: 2.65rem;
    }

    .ag-page [id] {
        scroll-margin-top: calc(var(--ag-header-height) + 1rem);
    }

    .ag-hero {
        min-height: auto;
        padding-block: 4rem 3.5rem;
    }

    .ag-visual-band {
        padding-block-end: 3.5rem;
    }

    .ag-visual--panorama {
        aspect-ratio: 2 / 1;
    }

    .ag-system-inputs,
    .ag-structure-diagram {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--ag-space-3);
    }

    .ag-system-input::after,
    .ag-system-bus {
        display: none;
    }

    .ag-structure-node::after {
        left: 50%;
        bottom: -1rem;
        height: 1rem;
    }

    .ag-system-input {
        padding: 0.75rem 0.65rem 1rem;
        border-block-start-width: 1px;
    }

    .ag-system-output {
        margin-block-start: var(--ag-space-5);
    }

    .ag-process-grid {
        display: block;
        min-width: 0;
        overflow: visible;
        padding-inline-start: 1.4rem;
        border-inline-start: 1px solid var(--ag-color-accent);
    }

    .ag-process-grid::before {
        display: none;
    }

    .ag-process-step {
        padding: 0 0 var(--ag-space-6) 0.9rem;
    }

    .ag-process-step:last-child {
        padding-block-end: 0;
    }

    .ag-process-step::before {
        left: -1.7rem;
        top: 0.3rem;
        background: var(--ag-color-tech);
    }

    .ag-process-step:not(:last-child)::after {
        display: none;
    }

    .ag-process-rail {
        margin-block-start: var(--ag-space-5);
    }

}


/* =========================================================
   14. ACCESSIBILITY / MOTION
   ========================================================= */

.ag-page :focus-visible {
    outline: 2px solid var(--ag-color-accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ag-page *,
    .ag-page *::before,
    .ag-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   15. ARTICLE / EDITORIAL CONTENT
   ========================================================= */

.ag-container--reading {
    max-width: var(--ag-width-reading);
}

.ag-article-hero {
    padding-block: clamp(5rem, 4rem + 4vw, 8rem)
                   clamp(4rem, 3rem + 2vw, 6rem);
}

.ag-article-title {
    max-width: 17ch;
    font-size: var(--ag-font-h1);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 560;
}

.ag-article-lead {
    max-width: var(--ag-width-article-lead);
    margin-block-start: var(--ag-space-5);
    font-size: var(--ag-font-lead);
    line-height: 1.43;
    color: var(--ag-color-text);
}

.ag-meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    margin-block-start: var(--ag-space-5);
    list-style: none;
    font-size: 0.86rem;
    color: var(--ag-color-muted);
}

.ag-meta-list > li {
    display: inline-flex;
    align-items: center;
}

.ag-meta-list > li:not(:last-child)::after {
    content: "·";
    margin-inline-start: 1rem;
    opacity: 0.65;
}

.ag-question-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--ag-space-5);
    margin-block: var(--ag-space-6);
    border-block-start: 1px solid var(--ag-color-line);
}

.ag-question {
    padding-block: var(--ag-space-3);
    border-block-end: 1px solid var(--ag-color-line);
    font-size: clamp(1.05rem, 1rem + 0.2vw, 1.2rem);
    line-height: 1.45;
    color: var(--ag-color-heading);
}

.ag-note {
    margin-block-start: var(--ag-space-5);
    padding: 1rem 0 1rem 1.3rem;
    border-inline-start: 2px solid var(--ag-color-accent);
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ag-color-muted);
}

.ag-related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ag-space-4);
    margin-block-start: var(--ag-space-5);
}

.ag-related-card {
    display: block;
    padding: 1.4rem;
    border: 1px solid var(--ag-color-line);
    background: var(--ag-color-bg);
    text-decoration: none;
}

.ag-related-card small {
    display: block;
    margin-block-end: 0.45rem;
    color: var(--ag-color-muted);
}

.ag-related-card strong {
    display: block;
    color: var(--ag-color-heading);
    line-height: 1.35;
}

.ag-related-card:hover,
.ag-related-card:focus-visible {
    border-color: var(--ag-color-accent);
}


/* =========================================================
   16. GENERIC LOGIC DIAGRAM
   Linien nur für reale Beziehungen.
   ========================================================= */

.ag-logic-diagram {
    margin-block: var(--ag-space-7);
    padding: clamp(1.4rem, 1rem + 1.2vw, 2.4rem);
    border: 1px solid var(--ag-color-line);
    background: var(--ag-color-bg);
}

.ag-logic-inputs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ag-space-4);
}

.ag-logic-input {
    position: relative;
    padding: 1rem 0.8rem 1.4rem;
    border-block-start: 2px solid var(--ag-color-heading);
    font-size: 0.92rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--ag-color-heading);
}

.ag-logic-input::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.8rem;
    width: 1px;
    height: 1.8rem;
    background: var(--ag-color-accent);
}

.ag-logic-bus {
    position: relative;
    height: 3rem;
    margin-inline: 8%;
    border-block-end: 1px solid var(--ag-color-accent);
}

.ag-logic-bus::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.8rem;
    width: 1px;
    height: 1.8rem;
    background: var(--ag-color-accent);
}

.ag-logic-stage {
    width: min(100%, 32rem);
    margin: 1.8rem auto 0;
    padding: 1rem 1.2rem;
    border: 1px solid var(--ag-color-accent);
    background: var(--ag-color-tech);
    text-align: center;
}

.ag-logic-stage strong {
    display: block;
    color: var(--ag-color-heading);
}

.ag-logic-stage span {
    display: block;
    margin-block-start: 0.25rem;
    font-size: 0.9rem;
    color: var(--ag-color-muted);
}

.ag-logic-stage--final {
    border-width: 2px;
    background: var(--ag-color-bg);
}

.ag-logic-arrow {
    margin-block: 0.7rem;
    text-align: center;
    font-size: 1.2rem;
    color: var(--ag-color-accent);
}

.ag-impact-chain--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* =========================================================
   17. PROJECT CONTENT TYPE
   ========================================================= */

.ag-project-hero {
    padding-block: clamp(4.5rem, 3rem + 4vw, 7rem);
}

.ag-project-hero .ag-hero-title {
    max-width: 18ch;
    line-height: 1.02;
}

.ag-project-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-block-start: clamp(3rem, 2rem + 2vw, 4.5rem);
    border: 1px solid var(--ag-color-line);
    background: var(--ag-color-line);
}

/* Keine visuell leeren Restspalten, wenn optionale Projektdaten fehlen. */
.ag-project-meta--1 { grid-template-columns: 1fr; }
.ag-project-meta--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ag-project-meta--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ag-project-meta--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ag-project-meta > div {
    min-height: 6rem;
    padding: 1rem 1.1rem;
    background: var(--ag-color-bg);
}

.ag-project-meta dt {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ag-color-accent);
}

.ag-project-meta dd {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.4;
    color: var(--ag-color-heading);
}

.ag-project-diagram {
    margin-block: var(--ag-space-7);
    padding: clamp(1.4rem, 1rem + 1.2vw, 2.4rem);
    border: 1px solid var(--ag-color-line);
    background: var(--ag-color-bg);
}

.ag-flow-inputs,
.ag-flow-functions,
.ag-role-grid {
    display: grid;
    gap: var(--ag-space-3);
}

.ag-flow-inputs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ag-flow-functions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block-start: 2.5rem;
}

.ag-flow-node {
    position: relative;
    padding: 1rem;
    border-block-start: 2px solid var(--ag-color-heading);
    font-size: 0.94rem;
    line-height: 1.35;
}

.ag-flow-functions .ag-flow-node {
    min-height: 8.5rem;
    border: 1px solid var(--ag-color-accent);
    border-block-start-width: 2px;
}

.ag-flow-node strong {
    display: block;
    margin-block-end: 0.5rem;
    color: var(--ag-color-heading);
}

.ag-flow-merge {
    position: relative;
    width: min(100%, 34rem);
    margin: 2.5rem auto 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--ag-color-accent);
    background: var(--ag-color-tech);
    text-align: center;
    font-weight: 600;
    color: var(--ag-color-heading);
}

.ag-flow-merge::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -2.5rem;
    width: 1px;
    height: 2.5rem;
    background: var(--ag-color-accent);
}

.ag-architecture-layers {
    display: grid;
    gap: 0.85rem;
    margin-block: var(--ag-space-7);
}

.ag-layer {
    display: grid;
    grid-template-columns: 3.5rem 1.25fr 2fr;
    align-items: start;
    gap: var(--ag-space-3);
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--ag-color-line);
    background: var(--ag-color-bg);
}

.ag-layer-code {
    font-weight: 700;
    color: var(--ag-color-accent);
}

.ag-layer strong {
    color: var(--ag-color-heading);
}

.ag-project-timeline {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--ag-space-3);
    margin-block: var(--ag-space-7);
    border-block-start: 1px solid var(--ag-color-accent);
}

.ag-timepoint {
    position: relative;
    padding-block-start: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.ag-timepoint::before {
    content: "";
    position: absolute;
    top: -0.3rem;
    left: 0;
    width: 0.55rem;
    height: 0.55rem;
    border: 1px solid var(--ag-color-accent);
    border-radius: 50%;
    background: var(--ag-color-bg);
}

.ag-timepoint strong {
    display: block;
    margin-block-end: 0.35rem;
    color: var(--ag-color-heading);
}

.ag-role-head {
    padding: 1.2rem 1.4rem;
    border: 1px solid var(--ag-color-accent);
    background: var(--ag-color-tech);
    text-align: center;
}

.ag-role-head strong {
    display: block;
    color: var(--ag-color-heading);
}

.ag-role-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-block-start: var(--ag-space-5);
}

.ag-role-item {
    padding: 0.95rem;
    border-block-start: 1px solid var(--ag-color-accent);
    font-size: 0.88rem;
    line-height: 1.35;
}

.ag-source-note {
    margin-block-start: var(--ag-space-5);
    padding: 1.1rem 1.2rem;
    border-inline-start: 2px solid var(--ag-color-accent);
    background: var(--ag-color-soft);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ag-color-muted);
}


/* Narrow mobile: keep the homepage Hero title as one coherent word.
 * Below ~440 px the global H1 minimum of 3.2rem is too large for
 * “Lösungsarchitekt”. Scale fluidly with the viewport without changing
 * the general H1 system or project/page heroes.
 */
@media (max-width: 27.5rem) {
    .ag-hero > .ag-hero-inner > .ag-hero-title {
        font-size: clamp(2.3rem, 11.6vw, 3.2rem);
    }
}


/* =========================================================
   18. DESIGN SYSTEM 3.0 RESPONSIVE EXTENSIONS
   ========================================================= */

@media (max-width: 60rem) {
    .ag-project-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ag-flow-inputs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ag-project-timeline {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-block-start: 0;
    }

    .ag-timepoint {
        border-block-start: 1px solid var(--ag-color-accent);
    }

    .ag-role-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 52rem) {
    .ag-logic-inputs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ag-related-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 40rem) {
    .ag-project-meta,
    .ag-flow-inputs,
    .ag-flow-functions,
    .ag-project-timeline,
    .ag-role-grid,
    .ag-question-grid,
    .ag-logic-inputs {
        grid-template-columns: 1fr;
    }

    .ag-layer {
        grid-template-columns: 2rem 1fr;
    }

    .ag-layer > :last-child {
        grid-column: 2;
    }

    .ag-logic-input::after,
    .ag-logic-bus {
        display: none;
    }

    .ag-logic-stage {
        margin-block-start: var(--ag-space-3);
    }
}

/* AG Begriffszeile – editor-selectable semantic variants.
 * Base .ag-terms remains the compact Hero language for backwards compatibility.
 */
.ag-terms--standard {
    margin-block: var(--ag-space-6);
    font-size: clamp(1rem, 0.96rem + 0.18vw, 1.12rem);
    line-height: 1.55;
    letter-spacing: 0.01em;
    font-weight: 500;
    color: var(--ag-color-heading);
}

.ag-terms--compact {
    margin-block: var(--ag-space-4);
}