/* ── Structr New UI design tokens: DARK-FIRST ── */
:root {
    --bg-desk: #141310;
    --color-background-primary: #262420;
    --color-background-secondary: #1b1a16;
    --color-background-tertiary: #322f29;
    --color-text-primary: #f3f1ea;
    --color-text-secondary: #bdb9ad;
    --color-text-tertiary: #8b887d;
    --color-border-secondary: #3a3832;
    --color-border-tertiary: #2c2a25;
    --color-text-info: #7fb0ff;
    --color-background-info: #22304a;
    --frame-shadow: 0 16px 44px rgba(0, 0, 0, .55);

    --schema: #7ab02a;
    --data: #ef9f27;
    --screens: #8b83e6;
    --processes: #e06a40;
    --permissions: #4d97e8;

    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --r-md: 8px;
    --r-lg: 12px;
}

@media (prefers-color-scheme:light) {
    :root:not(.theme-dark) {
        --bg-desk: #e4e2d9;
        --color-background-primary: #ffffff;
        --color-background-secondary: #f6f5f0;
        --color-background-tertiary: #eceae1;
        --color-text-primary: #1d1c18;
        --color-text-secondary: #56534b;
        --color-text-tertiary: #8a8678;
        --color-border-secondary: #d8d5ca;
        --color-border-tertiary: #e9e7de;
        --color-text-info: #2b6cb8;
        --color-background-info: #e8f0fb;
        --frame-shadow: 0 12px 34px rgba(40, 38, 30, .10);
    }
}

:root.theme-light {
    --bg-desk: #e4e2d9;
    --color-background-primary: #ffffff;
    --color-background-secondary: #f6f5f0;
    --color-background-tertiary: #eceae1;
    --color-text-primary: #1d1c18;
    --color-text-secondary: #56534b;
    --color-text-tertiary: #8a8678;
    --color-border-secondary: #d8d5ca;
    --color-border-tertiary: #e9e7de;
    --color-text-info: #2b6cb8;
    --color-background-info: #e8f0fb;
    --frame-shadow: 0 12px 34px rgba(40, 38, 30, .10);
}

/* ── invertiertes Theme für Illustrationen ── */
.invert-theme {
    --color-background-primary: #ffffff;
    --color-background-secondary: #f6f5f0;
    --color-background-tertiary: #eceae1;
    --color-text-primary: #1d1c18;
    --color-text-secondary: #56534b;
    --color-text-tertiary: #8a8678;
    --color-border-secondary: #d8d5ca;
    --color-border-tertiary: #e9e7de;
    --frame-shadow: 0 12px 34px rgba(40, 38, 30, .10)
}

@media (prefers-color-scheme:light) {
    :root:not(.theme-dark) .invert-theme {
        --color-background-primary: #262420;
        --color-background-secondary: #1b1a16;
        --color-background-tertiary: #322f29;
        --color-text-primary: #f3f1ea;
        --color-text-secondary: #bdb9ad;
        --color-text-tertiary: #8b887d;
        --color-border-secondary: #3a3832;
        --color-border-tertiary: #2c2a25;
        --frame-shadow: 0 16px 44px rgba(0, 0, 0, .55)
    }
}

:root.theme-light .invert-theme {
    --color-background-primary: #262420;
    --color-background-secondary: #1b1a16;
    --color-background-tertiary: #322f29;
    --color-text-primary: #f3f1ea;
    --color-text-secondary: #bdb9ad;
    --color-text-tertiary: #8b887d;
    --color-border-secondary: #3a3832;
    --color-border-tertiary: #2c2a25;
    --frame-shadow: 0 16px 44px rgba(0, 0, 0, .55)
}

:root.theme-dark .invert-theme {
    --color-background-primary: #ffffff;
    --color-background-secondary: #f6f5f0;
    --color-background-tertiary: #eceae1;
    --color-text-primary: #1d1c18;
    --color-text-secondary: #56534b;
    --color-text-tertiary: #8a8678;
    --color-border-secondary: #d8d5ca;
    --color-border-tertiary: #e9e7de;
    --frame-shadow: 0 12px 34px rgba(40, 38, 30, .10)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

html,
body {
    margin: 0
}

body {
    font-family: var(--font-sans);
    background: var(--bg-desk);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

details.more[open]>summary {
    display: none;
}

.frame {
    width: 100%;
    max-width: 1180px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--frame-shadow);
}

.frame2 {
    width: 100%;
    max-width: 1480px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--frame-shadow);
}

.main-frame {
    width: 100%;
    max-width: 1480px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--frame-shadow);
}

.canvas {
    background-color: var(--color-background-secondary);
    background-image: radial-gradient(var(--color-border-tertiary) 1px, transparent 1.3px);
    background-size: 22px 22px;
}

.logo-word {
    fill: var(--color-text-primary)
}

a {
    color: inherit
}

/* ── header ── */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--color-background-primary) 96%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 0.5px solid var(--color-border-tertiary);
}

nav.main {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px
}

.logo {
    height: 26px;
    display: block
}

nav.main ul {
    display: none;
    align-items: center;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-text-secondary)
}

@media(min-width:1076px) {
    nav.main ul {
        display: flex
    }
}

nav.main ul a {
    text-decoration: none;
    padding: 8px 0;
    transition: color .12s
}

nav.main ul a:hover {
    color: var(--color-text-primary)
}

.dd {
    position: relative
}

.dd>.menu {
    position: absolute;
    top: 100%;
    left: -12px;
    padding-top: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
}

.dd:hover>.menu {
    opacity: 1;
    visibility: visible
}

.menu>div {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--r-md);
    box-shadow: var(--frame-shadow);
    padding: 6px;
    min-width: 200px;
}

.menu a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
    text-decoration: none
}

.menu a:hover {
    background: var(--color-background-tertiary);
    color: var(--color-text-primary)
}

.hactions {
    display: flex;
    align-items: center;
    gap: 12px
}

.hlink {
    display: none;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none
}

.hlink:hover {
    color: var(--color-text-primary)
}

@media(min-width:1076px) {
    .hlink {
        display: inline
    }
}

.tgl {
    border: 0.5px solid var(--color-border-secondary);
    background: var(--color-background-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1;
    padding: 7px;
    border-radius: 7px;
    display: inline-flex
}

.tgl:hover {
    background: var(--color-background-tertiary)
}

.tgl svg {
    width: 14px;
    height: 14px
}

.btn {
    display: inline-block;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: var(--schema);
    border-radius: var(--r-md);
    padding: 10px 20px;
    transition: filter .12s;
    white-space: nowrap;
}

.btn:hover {
    filter: brightness(1.07)
}

.btn.lg {
    font-size: 15px;
    padding: 13px 28px
}

.btn.ghost {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    color: var(--color-text-primary)
}

.btn.ghost:hover {
    background: var(--color-background-tertiary);
    filter: none
}

.btn.accent {
    background: var(--data)
}

/* ── sections ── */
section {
    padding: 72px 44px
}

@media(max-width:820px) {
    section {
        padding: 44px 22px
    }
}

section.alt {
    background: var(--color-background-primary)
}

/*
.wrap {
    max-width: 1040px;
    margin: 0 auto
}
*/

.wrap,
.wrap2 {
    max-width: 1390px;
    margin: 0 auto;
    padding: clamp(26px, 3.4vw, 40px) 24px;
}

.center {
    text-align: center
}

.kicker {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin: 0 0 10px
}

.kicker::before {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--kdash, var(--schema));
    margin-bottom: 10px
}

.center .kicker::before {
    margin-left: auto;
    margin-right: auto
}

/* Schriftstaffel wie auf der Startseite v2 (Abschnitt 16): h1 32-52 px,
   h2 24-36 px, h3 18 px. Untergrenzen = bisherige Handy-Werte (Abschnitt 6). */
h1 {
    font-size: clamp(32px, 3.6vw, 52px);
    line-height: 1.12;
    font-weight: 700;
    margin: 0 0 18px;
    letter-spacing: -.015em
}

h2,
.heading-2 {
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 14px;
    letter-spacing: -.01em
}

h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px
}

.hl {
    display: inline;
    background-image: linear-gradient(90deg, rgb(255, 204, 51) -30%, rgb(153, 204, 0) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.lead {
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin: 0
}

.sub {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0
}

.center .lead,
.center .sub {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto
}

.mt16 {
    margin-top: 16px
}

.mt26 {
    margin-top: 26px;
}

.mt40 {
    margin-top: 40px
}

.mt56 {
    margin-top: 56px
}

.mb16 {
    margin-bottom: 16px
}

.mb26 {
    margin-bottom: 26px
}

.mb40 {
    margin-bottom: 40px
}

.mb56 {
    margin-bottom: 56px
}

/* hero */
.hero {
    padding-top: 72px
}

.hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
    padding: clamp(48px, 7vw, 104px) 24px clamp(48px, 6vw, 88px);
    padding-top: 0px
}

/* Der zweite Textblock im Hero. Er zieht sich mit negativen Raendern ueber
   das Padding der Sektion, liegt dadurch randlos auf voller Breite und
   schliesst den Hero buendig nach unten ab. Weil er
   --color-background-primary traegt, endet der Hero optisch wie eine
   section.alt - die Zebra-Kette dreht sich danach um. */
.hero-second-text {
    background-color: var(--color-background-primary);
    padding: 36px 68px 31px 68px;
    margin: 0px -68px -72px -68px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

@media(max-width:920px) {
    .hero-grid {
        grid-template-columns: 1fr
    }
}

.shot {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--r-lg);
    padding: 8px;
    box-shadow: var(--frame-shadow);
}

.shot img {
    display: block;
    width: 100%;
    border-radius: 8px
}

.shot svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px
}

.shot-wrap {
    position: relative
}

.shot.small {
    position: absolute;
    bottom: -28px;
    left: -28px;
    width: 230px;
    padding: 6px
}

@media(max-width:920px) {
    .shot.small {
        display: none
    }
}

/* ── HTML-Illustrationen (Mockups) ── */
.shot-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 0.5px solid var(--color-border-secondary)
}

.shot-bar .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border-secondary);
    display: inline-block
}

.shot-title {
    margin-left: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-text-tertiary)
}

.shot-body {
    padding: 14px
}

.shot-cols {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 14px;
    align-items: start
}

@media(max-width:640px) {
    .shot-cols {
        grid-template-columns: 1fr
    }
}

.shot-side,
.shot-box {
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--r-md);
    padding: 12px
}

.shot-main {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.shot-label {
    margin: 0 0 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-tertiary)
}

.shot-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--color-text-secondary)
}

.shot-tree ul {
    list-style: none;
    margin: 6px 0 0;
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 0.5px solid var(--color-border-secondary)
}

.shot-tree li.is-active {
    color: var(--color-text-primary);
    font-weight: 600
}

.shot-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px
}

.shot-table th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    padding: 0 8px 8px 0;
    border-bottom: 0.5px solid var(--color-border-secondary)
}

.shot-table td {
    padding: 8px 8px 8px 0;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    color: var(--color-text-secondary);
    vertical-align: middle
}

.shot-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

@media(max-width:640px) {
    .shot-row {
        grid-template-columns: 1fr
    }
}

.shot-box p:last-child {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.pill {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
    color: var(--color-text-secondary);
    background: var(--color-background-tertiary);
    border: 0.5px solid var(--color-border-secondary)
}

.pill.ok {
    color: var(--schema);
    background: color-mix(in srgb, var(--schema) 14%, transparent);
    border-color: color-mix(in srgb, var(--schema) 35%, transparent)
}

.pill.warn {
    color: var(--data);
    background: color-mix(in srgb, var(--data) 14%, transparent);
    border-color: color-mix(in srgb, var(--data) 35%, transparent)
}

.bar {
    display: inline-block;
    width: 120px;
    max-width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--color-background-tertiary);
    overflow: hidden;
    vertical-align: middle
}

.bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--schema)
}

/* cards & grids */
.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px
}

@media(max-width:920px) {

    .grid3,
    .grid4 {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:640px) {

    .grid2,
    .grid3,
    .grid4 {
        grid-template-columns: 1fr
    }
}

.card {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--r-lg);
    padding: 24px;
}

section.alt .card {
    background: var(--color-background-secondary)
}

.card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary)
}

.card p strong {
    color: var(--color-text-primary)
}

a.card {
    display: block;
    text-decoration: none;
    transition: border-color .12s
}

a.card:hover {
    border-color: var(--ac, var(--schema))
}

a.card:hover h3 {
    color: var(--ac, var(--schema))
}

a.card h3 {
    transition: color .12s
}

/* feature icons */
.fi {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border: 0.5px solid var(--color-border-secondary);
    background: var(--color-background-secondary)
}

.fi svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.5
}

/* Icon-Zeile: Icon links, Text rechts, ohne Kasten */
.irow {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    margin-bottom: 20px
}

.irow:last-child {
    margin-bottom: 0
}

.irow>.fi {
    margin-bottom: 0
}

.irow h3 {
    margin: 0
}

.center .fi {
    margin-left: auto;
    margin-right: auto
}

/* steps */
.step .num {
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    margin-bottom: 12px;
    opacity: .85
}

.step p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0
}

/* logo wall + quotes */
.lwall {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px
}

.lwall span {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: 999px;
    padding: 8px 18px;
    background: var(--color-background-primary);
}

section.alt .lwall span {
    background: var(--color-background-secondary)
}

/* ── Mitgliedschafts-Badges ──────────────────────────────────
   Vier Kacheln in .grid4. Die Dateien haben sehr verschiedene Formate,
   deshalb begrenzt max-height sie auf eine gemeinsame optische Hoehe.
   Einen hellen Grund bringt jedes Badge selbst mit - es braucht keinen
   Chip und traegt so durch beide Themes. */
.badges .card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 124px
}

.badges img {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    object-fit: contain
}

/* ── Logo-Karussell ─────────────────────────────────────────
   Endlosband aus zwei identischen Sets. Die Animation verschiebt das Band um
   genau ein Set, dadurch laeuft es nahtlos um. Der Abstand zwischen
   den Logos sitzt als margin-right am li, nicht als gap - sonst fehlte er
   an der Naht zwischen den beiden Sets und das Band wuerde dort stocken. */
.lcar {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 90px,
            #000 calc(100% - 90px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 90px,
            #000 calc(100% - 90px), transparent)
}

.lcar-track {
    display: flex;
    width: max-content;
    animation: lcar-scroll 65s linear infinite
}

.lcar:hover .lcar-track,
.lcar:focus-within .lcar-track {
    animation-play-state: paused
}

/* Laufrichtung nach rechts, mit dem Lesefluss. Startpunkt ist das um ein
   Set nach links versetzte Band, Ziel die Ausgangslage - weil beide Sets
   gleich sind, ist der Ruecksprung unsichtbar. */
@keyframes lcar-scroll {
    from {
        transform: translateX(-50%)
    }

    to {
        transform: translateX(0)
    }
}

.lcar-set {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    padding-inline-start: 0px;
}

/* Die Logos kommen in sehr verschiedenen Formaten und teils mit weissem
   oder farbigem Hintergrund. Der Chip fester Groesse bringt sie optisch
   auf eine Linie und traegt sie durch beide Themes. */
.lcar-set>li {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 158px;
    height: 78px;
    margin-right: 16px;
    padding: 14px 18px;
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--r-lg);
    background: #fff
}

.lcar-set img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .7;
    transition: filter .15s, opacity .15s
}

.lcar-set>li:hover img {
    filter: none;
    opacity: 1
}

blockquote {
    margin: 0;
    font-size: 20px;
    line-height: 1.55;
    font-weight: 500;
    color: var(--color-text-primary)
}

.qwho {
    margin-top: 22px
}

.qwho b {
    display: block;
    font-size: 14px
}

.qwho span {
    font-size: 13px;
    color: var(--color-text-tertiary)
}

.qcard blockquote {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-secondary)
}

.qcard .src {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin: 0 0 12px
}

.qcard .ref {
    font-size: 12px;
    color: var(--color-text-tertiary);
    margin: 14px 0 0
}

/* split section */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center
}

/* Spalten oben ausrichten statt mittig */
.split.top {
    align-items: start
}

/* Steht die Ueberschrift in der rechten Spalte, rutscht sie im
   einspaltigen Umbruch nach vorn - sonst stuende der Inhalt vor
   seiner eigenen h2. */
@media(max-width:920px) {
    .split.text-first>:first-child {
        order: 2
    }

    .split.text-first>:nth-child(2) {
        order: 1
    }
}

.split-40-60 {
    grid-template-columns: 40fr 60fr
}

.split-60-40 {
    grid-template-columns: 60fr 40fr
}

.split-25-75 {
    grid-template-columns: 25fr 75fr
}

.split-75-25 {
    grid-template-columns: 75fr 25fr
}

@media(max-width:920px) {

    .split,
    .split-40-60,
    .split-60-40,
    .split-25-75,
    .split-75-25 {
        grid-template-columns: 1fr
    }
}

.alink {
    color: var(--schema);
    font-weight: 600;
    text-decoration: none;
    font-size: 14px
}

.alink:hover {
    filter: brightness(1.15)
}

/* badge */
.badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--data);
    background: color-mix(in srgb, var(--data) 12%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--data) 35%, transparent);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 22px
}

/* Badge buendig mit der Spaltenoberkante: margin-top:0 hebt den
   p-Standardabstand des Browsers (1em) auf, der das Pill sonst um rund
   11px tiefer setzt als die Ueberschrift oder Karte daneben.
   Das Padding bleibt unveraendert, das Pill sieht aus wie sonst auch. */
.badge.flush {
    display: block;
    width: fit-content;
    margin-top: 0
}

.badge.flush2 {
    display: block;
    width: fit-content;
    margin-top: 0;
    margin-bottom: 0;
}


/* footer */
footer {
    border-top: 0.5px solid var(--color-border-tertiary);
    background: var(--color-background-primary);
    padding: 48px 44px 26px
}

.fgrid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.5fr;
    gap: 32px;
    margin-bottom: 48px
}

@media(max-width:920px) {
    .fgrid {
        grid-template-columns: 1fr 1fr
    }
}

/* Spaltenueberschrift im Footer. War frueher ein h4; die Ueberschriften-
   ebene gehoert dem Seiteninhalt, der Footer kommt ohne aus. */
footer p {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 12px
}

/* Nur die Spaltenueberschrift traegt das Gewicht. Anschrift, Fusszeile und
   Mitgliedschaften sind ebenfalls <p> im Footer und bleiben, wie sie waren. */
.faddr,
.fbar p,
.fmem p {
    font-weight: 400
}

.fbar p {
    font-size: inherit;
    margin: 0
}

footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

footer ul a {
    font-size: 13px;
    color: var(--color-text-secondary);
    text-decoration: none
}

footer ul a:hover {
    color: var(--color-text-primary)
}

.faddr {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-tertiary);
    margin: 14px 0 0
}

.fsoc {
    display: flex;
    gap: 14px;
    margin-top: 16px
}

.fsoc a {
    font-size: 13px;
    color: var(--color-text-tertiary);
    text-decoration: none
}

.fsoc a:hover {
    color: var(--color-text-secondary)
}

.fbar {
    border-top: 0.5px solid var(--color-border-tertiary);
    padding-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--color-text-tertiary)
}

.fbar a {
    color: var(--color-text-tertiary);
    text-decoration: none;
    margin-left: 18px
}

.fbar a:hover {
    color: var(--color-text-secondary)
}

.fmem {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 0.5px solid var(--color-border-tertiary);
    text-align: center
}

.fmem p {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin: 0 0 10px
}

.fmem div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    font-size: 11.5px;
    color: var(--color-text-tertiary)
}

@media (prefers-reduced-motion:reduce) {
    * {
        transition: none !important
    }

    html {
        scroll-behavior: auto
    }
}

.ctaband {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--r-lg);
    padding: 18px 22px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    margin-bottom: 2rem;
}

/*
.ctaband p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary)
}

.ctaband span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  margin-top: 3px
}
*/

.cta-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text-primary)
}

.cta-text {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-tertiary);
    margin-top: 3px
}

.cta-btn {
    font-size: 15px;
    padding: 13px 28px
}

.ph-img {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    border: 1.5px dashed var(--color-border-secondary);
    border-radius: var(--r-lg);
    background: var(--color-background-primary);
    color: var(--color-text-tertiary);
    font-size: 12.5px;
    text-align: center;
    padding: 20px
}

.tip {
    position: relative;
    cursor: help
}

.tip .tt {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 230px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--r-md);
    box-shadow: var(--frame-shadow);
    padding: 10px 12px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s;
    z-index: 20;
    text-align: left
}

.tip:hover .tt {
    opacity: 1;
    visibility: visible
}

.rat {
    display: block;
    text-decoration: none
}

/* ── Companion-Animation (produkt/companion) ── */
.anim {
    --sim-bg: #f6f5f0;
    --sim-panel: #ffffff;
    --sim-surface: #eceae1;
    --sim-border: #d8d5ca;
    --sim-text: #1d1c18;
    --sim-text2: #56534b;
    --sim-text3: #8a8678;
    background: var(--sim-bg);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--r-lg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    display: flex;
    overflow: hidden;
    min-height: 250px;
}

:root.theme-light .anim {
    --sim-bg: #1b1a16;
    --sim-panel: #262420;
    --sim-surface: #322f29;
    --sim-border: #3a3832;
    --sim-text: #f3f1ea;
    --sim-text2: #bdb9ad;
    --sim-text3: #8b887d;
}

@media (prefers-color-scheme:light) {
    :root:not(.theme-dark) .anim {
        --sim-bg: #1b1a16;
        --sim-panel: #262420;
        --sim-surface: #322f29;
        --sim-border: #3a3832;
        --sim-text: #f3f1ea;
        --sim-text2: #bdb9ad;
        --sim-text3: #8b887d;
    }
}

.anim-chat {
    width: 40%;
    min-width: 170px;
    border-right: 0.5px solid var(--sim-border);
    background: var(--sim-panel);
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.anim-msgs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-end;
    padding-bottom: 10px
}

.anim-inputbar {
    border: 0.5px solid var(--sim-border);
    background: var(--sim-bg);
    border-radius: 9px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--sim-text);
    min-height: 32px;
}

.anim-inputbar .ph {
    color: var(--sim-text3)
}

.anim-inputbar .send {
    margin-left: auto;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--schema);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center
}

.anim-inputbar .send svg {
    width: 11px;
    height: 11px;
    stroke: #fff;
    stroke-width: 2;
    fill: none
}

.bubble.user {
    background: var(--sim-surface);
    color: var(--sim-text);
    align-self: flex-end;
    border-bottom-right-radius: 3px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s, transform .3s
}

.bubble.user.on {
    opacity: 1;
    transform: none
}

.anim-canvas {
    flex: 1;
    background-color: var(--sim-bg);
    background-image: radial-gradient(var(--sim-border) 1px, transparent 1.2px);
    background-size: 18px 18px;
    display: flex;
    align-items: center;
}

.bubble {
    font-size: 11.5px;
    line-height: 1.5;
    border-radius: 10px;
    padding: 8px 11px;
    max-width: 100%
}

.bubble.ai {
    background: transparent;
    border: 0.5px solid var(--sim-border);
    color: var(--sim-text2);
    align-self: flex-start;
    border-bottom-left-radius: 3px;
    opacity: 0;
    transition: opacity .4s
}

.bubble.ai.on {
    opacity: 1
}

.caret {
    display: inline-block;
    width: 1.5px;
    height: 12px;
    background: var(--schema);
    margin-left: 1px;
    vertical-align: -2px;
    animation: blink 1s steps(1) infinite
}

@keyframes blink {
    50% {
        opacity: 0
    }
}

#anim-edges path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset .6s ease
}

#anim-edges.play path {
    stroke-dashoffset: 0
}

.an {
    opacity: 0;
    transform: scale(.4);
    transform-origin: center;
    transform-box: fill-box;
    transition: opacity .35s, transform .35s cubic-bezier(.2, 1.4, .4, 1)
}

.an.on {
    opacity: 1;
    transform: scale(1)
}

.an text {
    font-size: 10.5px;
    font-weight: 600;
    fill: var(--sim-text2);
    text-anchor: middle
}

.an text.dl {
    font-size: 8.5px;
    font-weight: 500;
    fill: var(--sim-text3)
}

@media (prefers-reduced-motion:reduce) {
    .an {
        opacity: 1;
        transform: none
    }

    #anim-edges path {
        stroke-dashoffset: 0
    }

    .caret {
        animation: none
    }

    .lcar {
        overflow-x: auto
    }

    .lcar-track {
        animation: none
    }

    .bubble.ai {
        opacity: 1
    }
}

/* ── Benchmark-Block (produkt/companion) ── */
.bench {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--r-lg);
    padding: 26px 28px;
    display: flex;
    align-items: center;
    gap: 34px;
    flex-wrap: wrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    margin-top: 26px;
}

.bench .big {
    font-size: 52px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--schema);
    line-height: 1;
    flex: none
}

.bench .big small {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0;
    margin-top: 8px
}

.bars {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.brow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    color: var(--color-text-secondary)
}

.brow .lbl {
    width: 130px;
    flex: none;
    text-align: right
}

.brow .track {
    flex: 1;
    height: 15px;
    border-radius: 8px;
    background: var(--color-background-tertiary);
    overflow: hidden;
    display: block;
    position: relative
}

.brow .fill {
    height: 100%;
    border-radius: 8px;
    display: block
}

.brow .saved {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: calc(17% + 4px);
    right: 2px;
    border: 1px dashed var(--schema);
    border-radius: 7px;
    opacity: .75;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--schema);
    letter-spacing: .03em;
}

.brow .val {
    width: 64px;
    flex: none;
    font-weight: 600;
    color: var(--color-text-primary)
}

.saved {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: calc(17% + 4px);
    right: 2px;
    border: 1px dashed var(--schema);
    border-radius: 7px;
    opacity: .75;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--schema);
    letter-spacing: .03em
}

.fine {
    font-size: 10.5px;
    color: var(--color-text-tertiary);
    line-height: 1.55;
    margin: 14px 0 0;
    max-width: 720px
}

@media (max-width:820px) {
    .brow .lbl {
        width: 96px
    }
}

/* app navigation shell (setAppShell) */
.app-nav {
    display: flex;
    align-items: center;
    gap: .5rem 1rem;
    flex-wrap: wrap;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid rgba(128, 128, 128, .25);
    margin-bottom: 1.5rem
}

.app-nav .app-brand {
    font-weight: 600;
    margin-right: .5rem
}

.app-nav a {
    text-decoration: none;
    color: inherit;
    padding: .4rem .6rem;
    border-radius: .375rem;
    line-height: 1
}

.app-nav a:hover {
    background: rgba(128, 128, 128, .15)
}

.app-nav .app-signout {
    margin-left: auto
}

.tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px
}

.seclist {
    margin: 0;
    padding-left: 20px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--color-text-secondary)
}

.tiles .tico {
    width: 65px;
    height: 65px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    border: 0.5px solid var(--color-border-secondary);
    background: var(--color-background-secondary)
}

.tiles .tico svg {
    width: 38px;
    height: 38px;
    stroke-width: 1.5
}

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

.split>.tiles.tiles-3 {
    grid-column: 1 / -1
}

@media(max-width:920px) {
    .tiles.tiles-3 {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:640px) {
    .tiles.tiles-3 {
        grid-template-columns: 1fr
    }
}

.card.tile {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon title" "text text";
    grid-template-rows: 65px auto;
    column-gap: 12px;
    align-items: center;
    padding: 25px;
    border-radius: var(--r-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05)
}

.card.tile p {
    grid-area: text;
    align-self: start;
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 0.5px solid var(--color-border-tertiary);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    text-wrap: pretty
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px
}

.consent label {
    margin: 0;
    padding: 0
}


/* ── Kundenstimmen ── */
.card.quote {
    display: flex;
    flex-direction: column;
    padding: 25px;
    border-radius: var(--r-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05)
}

.card.quote blockquote {
    font-size: 15px;
    line-height: 1.7;
    font-weight: 400;
    color: var(--color-text-secondary);
    text-wrap: pretty;
    padding-bottom: 18px;
}

.card.quote blockquote strong {
    font-weight: 600;
    color: var(--color-text-primary)
}

.qmark {
    display: block;
    font-size: 38px;
    line-height: .8;
    font-weight: 700;
    color: var(--ac, var(--schema));
    margin-bottom: 14px
}

/* Kopfzeile: Anführungszeichen links, Sterne rechts */
.qhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px
}

.qhead .qmark {
    margin-bottom: 0
}

.qstars {
    display: flex;
    gap: 3px;
    flex: 0 0 auto;
    color: var(--data)
}

.qstars svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    display: block
}

.qstars svg.off {
    color: var(--color-border-secondary)
}

.qfoot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 0.5px solid var(--color-border-tertiary)
}

.qava {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--color-background-tertiary);
    border: 0.5px solid var(--color-border-secondary)
}

.qini {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--ac, var(--schema));
    background: color-mix(in srgb, var(--ac, var(--schema)) 14%, transparent);
    border: 0.5px solid color-mix(in srgb, var(--ac, var(--schema)) 30%, transparent)
}

.qname {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary)
}

.qrole {
    display: block;
    font-size: 12.5px;
    color: var(--color-text-tertiary);
    margin-top: 2px
}

/* Highlight-Zitat, breit */
.card.quote.feature {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 32px;
    align-items: center;
    padding: 32px
}

.card.quote.feature .qstars {
    margin-bottom: 18px
}

.card.quote.feature .qstars svg {
    width: 20px;
    height: 20px
}

.card.quote.feature blockquote {
    font-size: 20px;
    line-height: 1.55;
    font-weight: 500;
    color: var(--color-text-primary)
}

.card.quote.feature .qportrait {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--r-lg);
    object-fit: cover;
    display: block
}

.quote-lg-wrapper {
    text-align: left;
}

@media(max-width:640px) {
    .card.quote.feature {
        grid-template-columns: 1fr;
        gap: 20px
    }
}

/* ── Case Studies ── */
.card.cs {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 25px;
    overflow: hidden;
    border-radius: var(--r-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05)
}

.card.cs p {
    margin: 12px 0 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    text-wrap: pretty
}

.cs-logo {
    height: 34px;
    display: flex;
    align-items: center;
    margin-bottom: 16px
}

.cs-logo img {
    max-height: 34px;
    max-width: 160px;
    width: auto;
    display: block
}

.card.cs .pill {
    align-self: flex-start
}

/* Der Weiterlesen-Link der Leistungskacheln ist ein Button in der
   Akzentfarbe seiner Kachel. margin-top:auto schiebt ihn an den unteren
   Rand, damit die Buttons einer Reihe auf einer Linie sitzen. */
.cs-more {
    margin-top: auto;
    align-self: flex-start;
    padding: 10px 20px;
    border-radius: var(--r-md);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    background: var(--ac, var(--schema));
    transition: filter .12s
}

.cs-more:hover {
    filter: brightness(1.07)
}

/* Voraussetzung fuer margin-top:auto - ohne Flexspalte bliebe der Button
   direkt am Text haengen. */
.grid3>.card {
    display: flex;
    flex-direction: column
}

/* Der erste Absatz haelt den Abstand zum Button, wenn die Kachel hoeher
   ist als ihr Inhalt. */
.grid3>.card>p {
    margin-bottom: 18px
}

.card.cs .btn {
    align-self: flex-start;
    background: var(--ac, var(--schema))
}

/* Große Kachel: 2 Spalten, mit Projektdaten und Zitat */
/* Große Kachel: 2 Spalten, mit Projektdaten und Zitat */
.tiles.tiles-2 {
    grid-template-columns: 1fr 1fr
}

@media(max-width:820px) {
    .tiles.tiles-2 {
        grid-template-columns: 1fr
    }
}

.card.cs.big {
    padding: 0
}

.card.cs.big .cs-body {
    padding: 32px
}

.card.cs.big h3 {
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: 0 0 12px
}

.card.cs.big>p {
    margin: 0
}

.cs-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px
}

.cs-top .cs-logo {
    margin-bottom: 0
}

.card.cs.big .btn {
    margin-top: 24px
}

/* Akzentbalken oben */
.cs-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--ac, var(--schema));
    margin: -25px -25px 20px
}

/* Kennzahlen */
.cs-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: auto;
    margin-bottom: 18px;
    padding-top: 18px;
    border-top: 0.5px solid var(--color-border-tertiary)
}

.cs-metrics b {
    display: block;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--color-text-primary)
}

.cs-metrics span {
    font-size: 12px;
    color: var(--color-text-tertiary)
}

/* Screenshot-Variante */
.card.cs.shotcard {
    padding: 0
}

.cs-shot {
    aspect-ratio: 16 / 10;
    background: var(--color-background-secondary);
    border-bottom: 0.5px solid var(--color-border-tertiary);
    overflow: hidden
}

.cs-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.cs-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.cs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px
}

.cs-head .pill {
    white-space: normal
}

.cs-head h3 {
    margin: 0
}

/* Akzentfarben */
.ac-schema {
    --ac: var(--schema)
}

.ac-data {
    --ac: var(--data)
}

.ac-screens {
    --ac: var(--screens)
}

.ac-processes {
    --ac: var(--processes)
}

.ac-permissions {
    --ac: var(--permissions)
}


/* Chevron neben den Linktext holen */
nav.main ul .dd>a {
    display: inline-flex;
    align-items: center;
    gap: 5px
}

/* Kein transform/transition: der Header hat backdrop-filter, eine animierte
   Compositing-Ebene darüber flimmert in Chrome und Safari. */
.caret-nav {
    width: 13px;
    height: 13px;
    opacity: .55;
    display: inline-block;
    margin-left: 1px;
    vertical-align: -2px;
}

.dd:hover>a .caret,
.dd:focus-within>a .caret {
    opacity: 1
}

/* Tastaturbedienung – ohne das ist das Menü nur mit der Maus erreichbar */
.dd:focus-within>.menu {
    opacity: 1;
    visibility: visible
}

.submenu a {
    display: block;
    padding: 8px 12px !important;
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
    text-decoration: none
}

/* Kicker neuanordnung SEO Friendly */
.reorder-kicker {
    display: flex;
    flex-direction: column;
}

.reorder-kicker>.kicker {
    order: -1;
}

.reorder-kicker>.eyebrow {
    order: -1;
}

.reviews {
    margin-top: 14px;
}

/* Team-Raster der Startseite: 5 Kacheln, oben 2 mittig, unten 3, alle gleich
   breit. Sechs Spalten, jede Kachel ueber zwei - die erste startet in Spalte 2,
   dadurch rutscht die dritte in die naechste Zeile. */
.tgrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px
}

.tgrid>li {
    grid-column: span 2
}

.tgrid>li:first-child {
    grid-column: 2 / span 2
}

@media(max-width:920px) {
    .tgrid {
        grid-template-columns: 1fr 1fr
    }

    .tgrid>li,
    .tgrid>li:first-child {
        grid-column: auto
    }
}

@media(max-width:640px) {
    .tgrid {
        grid-template-columns: 1fr
    }
}

/* Startseite: die H1 ist der Blickfang der Seite und bricht an Wortgrenzen
   statt mit Trennstrich. Bewusst nur hier - die uebrigen Seiten behalten
   'hyphens: auto'. */
.hero.home h1 {
    hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual
}

.tgrid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-md);
    display: block
}

/* FAQ-Akkordeon der Startseite: die Frage traegt das Gewicht einer h3,
   die Antwort steht eingeklappt darunter. */
.faq summary {
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-text-primary)
}

.faq summary::marker {
    color: var(--ac, var(--schema))
}

/* ── Startseite: Logowand im Hero ── */
.hero .lwall {
    gap: 18px
}

.hero .lwall span {
    font-size: 15px;
    padding: 12px 26px
}

/* ── Startseite: Vorteile als Akkordeon ──
   Kein Kachelraster, sondern eine Liste aufklappbarer Zeilen. Das li bleibt
   Listenelement, das Icon steht inline vor der Ueberschrift. */
.vlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px
}

.vlist summary {
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-text-primary)
}

.vlist summary::marker {
    color: var(--ac, var(--schema))
}

.vlist .tico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 12px 0 0;
    border-radius: 11px;
    border: 0.5px solid var(--color-border-secondary);
    background: var(--color-background-primary);
    vertical-align: middle
}

.vlist .tico svg {
    width: 24px;
    height: 24px
}

/* Ablauflisten tragen ihre Nummer in .num, deshalb keine Listenpunkte */
ol.grid4,
ul.grid4 {
    list-style: none;
    margin: 0;
    padding: 0
}

/* Die Listen-Resets oben und .tiles setzen margin:0 und stehen hinter den
   Abstands-Utilities. Ohne diese Zeilen bliebe ein mt40/mb40 an einer
   Liste wirkungslos - der Kachelblock klebte am Schaubild darueber. */
ol.mt40,
ul.mt40 {
    margin-top: 40px
}

ol.mt56,
ul.mt56 {
    margin-top: 56px
}

ol.mb16,
ul.mb16 {
    margin-bottom: 16px
}

ol.mb26,
ul.mb26 {
    margin-bottom: 26px
}

ol.mb40,
ul.mb40 {
    margin-bottom: 40px
}

ol.mb56,
ul.mb56 {
    margin-bottom: 56px
}

/* Icons tragen die Akzentfarbe ihrer Karte. stroke bleibt currentColor
   (Regel C6), die Farbe kommt aus --ac der .ac-*-Klasse. */
.fi,
.tiles .tico,
.vlist .tico {
    color: var(--ac, var(--color-text-primary))
}


.case-studies {
    margin-top: 14px;
}

.contact-person {
    margin-top: auto;
    min-height: 200px;
    padding: 0;
    overflow: hidden;
    background: var(--color-background-tertiary);
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: stretch;
}

.contact-person-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    border-right: 0.5px solid var(--color-border-secondary);
}

.contact-person-body {
    padding: 20px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
}

.contact-person-kicker {
    margin-bottom: 8px;
    font-size: 18px !important;
}

.contact-person-name {
    font-size: 17px;
    margin-bottom: 8px;
}

.contact-person-meta {
    margin: 0;
    font-size: 13.5px;
    color: var(--color-text-secondary);
}

.contact-person-meta a {
    color: var(--color-text-secondary);
}

.contact-person-cta {
    align-self: center;
}

.form-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--color-text-primary);
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--r-md);
    padding: 9px 12px;
    margin-bottom: 14px;
    outline: none;
}

textarea.form-input {
    resize: none;
}

.form-checkbox-row {
    display: flex;
    flex-direction: row;
}

.form-checkbox-row label {
    font-size: 14px;
    padding-left: 10px;
}

.btn-block {
    width: 100%;
}

.multiselect {
    position: relative;
}

.multiselect-toggle {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--r-md);
    background: var(--color-background-primary);
    font-size: 13.5px;
    font-family: var(--font-sans);
    color: var(--color-text-primary);
    user-select: none;
}

.multiselect-toggle::-webkit-details-marker {
    display: none;
}

.multiselect-toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-text-secondary);
    border-bottom: 2px solid var(--color-text-secondary);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.multiselect[open] .multiselect-toggle::after {
    transform: rotate(-135deg);
}

.multiselect-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 10;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--r-md);
    padding: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    max-height: 220px;
    overflow-y: auto;
}

.multiselect-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13.5px;
    cursor: pointer;
}

.multiselect-option:hover {
    background: rgba(0, 0, 0, 0.04);
}

.multiselect-option input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

.multiselect-option input[type="checkbox"]:checked {
    background: var(--color-text-primary);
    border-color: var(--color-text-primary);
}

.multiselect-option input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border-right: 2px solid var(--color-background-primary);
    border-bottom: 2px solid var(--color-background-primary);
    transform: rotate(45deg);
}

.hidden {
    display: none;
}

#contact-form,
#contact-success,
#contact-fail {
    height: 100%;
}

#contact-success,
#contact-fail {
    align-content: center;
}

#contact-success svg {
    color: var(--color-success, #7ab02a);
    stroke: var(--color-success, #7ab02a);
}

.stretch {
    align-items: stretch !important;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.thumb {
    height: 200px;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    zoom: 1.095;
}

.clustercard.tile {
    padding: 0;
    overflow: hidden;
    transition: border-color .15s ease
}

.clustercard.tile:hover {
    border-color: var(--ac)
}

.tile-body {
    padding: 22px
}

.kicker-orange {
    --kdash: var(--data);
    margin-bottom: 16px
}

.kicker-green {
    --kdash: var(--schema);
    margin-bottom: 16px
}

.kicket-red {
    --kdash: var(--processes);
    margin-bottom: 16px
}

.kicker-blue {
    --kdash: var(--permissions);
    margin-bottom: 16px
}

.hover-orange {
    --ac: var(--data);
}

.hover-green {
    --ac: var(--schema);
}

.hover-red {
    --ac: var(--processes);
}

.hover-blue {
    --ac: var(--permissions);
}

/* ═══════════════════════════════════════════════════════════════════════
   VORSCHLAG MOBIL + RECHTSTEXTE - muss nach /css/app.css ins Projekt.
   Diese Datei ist nur eine Kopie und wird beim naechsten Abgleich
   ueberschrieben. Genau das ist schon zweimal passiert und hat die
   `.legal`-Regel und die Klappen-Regeln (Abschnitt 12) mitgenommen -
   beide stehen deshalb hier im Block und nicht mehr verstreut im
   Dokument.

   SCHON IM DOKUMENT REPARIERT, nicht mehr hier: die beiden Media Queries
   fuer `.tiles.tiles-3` oberhalb bei `.card.tile`. Dort standen Selektor
   und Deklarationsblock getrennt:

       @media(max-width:920px) { .tiles.tiles-3 }  {  grid-template-columns: 1fr 1fr }

   Damit war die Regel ungueltig und fiel ersatzlos aus - die Kacheln
   behielten auf dem Handy drei Spalten zu je 85 px. Die Korrektur ist in
   dieser Fassung enthalten; wer sie beim naechsten Abgleich verliert,
   holt sich den Fehler zurueck.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 Rechtstexte: lange Adressen im Linktext duerfen brechen. `anywhere`
   steht am Block, nicht am `a` - nur dort geht der Umbruchpunkt in die
   Mindestbreite der Spalte ein. */
.legal {
    overflow-wrap: anywhere;
}

/* 2 Die uebrigen Kachelraster und die Kopfzeilen-Aktionen. */
@media (max-width: 640px) {

    /* `.tiles` steht auf `auto-fit, minmax(300px, 1fr)` und `.tiles-2` auf
	   zwei festen Spalten - auf einem 320-px-Schirm passt beides nicht mehr.
	   `.tiles-3` braucht hier nichts mehr, das erledigt die reparierte
	   Regel oben im Dokument. */
    .tiles,
    .tiles.tiles-2 {
        grid-template-columns: 1fr;
    }

    .hactions {
        flex-wrap: wrap;
    }
}

/* 3 Grid-Spuren duerfen schrumpfen. Die Untergrenze einer `1fr`-Spur ist
   sonst ihr laengstes Wort: Die Spalte waechst ueber den Rahmen hinaus, und
   weil `.frame2` `overflow:hidden` traegt, wird der Text abgeschnitten statt
   umzubrechen. Betraf Hero, Footer-Raster, Kacheln und die Textspalten. */
.hero-grid>*,
.split>*,
.fgrid>*,
.grid2>*,
.grid3>*,
.tiles>*,
.tgrid>*,
.card.tile>*,
.irow>* {
    min-width: 0;
}

/* 4 Die festen Kartenraster haben keine Umbruchregel - `.grid2` blieb
   auch auf 360 px zweispaltig, ein Knopf darin passte nicht mehr. */
@media (max-width: 920px) {

    .grid3,
    .grid4 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {

    .grid2,
    .grid3,
    .grid4 {
        grid-template-columns: 1fr;
    }
}

/* 5 Lange Woerter und Adressen brechen, statt die Spalte zu sprengen. */
@media (max-width: 640px) {

    h1,
    h2,
    h3,
    h4,
    p,
    li,
    a,
    strong,
    summary {
        overflow-wrap: break-word;
    }
}

/* 6 Schriftgrade und Raender fuer kleine Schirme. Ohne diese Regeln bleibt
   die h1 bei 46 px und der Seitenrahmen frisst 50 der 390 px Bildschirm. */
@media (max-width: 640px) {
    body {
        padding: 10px 8px;
    }

    section {
        padding: 40px 18px;
    }

    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 24px;
    }

    .hero {
        padding-top: 32px;
    }

    .hero-second-text {
        padding: 28px 18px 24px;
        margin: 0 -18px -40px;
    }
}

/* 7 Footer. Er trug 44 px Innenabstand links und rechts - von 372 px
   Rahmenbreite blieben 284 px Inhalt. Und das Logo steht mit einer festen
   Breite im Markup (`style="width: 175px"`), passte damit nicht in seine
   126-px-Spalte und lief in die Nachbarspalte ("Ressourcen"). `max-width`
   deckelt die Inline-Breite ohne `!important`, weil `width` und
   `max-width` zwei Eigenschaften sind. */
@media (max-width: 640px) {
    footer {
        padding: 36px 18px 22px;
    }
}

footer .fgrid img {
    max-width: 100%;
    height: auto;
}

/* 8 Contact Person Box. Ihr Koerper stand auf einem starren Raster
   (`minmax(0,1fr) auto`): Sobald die Karte schmal wird, nimmt der Knopf
   seine 160 px und die Textspalte faellt auf 0 - der Name bricht dann in
   einzelne Buchstaben. Das passiert nicht nur auf dem Handy, sondern auch
   bei etwa 1024 px, wo der Kontaktabschnitt zweispaltig wird und die Karte
   nur 415 px breit ist.

   Flexbox statt Raster loest es ohne Breakpoint: Der Knopf rutscht unter
   den Namen, sobald der Text sonst unter 140 px faellt. Auf dem Handy
   kommt das Bild zusaetzlich nach oben, sonst blieben vom Koerper nur
   138 px. */
.contact-person-body {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
}

.contact-person-body>div {
    flex: 1 1 140px;
    min-width: 0;
}

.contact-person-cta {
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .contact-person {
        grid-template-columns: 1fr;
        min-height: 0;
        margin-top: 2rem;
    }

    .contact-person-image {
        height: 200px;
        border-right: 0;
        object-position: 50% 0%;
        border-bottom: 0.5px solid var(--color-border-secondary);
    }
}

/* 9 Hero-CTA. Die Aktionszeile stand als Inline-Style im Markup
   (`display:flex; justify-content:space-between`) und war damit fuer keine
   Media Query erreichbar: Auf dem Handy quetschte sie Knopf und Kontakte
   nebeneinander, die Rufnummer brach mitten entzwei. Als Klassen laesst
   sie sich umbrechen - Knopf ueber volle Breite, Kontakte darunter. */
.cta-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 22px;
}

.cta-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13.5px;
}

.cta-contact a {
    white-space: nowrap;
    color: var(--color-text-secondary);
}

@media (max-width: 640px) {
    .ctaband {
        padding: 16px 18px;
    }

    .cta-title {
        font-size: 19px;
    }

    .cta-text {
        font-size: 14px;
    }

    .cta-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cta-btn {
        width: 100%;
    }

    .cta-contact {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 4px 18px;
    }
}

/* 10 Bildkacheln. `.card.tile` ist ein Raster aus Icon und Titel; eine
   Kachel mit Vorschaubild braucht stattdessen eine Spalte: Bild oben,
   Text darunter. `:has(> .thumb)` trennt die beiden Faelle, ohne dass die
   Kachel eine zweite Klasse braucht.

   Auf dem Handy wird das Bild absichtlich breiter als seine Kachel
   gezogen (200 % und -40 % Rand): Die Motive sind Querformate, ein
   Ausschnitt daraus traegt bei 190 px Hoehe mehr als das ganze Bild in
   Briefmarkengroesse. */
.card.tile:has(> .thumb) {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-areas: none;
    grid-template-rows: none;
    column-gap: 0;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s ease, box-shadow .18s ease
}

.card.tile>.thumb { display: block; width: 100%; height: auto; aspect-ratio: 1558 / 805; object-fit: cover; object-position: 50% 0; margin: 0; background: var(--color-background-secondary); border-bottom: 0.5px solid var(--color-border-tertiary); transition: transform .4s ease; zoom: 1 }

.card.tile>.tile-body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.card.tile>.tile-body h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    text-wrap: pretty
}

.card.tile>.tile-body p {
    grid-area: auto;
    margin: 0;
    padding: 0;
    border-top: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary)
}

.card.tile:has(> .thumb):hover {
    border-color: var(--ac, var(--color-text-tertiary));
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07)
}

.card.tile:has(> .thumb):hover>.thumb {
    transform: scale(1.035)
}

.card.tile:has(> .thumb):focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: 2px
}

@media(max-width:640px) {
    .card.tile>.thumb {
        aspect-ratio: auto;
        height: 190px;
        width: 200%;
        max-width: none;
        margin-left: -40%;
        object-fit: cover;
        object-position: 47% 13%;
    }

    .card.tile>.tile-body {
        padding: 16px 18px
    }
}

/* 11 Schaubilder. Frueher waren sie unter 640 px ausgeblendet: In 297 px
   Bildbreite waeren die Beschriftungen eines Querformats 3-4 px gross
   gewesen. Seit Kapitel 5.8 gibt es zu jedem Schaubild eine
   Hochformat-Fassung, die in 420 Einheiten statt 760 rechnet und lesbar
   bleibt; `finalize.py` haengt sie als `<source media>` davor.
   Ausgeblendet wird deshalb nichts mehr.

   `<picture>` ist ein Inline-Element und liesse unter dem Bild eine
   Grundlinienluecke - es bekommt dieselbe Behandlung wie das `<img>`
   darin. */
.shot picture {
    display: block;
}

/* 12 Aufklapptext. Die Klappe bleibt offen stehen und beschriftet sich um
   ("Mehr lesen." / "Weniger lesen."). Frueher stand oben im Dokument
   `details.more[open] > summary { display: none }` - die Klappe verschwand
   also beim Aufklappen und der Text liess sich nicht wieder einklappen.
   `display: list-item` holt sie zurueck, `order: 2` setzt sie unter den
   Text, ohne die DOM-Reihenfolge anzutasten (`summary` bleibt erstes Kind,
   wie `<details>` es verlangt).

   Die beiden Beschriftungen stehen als `span` im `summary`; sichtbar ist
   immer nur eine. Markup dazu in `tools/story_build.py` und im Leitfaden,
   Kapitel 4. */
details.more[open] {
    display: flex;
    flex-direction: column;
}

details.more[open]>summary {
    display: list-item;
    order: 2;
    margin-top: 10px;
}

details.more>summary .more-less,
details.more[open]>summary .more-more {
    display: none;
}

details.more[open]>summary .more-less {
    display: inline;
}

/* 13 Mobile Navigation. Bis 900 px blendet `nav.main ul` aus und es gab
   keinen Ersatz - die Seite war auf dem Handy nur ueber den Footer
   navigierbar. Der Burger oeffnet dieselbe Liste als Tafel unter dem
   Header; die Untermenues stehen darin aufgeklappt, weil es auf dem
   Handy kein Hover gibt. Markup und die zwoelf Zeilen Javascript stehen
   in `reference/mobile-nav.html`. */
.burger {
    display: flex;
    flex: none;
    /* im Flex-Header sonst zusammengedrueckt */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--r-md);
    background: var(--color-background-primary);
    cursor: pointer;
}

.burger span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--color-text-primary);
    transition: transform .15s, opacity .15s;
}

header[data-open] .burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

header[data-open] .burger span:nth-child(2) {
    opacity: 0;
}

header[data-open] .burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 1076px) {
    .burger {
        display: none;
    }
}

/* Der CTA im Header. Auf dem Handy nimmt er neben Logo und Burger zu viel
   Platz - dort traegt ihn die aufgeklappte Tafel. Die Klasse sitzt am
   Knopf selbst (`<a class="btn header-cta">`), damit andere Knoepfe in
   `.hactions` davon unberuehrt bleiben. */
@media (max-width: 640px) {
    .header-cta {
        display: none;
    }
}

@media (max-width: 1075px) {

    /* Der Burger sitzt in `.hactions` neben dem CTA, die Liste bekommt eine
	   hohe `order` - sie klappt damit immer UNTER die Kopfzeile, egal an
	   welcher Stelle sie im Markup steht. */
    nav.main {
        flex-wrap: wrap;
    }

    nav.main>ul {
        order: 9;
    }

    header[data-open] nav.main ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        margin-top: 12px;
        padding-top: 8px;
        border-top: 0.5px solid var(--color-border-tertiary);
        font-size: 15px;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
    }

    header[data-open] nav.main ul>li>a {
        display: block;
        padding: 12px 4px;
        color: var(--color-text-primary);
    }

    /* Untermenues aufgeklappt statt auf Hover - ohne Zeigegeraet gibt es
	   kein Hover, und ein zweiter Klickzustand braeuchte mehr Javascript. */
    header[data-open] .dd>.menu {
        position: static;
        opacity: 1;
        visibility: visible;
        padding: 0 0 6px;
    }

    header[data-open] .menu>div {
        border: 0;
        box-shadow: none;
        background: none;
        padding: 0;
        min-width: 0;
    }

    header[data-open] .submenu a {
        padding: 9px 4px 9px 18px;
        font-size: 14px;
    }

    header[data-open] .caret-nav {
        display: none;
    }
}

.vsplit {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--color-background-primary)
}

/* Die Liste: ein li je Vorteil. `display: contents` nimmt dem li seine
   eigene Box, damit Label und Panel Rasterzellen von .vsplit bleiben. */
.vsplit>li {
    display: contents
}

/* Radios steuern nur den Zustand und dürfen keine Grid-Zelle belegen */
.vsplit-in {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none
}

.vsplit label {
    grid-column: 1;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 14px;
    padding: 17px 20px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text-secondary);
    background: var(--color-background-secondary);
    border-left: 3px solid transparent;
    border-right: 0.5px solid var(--color-border-secondary);
    border-bottom: 0.5px solid var(--color-border-tertiary)
}

.vsplit>label:last-of-type,
.vsplit>li:last-child label {
    border-bottom: 0
}

.vsplit label svg {
    width: 22px;
    height: 22px;
    color: var(--ac, var(--color-text-tertiary))
}

.vsplit label:hover {
    background: var(--color-background-tertiary);
    color: var(--color-text-primary)
}

/* Chevron nur in der mobilen Ansicht sichtbar */
.vsplit .vchev {
    width: 16px;
    height: 16px;
    justify-self: end;
    color: var(--color-text-tertiary);
    opacity: 0
}

/* Der Spann statt "1 / -1": ohne grid-template-rows gibt es keine explizite
   Zeilenachse, gegen die -1 auflösen könnte. Die Zahl liegt bewusst über
   jeder vorkommenden Eintragszahl (7 auf der Startseite, 9 auf "Über
   Structr"); leere implizite Zeilen sind 0 hoch und kosten nichts. */
.vsplit-panel {
    grid-column: 2;
    grid-row: 1 / span 99;
    display: none;
    padding: 34px 36px;
    background: var(--color-background-primary)
}

.vsplit-panel .vkick {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ac);
    margin-bottom: 14px
}

.vsplit-panel h3 {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.3
}

.vsplit-panel p {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-text-secondary);
    max-width: 62ch;
    text-wrap: pretty
}

/* Zustand – Geschwister-Kombinatoren statt :has() */
.vsplit-in:checked+label+.vsplit-panel {
    display: block
}

.vsplit-in:checked+label {
    background: var(--color-background-primary);
    color: var(--color-text-primary);
    border-left-color: var(--ac)
}

/* ── MOBILE ── einspaltiges Akkordeon: Panel steht unter seinem Label ── */

@media(max-width:840px) {
    .vsplit {
        grid-template-columns: 1fr
    }

    .vsplit label {
        grid-column: 1;
        padding: 16px 18px;
        font-size: 15px;
        border-right: 0
    }

    .vsplit label .vchev {
        opacity: 1
    }

    .vsplit-panel {
        grid-column: 1;
        grid-row: auto;
        padding: 24px 18px 24px 35px;
        border-bottom: 0.5px solid var(--color-border-tertiary)
    }

    .vsplit-panel .vkick {
        display: none;
    }

    /* Die Überschrift steht bereits im Label darüber */
    .vsplit-panel h3 {
        display: none
    }

    .vsplit-panel p {
        font-size: 14.5px;
        line-height: 1.7
    }

    .vsplit-in:checked+label .vchev {
        transform: rotate(180deg);
        color: var(--ac)
    }
}

/* 14 Autorenbild in der Icon-Zeile. `.fi` ist die 52-px-Kachel fuer ein
   Strichicon; in der Metazeile eines Blogposts steht an derselben Stelle
   das Portraet des Autors. Ohne Regel liefe das Bild in seiner
   natuerlichen Groesse aus der Kachel heraus - `.fi svg` deckt nur SVG ab.
   Der Zuschnitt sitzt am Bild, nicht an der Kachel, damit die Kachel
   dieselbe bleibt wie daneben. */
.fi img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px;
}

.pa-hero {
    max-width: 780px
}

.pa-hero h1 {
    margin: 10px 0 14px;
    font-size: clamp(30px, 4.4vw, 46px);
    line-height: 1.12;
    letter-spacing: -.02em;
    text-wrap: pretty
}

.pa-hero .lede {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 62ch;
    text-wrap: pretty
}

.pa-facts {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 28px;
    margin: 30px 0 0;
    padding: 0
}

.pa-facts>li {
    padding-top: 16px;
    border-top: 2px solid var(--schema)
}

.pa-facts b {
    display: block;
    font-size: 16px;
    margin-bottom: 4px
}

.pa-facts span {
    display: block;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-text-secondary)
}

.pa-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 32px;
    align-items: start
}

.pa-split .qz {
    max-width: none;
    margin: 0
}

.pa-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 520px;
    padding: 28px;
    border: 1.5px dashed var(--color-border-secondary);
    border-radius: var(--r-lg);
    background: var(--color-background-primary);
    color: var(--color-text-tertiary);
    font-size: 13.5px;
    text-align: center
}

.pa-aside {
    position: sticky;
    top: 92px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--r-lg);
    padding: 26px 26px 22px
}

.pa-aside-kick {
    margin: 0 0 16px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--color-text-tertiary)
}

.pa-steps {
    list-style: none;
    counter-reset: pa;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px
}

.pa-steps>li {
    counter-increment: pa;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 14px
}

.pa-steps>li::before {
    content: counter(pa);
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-background-tertiary);
    color: var(--color-text-secondary);
    font-size: 12.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.pa-steps b {
    grid-column: 2;
    display: block;
    font-size: 15px;
    margin-bottom: 3px
}

.pa-steps span {
    grid-column: 2;
    display: block;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-text-secondary)
}

.pa-aside-note {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 0.5px solid var(--color-border-tertiary);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--color-text-secondary)
}

@media(max-width:980px) {
    .pa-split {
        grid-template-columns: minmax(0, 1fr)
    }

    .pa-aside {
        position: static
    }
}

@media(max-width:820px) {
    .pa-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px
    }

    .pa-slot {
        min-height: 360px;
        padding: 0px;
        border: none;
    }
}


.pa-usp {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px
}

.pa-usp-card {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--r-lg);
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.pa-usp-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 0.5px solid var(--color-border-secondary);
    background: var(--color-background-secondary);
    color: var(--schema)
}

.pa-usp-ico svg {
    width: 24px;
    height: 24px
}

.pa-usp-card h3 {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.35;
    text-wrap: pretty
}

.pa-usp-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    text-wrap: pretty
}

@media(max-width:820px) {
    .pa-usp {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:520px) {
    .pa-usp {
        grid-template-columns: minmax(0, 1fr)
    }
}

/* 15 Vergleichstabelle (produkt/vergleich) */
.cmp {
    overflow-x: auto;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--r-lg);
    background: var(--color-background-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.cmp table {
    width: 100%;
    min-width: 860px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
}

.cmp th,
.cmp td {
    padding: 14px 18px;
    text-align: left;
    vertical-align: middle;
    color: var(--color-text-primary);
    background: var(--color-background-primary);
    border-right: 1px solid var(--color-border-secondary);
    border-bottom: 1px solid var(--color-border-secondary);
}

.cmp tr> :last-child {
    border-right: 0
}

.cmp tbody tr:last-child>* {
    border-bottom: 0
}

.cmp thead th {
    padding: 18px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    color: var(--color-background-primary);
    background: var(--color-text-tertiary);
    border-bottom: 0;
}

.cmp thead th:first-child {
    width: 24%;
    text-align: left;
    color: var(--color-text-secondary);
    background: var(--color-background-secondary);
}

.cmp thead th.cmp-own {
    color: #ffffff;
    background: var(--schema);
}

.cmp tbody th {
    font-weight: 600;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
}

.cmp th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}

.cmp tbody tr:nth-child(even)>td {
    background: var(--color-background-tertiary);
}

.cmp tbody tr:nth-child(even)>th {
    background: color-mix(in srgb, var(--color-background-tertiary) 70%, var(--color-background-secondary));
}

.cmp tbody td.cmp-own {
    background: color-mix(in srgb, var(--schema) 9%, var(--color-background-primary));
}

.cmp tbody tr:nth-child(even)>td.cmp-own {
    background: color-mix(in srgb, var(--schema) 14%, var(--color-background-primary));
}

.cmp small {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text-tertiary);
}

.cmp ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cmp li+li {
    margin-top: 2px
}

.cmp .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    border-width: 1px;
}

.cmp .pill::before {
    font-size: 15px;
    font-weight: 800;
}

.cmp .pill.ok::before {
    content: "\2713"
}

.cmp .pill.no {
    color: var(--processes);
    background: color-mix(in srgb, var(--processes) 12%, transparent);
    border-color: color-mix(in srgb, var(--processes) 40%, transparent);
}

.cmp .pill.no::before {
    content: "\2715"
}

.cmp .pill.warn::before {
    content: "!"
}

.border-b {
    border-bottom: 0.5px solid var(--color-border-tertiary)
}

.border-t {
    border-top: 0.5px solid var(--color-border-tertiary)
}

.border-r {
    border-right: 0.5px solid var(--color-border-tertiary)
}

.container-xl {
    max-width: 1240px;
    margin: 0 auto
}

.stack {
    display: flex;
    flex-direction: column
}

.gap-6 {
    gap: 6px
}

.gap-7 {
    gap: 7px
}

.gap-8 {
    gap: 8px
}

.gap-10 {
    gap: 10px
}

.gap-12 {
    gap: 12px
}

.gap-28 {
    gap: 28px
}

.min-w-0 {
    min-width: 0
}

.grid {
    display: grid
}

.self-start {
    align-self: flex-start
}

.pt-12 {
    padding-top: 12px
}

.measure-60 {
    max-width: 60ch
}

.icon {
    display: block;
    flex: none
}

.rotate-transition {
    transition: transform 0.2s ease
}

.accent-bar {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--schema)
}

.eyebrow-lg {
    font-size: clamp(13.5px, 1.05vw, 15.5px);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-secondary)
}

.display-title {
    container-type: inline-size;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 700
}

.display-line { display: block; white-space: normal; font-size: clamp(32px, 8.6cqi, 58px); text-wrap: balance }

/* Ab 32 px Untergrenze passt die Zeile nicht mehr ungebrochen in den Hero
   (8.6cqi < 32 px) - dort darf sie umbrechen, statt weiter zu schrumpfen.
   Sonst war die h1 auf dem Handy kleiner als die h2. */
@container (max-width:372px) {
    .display-line {
        white-space: normal
    }
}

.lead-lg {
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.55;
    color: var(--color-text-secondary);
    max-width: 52ch;
    text-wrap: pretty
}

.body-sm {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    text-wrap: pretty
}

.disclosure {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-text-secondary)
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px
}

.btn-primary {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--schema);
    border-radius: 8px;
    padding: 13px 26px;
    line-height: 1.2
}

.btn-secondary {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-secondary);
    background: var(--color-background-primary);
    border-radius: 8px;
    padding: 12px 24px;
    line-height: 1.2
}

.stage-figure {
    min-width: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 620px
}

.app-window {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    aspect-ratio: 1;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 14px;
    box-shadow: var(--frame-shadow);
    overflow: hidden
}

.pane-bar {
    display: flex;
    align-items: center;
    padding: 10px 12px
}

.label-strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary)
}

.chat-log {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px
}

.chat-bubble {
    align-self: flex-end;
    max-width: 92%;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
    border-radius: 10px;
    padding: 8px 10px;
    text-wrap: pretty
}

.chat-pending {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--color-text-tertiary);
    border: 0.5px dashed var(--color-border-secondary);
    border-radius: 10px;
    padding: 8px 10px
}

.chat-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 10px;
    padding: 9px 10px
}

.chat-text {
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-primary);
    text-wrap: pretty
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.chip {
    font-size: 11px;
    border-radius: 6px;
    padding: 4px 9px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--color-text-secondary);
    border: 0.5px solid var(--color-border-secondary)
}

.chip.chip-info {
    font-weight: 600;
    color: var(--color-text-info);
    background: var(--color-background-info);
    border-color: var(--color-text-info)
}

.chip.chip-success {
    font-weight: 600;
    color: var(--schema);
    border-color: var(--schema)
}

.input-fake {
    flex: 1;
    min-width: 0;
    font-size: 11.5px;
    color: var(--color-text-tertiary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 8px;
    padding: 7px 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.canvas-pane {
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 14px;
    outline: 1.5px dashed transparent;
    outline-offset: -5px;
    transition: outline-color 0.5s ease
}

.canvas-pane.is-active {
    outline-color: var(--color-text-info)
}

.relative-full {
    position: relative;
    width: 100%
}

.svg-fluid {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible
}

.fade-line {
    transition: opacity 0.7s ease, stroke 0.7s ease
}

.fade-group {
    transition: opacity 0.7s ease
}

.fade-halo {
    transition: opacity 0.6s ease
}

.op-0 { opacity: 0 }

.op-1 { opacity: 1 }

.map-label { position: absolute; transform: translate(-50%,-50%); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); pointer-events: none; white-space: nowrap }

.map-label-types { left: 32.05%; top: 6.2% }

.map-label-screens { left: 70.5%; top: 37.2% }

.map-label-processes { left: 34.6%; top: 65.7% }

.bg-primary {
    background: var(--color-background-primary)
}

.section-pad {
    padding: clamp(26px, 3.4vw, 40px) 24px
}

.gap-14 {
    gap: 14px
}

.gap-24 {
    gap: 24px
}

.max-w-880 {
    max-width: 880px
}

.pb-24 {
    padding-bottom: 24px
}

.pt-24 {
    padding-top: 24px
}

.accent-bar.accent-permissions {
    background: var(--permissions)
}

.quote-lg {
    margin: 0;
    font-size: clamp(19px, 1.9vw, 26px);
    line-height: 1.4;
    letter-spacing: -0.01em;
    font-weight: 500;
    color: var(--color-text-primary);
    text-wrap: pretty
}

.caption {
    font-size: 13.5px;
    color: var(--color-text-tertiary)
}

.split-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 40px
}

.lead-md {
    flex: 1 1 320px;
    min-width: 0;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.55;
    color: var(--color-text-secondary);
    text-wrap: pretty
}

.strong-primary {
    font-weight: 700;
    color: var(--color-text-primary)
}

.logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    padding: 0 14px;
    box-sizing: border-box;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 12px;
    color: var(--color-text-tertiary);
    filter: grayscale(1);
    opacity: 0.85;
    overflow: hidden
}

.logo-img {
    display: block;
    max-width: 100%;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain
}

.logo-fallback {
    display: none;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.1;
    text-align: center
}

.grid-auto-480 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
    gap: 24px 32px
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    align-items: flex-start
}

.badge-item {
    flex: 1 1 0;
    min-width: max-content
}

.badge-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 7px;
    width: max-content;
    color: var(--color-text-primary);
    text-decoration: none
}

.badge-head {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 40px
}

.badge-neo4j {
    display: flex;
    align-items: center;
    height: 40px;
    box-sizing: border-box;
    background: #014063;
    border-radius: 8px;
    padding: 0 5px
}

.badge-neo4j-img {
    height: 34px;
    width: auto;
    display: block
}

.badge-caption {
    font-size: 12px;
    color: var(--color-text-tertiary)
}

.badge-caption.with-flag {
    display: flex;
    align-items: center;
    gap: 7px
}

.edition-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 15px 0 12px;
    box-sizing: border-box;
    border-radius: 8px;
    background-size: 7px 7px, 100% 100%
}

.edition-pill.edition-community {
    border: 0.5px solid #3a3a36;
    color: #f4f3ee;
    background-color: #151513;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.13) 0.8px, transparent 1.2px), linear-gradient(90deg, rgba(255, 204, 51, 0.10), rgba(153, 204, 0, 0.06))
}

.edition-pill.edition-enterprise {
    border: 0.5px solid #2f5a92;
    color: #f2f6fc;
    background-color: #163258;
    background-image: radial-gradient(circle, rgba(160, 200, 255, 0.18) 0.8px, transparent 1.2px), linear-gradient(90deg, rgba(77, 151, 232, 0.22), rgba(77, 151, 232, 0.04))
}

.edition-pill.edition-cloud {
    border: 0.5px solid #c9d4ea;
    color: #0b2a6b;
    background-color: #ffffff;
    background-image: radial-gradient(circle, rgba(0, 51, 153, 0.10) 0.8px, transparent 1.2px), linear-gradient(90deg, rgba(0, 51, 153, 0.05), rgba(255, 204, 0, 0.08))
}

.edition-mark {
    height: 22px;
    width: auto;
    display: block;
    flex: none
}

.edition-name {
    font-size: 16px;
    font-weight: 650;
    white-space: nowrap
}

.flag-de {
    display: flex;
    flex-direction: column;
    width: 18px;
    height: 12px;
    border-radius: 2px;
    overflow: hidden;
    flex: none
}

.flag-de>span {
    flex: 1
}

.flag-de-black {
    background: #1d1c18
}

.flag-de-red {
    background: #dd0000
}

.flag-de-gold {
    background: #ffce00
}

.flag-eu {
    display: grid;
    place-items: center;
    width: 18px;
    height: 12px;
    border-radius: 2px;
    background: #003399;
    flex: none
}

.flag-eu-stars {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px dotted #ffcc00
}

.anchor-offset {
    scroll-margin-top: 70px
}

.section-pad-lg {
    padding: clamp(52px, 6.5vw, 96px) 24px
}

.gap-40 {
    gap: 40px
}

.max-w-760 {
    max-width: 760px
}

.eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-tertiary)
}

.section-title {
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    text-wrap: balance
}

.section-lead {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    text-wrap: pretty
}

.grid-auto-250 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 16px
}

.pillar-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 22px 8px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-top: 3px solid var(--ac, var(--schema));
    border-radius: 14px;
    min-width: 0
}

.card-head {
    display: flex;
    align-items: center;
    gap: 11px
}

.ring-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid var(--ac, var(--schema));
    box-sizing: border-box;
    flex: none
}

.card-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em
}

.body-md {
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text-secondary);
    text-wrap: pretty
}

.divided-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 0;
    border-top: 0.5px solid var(--color-border-tertiary)
}

.item-title {
    font-size: 14px;
    font-weight: 600
}

.item-text {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--color-text-secondary);
    text-wrap: pretty
}

.grid-auto-380-end {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 20px 56px;
    align-items: end
}

.grid-auto-420 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 16px
}

.grid-auto-280 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr))
}

.gap-4 {
    gap: 4px
}

.gap-5 {
    gap: 5px
}

.gap-12-32 {
    gap: 12px 32px
}

.pt-26 {
    padding-top: 26px
}

.d-block {
    display: block
}

.text-secondary {
    color: var(--color-text-secondary)
}

.ac-info {
    --ac: var(--color-text-info)
}

.compare-card {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0
}

.accent-top {
    border-top: 3px solid var(--ac, var(--schema))
}

.illustration-box {
    position: relative;
    height: 250px;
    border-radius: 10px;
    background: var(--color-background-secondary);
    overflow: hidden
}

.canvas-sm {
    background-color: var(--color-background-secondary);
    background-image: radial-gradient(var(--color-border-tertiary) 1px, transparent 1.3px);
    background-size: 18px 18px
}

.doc-card {
    position: absolute;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px
}

.doc-card-a {
    left: 9%;
    top: 14%;
    width: 34%;
    transform: rotate(-5deg)
}

.doc-card-b {
    right: 10%;
    top: 9%;
    width: 30%;
    transform: rotate(4deg)
}

.doc-card-c {
    left: 30%;
    bottom: 10%;
    width: 38%;
    transform: rotate(2deg)
}

.skeleton-line {
    height: 6px;
    border-radius: 3px;
    background: var(--color-border-tertiary)
}

.skeleton-line.is-strong {
    background: var(--color-border-secondary)
}

.w-45 {
    width: 45%
}

.w-55 {
    width: 55%
}

.w-60 {
    width: 60%
}

.w-65 {
    width: 65%
}

.w-70 {
    width: 70%
}

.w-75 {
    width: 75%
}

.w-85 {
    width: 85%
}

.w-90 {
    width: 90%
}

.w-100 {
    width: 100%
}

.question-dot {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px dashed var(--color-text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-tertiary)
}

.question-dot.is-large {
    width: 30px;
    height: 30px;
    font-size: 15px
}

.question-dot-a {
    left: 47%;
    top: 38%
}

.question-dot-b {
    left: 14%;
    bottom: 18%
}

.question-dot-c {
    right: 16%;
    bottom: 30%
}

.caption-title {
    font-size: 15.5px;
    font-weight: 650
}

.caption-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-tertiary)
}

.caption-text.is-secondary {
    color: var(--color-text-secondary)
}

.graph-stage {
    position: relative;
    height: 100%;
    aspect-ratio: 360/250;
    margin: 0 auto
}

.graph-edges {
    stroke: var(--color-text-tertiary);
    stroke-width: 1.5;
    fill: none
}

.graph-edge-new {
    stroke: var(--color-text-info);
    stroke-width: 1.8;
    stroke-dasharray: 4 4;
    fill: none
}

.graph-node {
    stroke: var(--ac, var(--schema));
    stroke-width: 2.5;
    fill: var(--color-background-primary)
}

.graph-node.is-center {
    stroke-width: 3
}

.graph-node-new {
    stroke: var(--color-text-info);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    fill: var(--color-background-primary)
}

.graph-plus-dot {
    fill: var(--color-text-info)
}

.graph-plus {
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round
}

.graph-label {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap
}

.graph-label.is-center {
    font-size: 13px;
    font-weight: 700
}

.graph-label.is-new {
    color: var(--color-text-info)
}

.graph-pos-tl {
    left: 17.2%;
    top: 23.2%
}

.graph-pos-bl {
    left: 17.2%;
    top: 72.8%
}

.graph-pos-tr { left: 82.8%; top: 23.2% }

.graph-pos-br { left: 82.8%; top: 72.8% }

.graph-pos-c { left: 50%; top: 47.2% }

.graph-pos-b { left: 50%; top: 85.6% }

.step-card { display: flex; gap: 14px; padding: 18px 20px; border: 0.5px solid var(--color-border-secondary); border-radius: 12px; background: var(--color-background-primary); min-width: 0 }

.step-num { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ac,var(--schema)); box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--color-text-secondary) }

.step-title { font-size: 15px; font-weight: 650; line-height: 1.35 }

.body-sm-tight { font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); text-wrap: pretty }

.feature-item { display: flex; gap: 12px; font-size: 14px; line-height: 1.5; min-width: 0 }

.bullet-ring { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ac,var(--color-text-info)); box-sizing: border-box; margin-top: 4px }

.emph { font-weight: 600; color: var(--color-text-primary) }

.grid-auto-400-center {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: 32px clamp(32px, 5vw, 72px);
    align-items: center
}

.grid-auto-260 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr))
}

.gap-16 {
    gap: 16px
}

.flex-none {
    flex: none
}

.list-none {
    list-style: none
}

.note-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    padding: 16px 18px;
    border: 0.5px solid var(--ac, var(--screens));
    border-radius: 12px;
    background: var(--color-background-secondary)
}

.note-title {
    font-size: 14.5px;
    font-weight: 650
}

.body-compact {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-secondary);
    text-wrap: pretty
}

.figure-center {
    min-width: 0;
    display: flex;
    justify-content: center
}

.venn-stage {
    position: relative;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1
}

.venn-circle {
    stroke: var(--ac, var(--schema));
    stroke-width: 2.5;
    fill: var(--ac, var(--schema));
    fill-opacity: 0.08
}

.venn-center {
    fill: var(--color-background-primary);
    stroke: var(--color-border-secondary);
    stroke-width: 1
}

.venn-label {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap
}

.venn-label.is-center {
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.25
}

.venn-pos-tl {
    left: 23%;
    top: 25%
}

.venn-pos-tr {
    left: 77%;
    top: 25%
}

.venn-pos-bl {
    left: 23%;
    top: 75%
}

.venn-pos-br {
    left: 77%;
    top: 75%
}

.venn-pos-c {
    left: 50%;
    top: 50%
}

.venn-center-title {
    font-size: 15px;
    font-weight: 700
}

.venn-center-sub {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--color-text-secondary)
}

.service-card {
    background: var(--color-background-secondary);
    border: 0.5px solid var(--color-border-secondary);
    border-top: 3px solid var(--ac, var(--schema));
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}

.card-title-sm {
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -0.01em
}

.chain-item {
    position: relative;
    min-width: 0;
    display: flex
}

.chain-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--color-border-secondary);
    background: var(--color-background-primary);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    min-width: 0
}

.chain-head {
    display: flex;
    align-items: center;
    gap: 10px
}

.chain-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--ac, var(--processes));
    box-sizing: border-box;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ac, var(--processes));
    flex: none
}

.chain-title {
    font-size: 18px;
    font-weight: 650
}

.mono-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-primary)
}

.chain-step .chain-text {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    text-wrap: pretty
}

.chain-cta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ac, var(--processes));
    margin-top: auto;
    min-height: 45px;
    transform: translateY(2px);
    transition: transform 0.2s ease
}

.chain-arrow {
    position: absolute;
    right: -28px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    overflow: visible
}

.grid-auto-400-start {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: 32px clamp(32px, 5vw, 72px);
    align-items: start
}

.grid-auto-240 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr))
}

.info-card {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}

.ring-dot-sm {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2.5px solid var(--ac, var(--schema));
    box-sizing: border-box
}

.container-md {
    max-width: 980px;
    margin: 0 auto
}

.container-lg {
    max-width: 1080px;
    margin: 0 auto
}

.gap-32 {
    gap: 32px
}

.max-w-700 {
    max-width: 700px
}

.compare-table {
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 14px;
    overflow: hidden;
    background: var(--color-background-primary)
}

.compare-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    border-bottom: 0.5px solid var(--color-border-tertiary)
}

.compare-row.is-head {
    background: var(--color-background-secondary);
    border-bottom: 0.5px solid var(--color-border-secondary)
}

.compare-row.is-foot {
    background: var(--color-background-secondary);
    border-bottom: 0
}

.compare-corner {
    padding: 16px 18px
}

.compare-colhead {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 0.5px solid var(--color-border-tertiary)
}

.compare-colhead.is-featured {
    box-shadow: inset 0 3px 0 var(--ac, var(--schema))
}

.compare-colsub {
    font-size: 12.5px;
    color: var(--color-text-tertiary)
}

.compare-rowhead {
    padding: 13px 18px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4
}

.compare-cell {
    padding: 13px 18px;
    border-left: 0.5px solid var(--color-border-tertiary);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--color-text-secondary)
}

.compare-cell.is-featured {
    color: var(--color-text-primary)
}

.compare-foot {
    padding: 14px 18px;
    border-left: 0.5px solid var(--color-border-tertiary)
}

.compare-foot.is-cta {
    padding: 12px 18px
}

.check-icon {
    display: block;
    stroke: var(--ac, var(--schema))
}

.text-tertiary {
    color: var(--color-text-tertiary)
}

.link-sm {
    font-size: 13.5px;
    font-weight: 500
}

.btn-primary-sm {
    display: inline-block;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: var(--schema);
    border-radius: 8px;
    padding: 9px 16px
}

.canvas-dots-lg {
    background-color: var(--color-background-secondary);
    background-image: radial-gradient(var(--color-border-tertiary) 1px, transparent 1.3px);
    background-size: 22px 22px
}

.split-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 0;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--frame-shadow)
}

.portrait-figure {
    position: relative;
    min-height: 320px;
    background: #0f1a22
}

.portrait-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    display: block
}

.photo-badge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #f3f1ea;
    background: rgba(20, 19, 16, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 7px;
    padding: 6px 10px
}

.split-card-body {
    padding: clamp(28px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    min-width: 0;
    grid-column: span 1
}

.section-title.is-compact {
    font-size: clamp(24px, 2.6vw, 34px)
}

.button-row-tight {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 4px
}

[data-logos] {
    grid-template-columns: repeat(8, minmax(0, 1fr))
}

[data-seo] summary::-webkit-details-marker {
    display: none
}

[data-seo][open] [data-chev] {
    transform: rotate(90deg)
}

[data-chain] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px
}

[data-hero-y] {
    color: #6eaef0
}

.theme-light [data-hero-y] {
    color: #2f74c0
}

[data-hero-g] {
    background-image: linear-gradient(90deg, rgb(255, 204, 51) -30%, rgb(153, 204, 0) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
    max-width: 100%
}

[data-hero-phases]>[data-phase] {
    grid-area: 1/1;
    transition: opacity .6s ease, visibility .6s
}

.chain-step:hover,
.chain-step:focus-visible {
    border-color: var(--processes);
    background: color-mix(in oklab, var(--processes) 8%, var(--color-background-primary))
}

.chain-step:hover .chain-cta,
.chain-step:focus-visible .chain-cta {
    opacity: 1;
    transform: none
}

.disclosure:hover {
    color: var(--color-text-primary)
}

.btn-primary:hover,
.btn-primary-sm:hover {
    filter: brightness(1.07);
    color: #fff
}

.btn-secondary:hover,
.badge-link:hover {
    opacity: .75;
    color: var(--color-text-primary)
}

.link-sm:hover {
    text-decoration: underline
}

/* 16 Startseite v2 (output/home-v2.sections.html). Rest des <style>-Blocks
   aus input/misc/new-home-v2.html; die Klassen der Seite stehen im Block
   darueber. Die Element-Resets der Vorlage galten seitenweit und
   kollidieren mit unseren h1/h2/h3/a-Regeln - sie gelten deshalb nur unter
   `.hv2-page` (jede Sektion der Seite). `:where()` haelt die Spezifitaet
   auf dem Wert der Vorlage, damit Klassen wie .btn-primary weiter gewinnen. */
:where(.hv2-page) :is(h1, h2, h3, p, ul, ol, figure) {
    margin: 0
}

:where(.hv2-page) :is(ul, ol) {
    padding: 0;
    list-style: none
}

:where(.hv2-page) a {
    color: var(--color-text-secondary);
    text-decoration: none
}

:where(.hv2-page) a:hover {
    color: var(--color-text-primary)
}

/* Logowand: 8 / 6 / 4 / 3 / 2 Spalten */
@media(max-width:1240px) {
    [data-logos] {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }
}

@media(max-width:1100px) {
    [data-logos] {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@media(max-width:760px) {
    [data-logos] {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:520px) {
    [data-logos] {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

/* Projektkette: einspaltig, Pfeil zeigt nach unten */
@media(max-width:640px) {
    [data-chain] {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px
    }

    [data-chain-arrow] {
        right: auto;
        left: 26px;
        top: calc(100% + 6px);
        transform: rotate(90deg)
    }
}

/* Hero-Animation: Startzustand ohne Inline-Style. Sichtbar ist Phase 1,
   wie nach show(1) im Skript; das Skript ueberschreibt per style. */
[data-hero-phases]>[data-phase]:not([data-phase="1"]) {
    opacity: 0;
    visibility: hidden
}

/* Editionen mit drei Spalten (Community, structr.cloud, Enterprise).
   `.compare-row` legt zwei Spalten an; der Modifikator ergaenzt die dritte
   und laesst die Zeilenkoepfe etwas schmaler laufen. */
.compare-cols-3 .compare-row {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr))
}

/* Vier Spalten passen unter 640 px nicht nebeneinander - die Zellen brachen
   mitten im Wort. Die Tabelle scrollt dort waagerecht, die Zeilenkoepfe
   bleiben links stehen. */
@media(max-width:640px) {
    .compare-cols-3 {
        overflow-x: auto;
        overscroll-behavior-x: contain
    }

    .compare-cols-3 .compare-row {
        grid-template-columns: 150px repeat(3, minmax(210px, 1fr));
        min-width: 780px
    }

    .compare-cols-3 .compare-rowhead,
    .compare-cols-3 .compare-corner {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--color-background-primary);
        border-right: 0.5px solid var(--color-border-tertiary);
        overflow-wrap: normal;
        hyphens: auto
    }

    .compare-cols-3 .is-head .compare-corner,
    .compare-cols-3 .is-foot .compare-corner {
        background: var(--color-background-secondary)
    }

    .compare-cols-3 :is(.compare-cell, .compare-colhead, .compare-foot) {
        overflow-wrap: normal;
        word-break: normal
    }
}

/* Editionen-Badges als Spaltenkopf. Im Spalten-Flex wuerde die Pille sonst
   auf volle Spaltenbreite gezogen; der Abstand trennt sie von der Unterzeile. */
.compare-colhead .edition-pill {
    max-width: 100%;
    margin-bottom: 6px
}

.compare-colhead .edition-name {
    overflow: hidden;
    text-overflow: ellipsis
}

/* Ablauf mit Aufklapptext: geschlossen sind alle vier Kacheln gleich hoch,
   aufgeklappt waechst nur die eine. Mindesthoehen je Zeile in `lh`,
   gemessen an der laengsten Kachel je Breite (Titel / Dauer / Kurztext / CTA).
   Aendert sich ein Text, Zahlen neu messen.
   Nur eine Kachel ist offen: `details[name]` (Browser, kein Skript). */
[data-chain]:has(details) {
    align-items: start
}

[data-chain]:has(details) .chain-title { line-height: 1.35; min-height: 4lh }

[data-chain]:has(details) .mono-meta {
    min-height: 2lh
}

[data-chain]:has(details) summary .chain-text {
    min-height: 2lh
}

@media(max-width:1470px) {
    [data-chain]:has(details) .chain-title {
        min-height: 4lh
    }
}

@media(max-width:1150px) {
    [data-chain]:has(details) summary .chain-text {
        min-height: 3lh
    }
}

@media(max-width:1120px) {
    [data-chain]:has(details) .mono-meta {
        min-height: 3lh
    }
}

@media(max-width:980px) {
    [data-chain]:has(details) summary .chain-text {
        min-height: 4lh
    }
}

@media(max-width:850px) {
    [data-chain]:has(details) summary .chain-text {
        min-height: 5lh
    }
}

@media(max-width:850px) {
    [data-chain]:has(details) .mono-meta {
        min-height: 4lh
    }
}

@media(max-width:720px) {
    [data-chain]:has(details) .mono-meta {
        min-height: 5lh
    }
}

/* Pfeile auf Hoehe der Nummer statt der Kachelmitte */
@media(min-width:641px) {
    [data-chain]:has(details) .chain-arrow {
        top: 28px
    }
}

[data-chain]:has(details) .chain-cta {
    line-height: 1.4;
    align-items: flex-start
}

[data-chain]:has(details) .chain-cta svg {
    margin-top: 3px
}

@media(max-width:1180px) {
    [data-chain]:has(details) .chain-cta {
        min-height: 2lh
    }
}

@media(max-width:880px) {
    [data-chain]:has(details) .chain-cta {
        min-height: 3lh
    }
}

@media(max-width:640px) {
    [data-chain]:has(details) :is(.chain-title, .mono-meta, summary .chain-text, .chain-cta) {
        min-height: 0
    }
}

[data-chain]:has(details)>.chain-item {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 8px
}

[data-chain]:has(details) .chain-step {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 8px;
    align-content: start
}

[data-chain]:has(details) .chain-step>.chain-cta {
    align-self: end
}

[data-chain]:has(details) .chain-step>.mono-meta {
    align-self: start
}

/* Zebra fuer die Karten der Startseite v2, wie `section.alt .card`: In einer
   alt-Sektion (Grund weiss) werden die weissen Karten hellgrau, und was in
   ihnen hellgrau war (Illustrationsflaeche, Punktraster), wird weiss - die
   Papierkarten darin wieder hellgrau. Nicht erfasst sind Logo-Kacheln,
   Ablauf-Kacheln und Editionen-Tabelle: Die stehen in der Vorlage bewusst
   weiss auf weiss. */
section.alt :is(.compare-card, .step-card, .pillar-card, .info-card) {
    background: var(--color-background-secondary)
}

section.alt .compare-card .illustration-box {
    background-color: var(--color-background-primary)
}

section.alt .compare-card .doc-card {
    background: var(--color-background-secondary)
}

/* Hero als EINE Figur (Test: output/new-home-v2-test-svg.sections.html).
   Statt drei fast gleicher Figuren, die das Skript ueberblendet, traegt eine
   Figur `data-phase` 0/1/2; das Skript setzt nur dieses Attribut.
   0 Anfrage:     neue Linien und Knoten unsichtbar, Chat "Plant..."
   1 Vorschlag:   Linien blau gestrichelt, Knoten gestrichelt mit Halo,
                  Kartenrahmen gestrichelt, Chat "Verwerfen / Uebernehmen"
   2 Uebernommen: Linien grau durchgezogen, Knoten durchgezogen, kein Halo,
                  Chat "Uebernommen"
   Die drei Chat-Zustaende blenden wie vorher die ganzen Figuren mit 0,6 s;
   nicht aktive sind auch fuer Screenreader weg. */
.chat-states {
    position: relative
}

.chat-states>[data-chat-state] {
    transition: opacity .6s ease, visibility .6s
}

/* Nicht aktive Zustaende liegen absolut unten im Block: Die Hoehe bestimmt
   nur der aktive - wie bei den drei Einzelfiguren sitzt die Sprechblase je
   Phase an derselben Stelle wie vorher. */
[data-hero-stage]:not([data-phase="0"]) [data-chat-state="0"],
[data-hero-stage]:not([data-phase="1"]) [data-chat-state="1"],
[data-hero-stage]:not([data-phase="2"]) [data-chat-state="2"] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden
}

[data-hero-stage][data-phase="1"] .canvas-pane {
    outline-color: var(--color-text-info)
}

[data-hero-stage][data-phase="0"] :is(.fade-line, .fade-group) {
    opacity: 0
}

[data-hero-stage]:not([data-phase="1"]) .fade-halo {
    opacity: 0
}

[data-hero-stage][data-phase="2"] .fade-line {
    stroke: var(--color-text-tertiary);
    stroke-dasharray: 0
}

[data-hero-stage][data-phase="2"] .fade-node {
    stroke-dasharray: 0
}

/* Das App-Fenster im Hero ist eine Illustration, kein Inhalt: Text darin
   laesst sich nicht markieren (sonst blitzt beim Klicken/Ziehen die
   Auswahl auf, waehrend die Phasen wechseln). */
.app-window {
    -webkit-user-select: none;
    user-select: none
}

/* Hero wie auf der Startseite v2: nur .hero-grid polstert, .wrap haelt nur die Breite */
.wrap:has(> .hero-grid) {
    padding: 0
}

/* .hero-second-text randlos bis an die Sektionskante und buendig nach unten;
   Text fluchtet mit der h1 (Sektion + 24 px von .hero-grid) */
.hero-second-text {
    margin: 0 -44px -72px;
    padding: 36px 68px 31px
}

@media(max-width:820px) {
    .hero-second-text {
        margin: 0 -22px -44px;
        padding: 32px 46px 28px
    }
}

@media(max-width:640px) {
    .hero-second-text {
        margin: 0 -18px -40px;
        padding: 28px 42px 24px
    }
}

@media(max-width:640px) {

    /* 1. Kein seitliches Scrollen mehr; clip statt hidden,
	      sonst funktioniert der klebende Kopf nicht */
    .compare-cols-3 {
        overflow: clip
    }

    .compare-cols-3 .compare-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: 0
    }

    /* 2. Funktionsname als eigene Zeile ueber den drei Werten */
    .compare-cols-3 .compare-rowhead {
        grid-column: 1 / -1;
        position: static;
        border-right: 0;
        padding: 12px 14px 2px
    }

    .compare-cols-3 .compare-corner {
        display: none
    }

    /* 3. Werte mittig, Text darf umbrechen */
    .compare-cols-3 .compare-cell {
        justify-content: center;
        text-align: center;
        flex-direction: column;
        gap: 2px;
        padding: 8px 6px 12px;
        font-size: 13px
    }

    .compare-cols-3 .compare-row:not(.is-head):not(.is-foot) .compare-cell:first-of-type {
        border-left: 0
    }

    /* 4. Kopf klebt beim Scrollen oben */
    .compare-cols-3 .is-head {
        position: sticky;
        top: 0;
        z-index: 2
    }

    .compare-cols-3 .compare-colhead {
        padding: 10px 6px;
        align-items: center;
        text-align: center
    }

    .compare-cols-3 .compare-colsub {
        font-size: 11px
    }

    /* 5. Badge hochkant: Zeichen oben, Name darunter, gleiche Farben */
    .compare-colhead .edition-pill {
        flex-direction: column;
        height: auto;
        gap: 4px;
        padding: 8px 6px;
        align-self: stretch;
        margin-bottom: 4px
    }

    .compare-colhead .edition-mark {
        height: 18px
    }

    .compare-colhead .edition-name {
        font-size: 12px;
        overflow: visible
    }

    /* 6. Fusszeile: Links und Button je Spalte, Button darf umbrechen */
    .compare-cols-3 .compare-foot {
        padding: 10px 6px;
        text-align: center
    }

    .compare-cols-3 .btn-primary-sm {
        padding: 8px 10px;
        white-space: normal
    }
}

@media(max-width:360px) {
    .compare-colhead .edition-name {
        font-size: 10.5px
    }
}

@media(max-width:640px) {
    .app-window {
        grid-template-columns: minmax(0, 1fr);
        aspect-ratio: auto
    }

    .app-window>.stack.border-r {
        border-right: 0;
        border-bottom: 0.5px solid var(--color-border-tertiary)
    }

    .app-window .chat-log {
        min-height: 185px
    }

    .app-window :is(.chat-bubble, .chat-text, .chat-pending, .chip) {
        overflow-wrap: normal;
        word-break: normal
    }

    .app-window .canvas-pane {
        height: 240px;
        justify-content: center
    }

    .app-window .relative-full {
        width: auto;
        height: 100%;
        aspect-ratio: 390 / 580
    }

    .app-window .svg-fluid {
        height: 100%
    }
}

@media(max-width:340px) {
    .app-window .chat-log {
        min-height: 225px
    }
}

.cs-more {
    white-space: normal;
    max-width: 100%;
    text-wrap: balance
}
section.alt .card .fi { background: var(--color-background-primary) }
.card.quote .qmark-end { display: inline; font-size: 1.6em; line-height: 0; vertical-align: -0.3em; margin-left: 2px }
[data-chain]:has(details) .chain-head { align-items: flex-start }
[data-chain]>.chain-item { display:grid; grid-row:span 5; grid-template-rows:subgrid; row-gap:8px }
[data-chain] .chain-step { display:grid; grid-row:span 5; grid-template-rows:subgrid; row-gap:8px; align-content:start }
[data-chain] .chain-step>.body-sm-tight { font-size:13px; line-height:1.55; color:var(--color-text-tertiary); padding-top:4px }
[data-chain] .chain-step>.chain-cta { align-self:end; margin-top:6px }
.pricing>.card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0 }
.pricing>.card>p.sub.center:last-child { margin-top: 0; margin-bottom: 0; padding-top: 10px; font-size: 12.5px; line-height: 1.5; align-self: end }
.pricing>.card:has(>p.sub.center:last-child) { padding-bottom:12px }