/* Branchenseiten: Hero mit Geräten, Ideenkarten mit App-Ansicht, Bisher und Mit Auftrieb. */

.ix-sec { padding-block: clamp(3.5rem, 8vw, 6rem); }
.ix-sec + .ix-sec { padding-top: 0; }
.ix-h { margin: 0; font-size: clamp(1.7rem, 3.2vw, 2.4rem); max-width: 26ch; }
.ix-sub { margin: 1rem 0 0; max-width: 42rem; font-size: 1.1rem; line-height: 1.6; color: var(--muted); }
.ix-kicker { margin: 0 0 .75rem; font-family: var(--display); font-weight: 600; font-size: .92rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pop-text); }

.ixi { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ix-ib { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }

/* Hero mit Grafik */
.pg-hero > .ix-hero { display: grid; gap: 2.5rem; align-items: center; padding-bottom: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 60rem) { .pg-hero > .ix-hero { grid-template-columns: 1.1fr .9fr; } }
.ix-hero h1 { margin: 0; font-size: clamp(2.4rem, 5vw, 3.8rem); color: #fff; max-width: 18ch; }
.ix-hero .lead { margin: 1.25rem 0 0; max-width: 38rem; color: #dfe5f8; font-size: 1.15rem; line-height: 1.6; }
.ix-hero .btn { margin-top: 1.75rem; }
.ix-hero .eyebrow { margin: 1.25rem 0 .75rem; color: var(--gold-hell); }
.pg-hero > .ix-center { text-align: center; }
.ix-center .crumbs { justify-content: center; }
.ix-center h1, .ix-center .lead { margin-inline: auto; }

/* Karten */
.ix-grid { display: grid; gap: 1rem; margin-top: 2.25rem; }
@media (min-width: 40rem) { .ix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .ix-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ix-card { padding: 1.5rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); transition: border-color .15s ease-out, transform .15s ease-out; }
.ix-card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.ix-card b { display: block; margin-top: 1rem; font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.15; text-transform: uppercase; color: var(--fg); }
.ix-card p { margin: .5rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--muted); }
.ix-tag { display: inline-block; margin-top: .9rem; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 500; color: var(--accent); background: var(--accent-soft); }

/* Vorher und mit Auftrieb */
.ix-pairs { margin-top: 2.25rem; display: grid; gap: .75rem; }
.ix-pair { display: grid; gap: .75rem; align-items: stretch; }
@media (min-width: 52rem) { .ix-pair { grid-template-columns: 1fr 36px 1fr; } }
.ix-was, .ix-neu { display: flex; gap: .85rem; align-items: flex-start; padding: 1.1rem 1.25rem; border-radius: 14px; font-size: 1.02rem; line-height: 1.5; }
.ix-was { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.ix-neu { background: var(--panel); border: 1px solid var(--accent-line); color: var(--fg); }
.ix-neu .ixi { color: var(--accent); margin-top: 2px; }
.ix-was .ixi { margin-top: 2px; opacity: .7; }
.ix-arrow { display: none; place-items: center; color: var(--pop); }
@media (min-width: 52rem) { .ix-arrow { display: grid; } }
.ix-cols { display: none; }
@media (min-width: 52rem) { .ix-cols { display: grid; grid-template-columns: 1fr 36px 1fr; gap: .75rem; margin-top: 2rem; font-family: var(--display); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; color: var(--muted); } .ix-cols + .ix-pairs { margin-top: .75rem; } }

/* Häkchenliste */
.ix-checks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .85rem; }
.ix-checks li { display: flex; gap: .75rem; align-items: flex-start; font-size: 1.05rem; line-height: 1.55; }
.ix-checks .ixi { color: var(--accent); margin-top: 3px; }
.ix-checks b { font-weight: 600; }

/* Systeme */
.ix-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.ix-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-size: .95rem; font-weight: 500; }
.ix-chip i { width: 8px; height: 8px; border-radius: 50%; background: #2fa36b; }
.ix-chip--api i { background: var(--pop); }

/* Dunkles Band */
.ix-band { background: var(--flaeche); color: #fff; }
.ix-band .ix-h { color: #fff; }
.ix-band .ix-sub { color: #cdd6f3; }
.ix-band .ix-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.ix-band .ix-card b { color: #fff; }
.ix-band .ix-card p { color: #cdd6f3; }
.ix-band .ix-ib { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }

/* Kleine Oberflächen als Grafik */
.mk { color: var(--fg); text-align: left; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; font-size: .9rem; }
.mk-bar { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.mk-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.mk-bar span { margin-left: .4rem; }
.mk-in { padding: 1rem; }
.mk-msg { max-width: 85%; padding: .55rem .8rem; border-radius: 12px; line-height: 1.4; }
.mk-msg + .mk-msg { margin-top: .5rem; }
.mk-q { margin-left: auto; background: var(--blau); color: #fff; border-bottom-right-radius: 4px; }
.mk-a { background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.mk-src { display: block; margin-top: .35rem; font-size: .75rem; color: var(--muted); }
.mk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.mk-kpi { padding: .55rem .6rem; border-radius: 8px; background: var(--panel); }
.mk-kpi small { display: block; font-size: .7rem; color: var(--muted); }
.mk-kpi b { font-size: 1.05rem; }
.mk-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: .9rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.mk-bars span { flex: 1; border-radius: 4px 4px 0 0; background: var(--blau); opacity: .85; }
.mk-bars span:nth-child(odd) { opacity: .45; }
.mk-cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.mk-cal span { padding: .45rem 0; border-radius: 6px; text-align: center; font-size: .75rem; background: var(--panel); color: var(--muted); }
.mk-cal .on { background: var(--blau); color: #fff; }
.mk-cal .no { opacity: .35; text-decoration: line-through; }
.mk-status { display: flex; justify-content: space-between; align-items: center; margin-top: .8rem; padding: .55rem .7rem; border-radius: 8px; border: 1px solid var(--line); font-size: .82rem; }
.mk-ok { padding: .1rem .5rem; border-radius: 999px; background: rgba(47,163,107,.14); color: #1f7a4f; font-weight: 600; font-size: .75rem; }
.mk-loyal { padding: 1rem; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #2747a8, #1b2858); }
.mk-loyal small { opacity: .75; font-size: .75rem; }
.mk-loyal b { display: block; font-family: var(--display); font-size: 2rem; line-height: 1; margin-top: .3rem; }
.mk-meter { height: 6px; margin-top: .8rem; border-radius: 999px; background: rgba(255,255,255,.2); }
.mk-meter i { display: block; width: 68%; height: 100%; border-radius: inherit; background: var(--gold); }
.mk-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.mk-table td, .mk-table th { padding: .4rem .3rem; border-bottom: 1px solid var(--line); text-align: left; }
.mk-table th { color: var(--muted); font-weight: 500; }
.mk-table .warn { color: var(--pop-text); font-weight: 600; }

/* Zwei Spalten mit Liste */
.ix-split { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) { .ix-split { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* Personen */
.ix-roles { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.ix-role { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem .6rem .6rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-weight: 500; }
.ix-role .ix-ib { width: 34px; height: 34px; border-radius: 50%; }
.ix-role .ixi { width: 18px; height: 18px; }


/* Geräte und App-Ausschnitte */
.s-dev { position: relative; max-width: 34rem; margin-left: auto; padding-bottom: 2rem; }
.s-laptop { width: 92%; }
.s-screen { padding: 10px; border-radius: 14px 14px 0 0; background: #1a1f2e; border: 1px solid #3a4157; box-shadow: 0 40px 80px rgba(0,0,0,.45); }
.s-screen .mk { border-radius: 4px; box-shadow: none; border: 0; }
.s-base { height: 14px; margin: 0 -6%; border-radius: 0 0 14px 14px; background: linear-gradient(#c9ccd6, #8d92a3); box-shadow: 0 18px 30px rgba(0,0,0,.4); }
.s-phone { position: absolute; right: 0; bottom: 0; width: 38%; padding: 22px 8px 14px; border-radius: 28px; background: #10131c; border: 1px solid #3a4157; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.s-notch { position: absolute; top: 8px; left: 50%; width: 40%; height: 8px; transform: translateX(-50%); border-radius: 99px; background: #262b3a; }
.s-phone .mk { border: 0; border-radius: 14px; box-shadow: none; }
.s-phone .mk-bar { display: none; }
.s-phone .mk-in { padding: .5rem; }
.s-phone .mk-loyal b { font-size: 1.5rem; }
.s-shot { padding: 0; overflow: hidden; background: var(--bg); box-shadow: 0 1px 2px rgba(15,27,77,.05), 0 14px 34px -16px rgba(15,27,77,.25); }
.s-thumb { height: 190px; overflow: hidden; padding: 1.1rem 1.1rem 0; background: linear-gradient(160deg, #e8edfa, #f7f8fc); border-bottom: 1px solid var(--line); }
.s-thumb .mk { font-size: .8rem; }
.s-shot b, .s-shot p, .s-shot .ix-tag { margin-inline: 1.4rem; }
.s-shot b { margin-top: 1.2rem; }
.s-shot .ix-tag { margin-bottom: 1.4rem; }

.s-phone { width: 42%; }
.s-phone .mk-loyal small:last-child { display: none !important; }
.s-phone .mk-loyal { padding: .8rem; }
.s-thumb .mk-kpi b { white-space: nowrap; font-size: .9rem; }

.ix-tile--dark .ixi, .ix-band .ix-checks .ixi { color: var(--gold-hell); }

/* Weitere App-Ansichten */
.mk-rows { display: grid; gap: .4rem; }
.mk-r { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .65rem; border-radius: 8px; border: 1px solid var(--line); font-size: .82rem; }
.mk-r small { color: var(--muted); }
.mk-wait { padding: .1rem .5rem; border-radius: 999px; background: rgba(201,162,78,.18); color: var(--gold-ink); font-weight: 600; font-size: .75rem; white-space: nowrap; }
.mk-ok { white-space: nowrap; }
.mk-btn { display: block; margin-top: .7rem; padding: .5rem; border-radius: 8px; background: var(--blau); color: #fff; text-align: center; font: 600 .78rem var(--display); letter-spacing: .08em; text-transform: uppercase; }
.mk-field { margin-top: .5rem; }
.mk-field small { display: block; font-size: .72rem; color: var(--muted); }
.mk-field span { display: block; margin-top: .2rem; padding: .4rem .55rem; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font-size: .8rem; }
.mk-sum { display: flex; justify-content: space-between; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--line); font-weight: 600; }
.mk-prog { margin-top: .45rem; }
.mk-prog small { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }
.mk-prog i { display: block; height: 7px; margin-top: .25rem; border-radius: 999px; background: var(--panel); overflow: hidden; }
.mk-prog i b { display: block; height: 100%; border-radius: inherit; background: var(--blau); }
.mk-h { font-weight: 600; font-size: .85rem; }
.ind-tldr { padding-top: clamp(2.5rem, 6vw, 4rem); }
.ind-tldr .tldr { margin-bottom: 0; }
.ix-sec .pg-faq { margin-top: 3rem; }
.ix-sub a { color: var(--accent); text-decoration-color: var(--pop); text-underline-offset: .18em; }
.s-phone .mk-in > .mk-h { font-size: .75rem; }
.s-phone .mk-r { flex-wrap: wrap; gap: .25rem; padding: .4rem .45rem; font-size: .7rem; }
.s-phone .mk-r small { display: none; }
.s-phone .mk-ok, .s-phone .mk-wait { font-size: .62rem; padding: .05rem .35rem; }
.s-phone .mk-field span, .s-phone .mk-field small { font-size: .68rem; }
.s-phone .mk-btn { font-size: .65rem; }
@media (max-width: 26rem) { .mk-kpis { gap: .3rem; } .mk-kpi { padding: .45rem .4rem; } .mk-kpi b { font-size: .85rem; white-space: nowrap; } .mk-kpi small { font-size: .65rem; } }
.s-dev { width: 100%; }