@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/HankenGrotesk-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/HankenGrotesk-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/HankenGrotesk-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/HankenGrotesk-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/HankenGrotesk-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/HankenGrotesk-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/HankenGrotesk-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/HankenGrotesk-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/HankenGrotesk-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/HankenGrotesk-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexSans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexSans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexSans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexSans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexSans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexSans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Grundlage wie im Artefakt-Gerüst */
html { color-scheme: light; }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
/* Formulare */
.px-form .err { color: #B42318; font: 500 15px/1.4 var(--ui, sans-serif); margin: 0; }
.px-form .ok { font: 500 17px/1.5 var(--font, sans-serif); color: var(--ink, #10241A); background: #F2F9E9; border-radius: 12px; padding: 18px 20px; margin: 0; }
.px-form [aria-invalid=true] { border-color: #B42318 !important; }

/* Layout: Variante 3 „Heute weitergedacht“ – heutiger Kopf und Banner von ohayoschool.com, darunter Abschnitt für Abschnitt der Aufbau von sap.de; fest im hellen Website-Look (Weiß, Schwarz, Grün) */
:root {
  color-scheme: light;
  --white: #FFFFFF;
  --black: #0A0A0A;
  /* Text mit leichtem Grünstich, wie SAP es mit Blau macht (#1A2733 / #354A5F) */
  --ink: #10241A;
  --slate: #34493F;
  --muted: #5B6B62;
  --line: #DFE6DE;
  --grey: #EAECE9;
  --tile: #F4F6F3;
  /* Logo-Limette und die dunklen Stufen darunter */
  --lime: #77C200;
  --lime-2: #A6D96A;
  --lime-soft: #EEF7E4;
  --emerald: #0E7A4A;
  --forest: #0A4D33;
  --pine: #073523;
  --night: #02140C;
  --green: #77C200;
  --green-deep: #0E7A4A;
  --green-dark: #0A4D33;
  --green-soft: #EEF7E4;
  --green-mint: #C3E59A;
  /* Verläufe */
  --g-night: linear-gradient(100deg, #02140C 36%, #073523 64%, #0E6B42 100%);
  --g-text: linear-gradient(90deg, #0E7A4A 0%, #3E9A1E 100%);
  --g-edge: linear-gradient(135deg, #77C200 0%, #19A46A 55%, #CDEBA6 100%);
  --g-mesh: radial-gradient(90% 120% at 100% 100%, #0A4D33 0%, rgba(10,77,51,0) 55%), radial-gradient(70% 90% at 0% 0%, #F6FBEE 0%, rgba(246,251,238,0) 60%), linear-gradient(125deg, #E2F2CF 0%, #9ED15A 42%, #1E8A4F 100%);
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C54 36 64 46 100 50 64 54 54 64 50 100 46 64 36 54 0 50 36 46 46 36 50 0Z'/%3E%3C/svg%3E");
  --font: "Hanken Grotesk", -apple-system, system-ui, sans-serif;
  --ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.6 var(--font); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: #1C1D1A; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
main { overflow-x: clip; }
main p { color: var(--slate); }
.wrap { max-width: 1296px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.draft { background: #1C1D1A; color: #A6A99F; font: 13px/1.4 var(--ui); }
.draft .wrap { padding-block: 9px; }
.draft b { color: #ECEDE8; font-weight: 500; }

/* Bausteine */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 8px; font: 600 16px/1.1 var(--font); text-decoration: none; white-space: nowrap; }
.btn.dark { background: var(--forest); color: var(--white); transition: background 0.2s ease; }
.btn.dark:hover { background: var(--pine); }
.btn.line { border: 1px solid var(--forest); color: var(--forest); background: var(--white); }
.btn.white { background: var(--white); color: var(--black); }
.btn.ghost { border: 1px solid rgba(255,255,255,0.8); color: var(--white); }
.btn.sm { padding: 9px 14px; font-size: 14px; }
.more { font-weight: 500; color: var(--emerald); text-decoration: none; white-space: nowrap; }
.more::after { content: " ›"; }
.sec { position: relative; isolation: isolate; padding-block: clamp(64px, 8vw, 128px) 0; }
.h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; max-width: 20ch; }
.h2 em { font-style: normal; background: var(--g-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin-top: 22px; max-width: 48ch; }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--emerald); }
.ki { position: absolute; left: 10px; top: 10px; background: rgba(2,20,12,0.6); color: var(--white); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 3px 7px; border-radius: 4px; z-index: 2; }
.blob { position: absolute; z-index: -1; pointer-events: none; }
.spark { position: absolute; pointer-events: none; z-index: 3; aspect-ratio: 1; }

/* Navigation */
.nav { border-bottom: 1px solid var(--line); background: var(--white); }
.nav .wrap { height: 64px; display: flex; align-items: center; gap: 28px; }
.nav img { height: 30px; width: auto; }
.nav .links { display: flex; gap: 24px; font-size: 15px; color: #34493F; }
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 15px; color: #34493F; }
.nav svg { width: 20px; height: 20px; }
.nav .burger { display: none; }

/* Kopf und Banner wie heute */
.head .row { padding-block: clamp(56px, 7vw, 100px) clamp(28px, 3vw, 44px); display: grid; grid-template-columns: 3fr 2fr; gap: clamp(28px, 5vw, 80px); align-items: end; }
.head h1 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.head h1 .grad { background: linear-gradient(90deg, #0A4D33 0%, #0E7A4A 45%, #4E9F1A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 600px) { .head h1 br { display: none; } }
.head .side { display: grid; gap: 20px; }
.head .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.banner { position: relative; isolation: isolate; background: radial-gradient(60% 80% at 80% 105%, rgba(119,194,0,0.30), rgba(119,194,0,0) 70%), var(--g-night); border-radius: 14px; overflow: hidden; height: clamp(420px, 42vw, 580px); color: var(--white); }
.banner h2 { position: absolute; left: clamp(20px, 5vw, 72px); top: clamp(28px, 4.5vw, 60px); font-size: clamp(2rem, 0.8rem + 4vw, 4.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; max-width: 12ch; z-index: 2; }
.banner .tag { position: absolute; left: clamp(20px, 5vw, 72px); bottom: clamp(24px, 4vw, 52px); display: grid; gap: 16px; justify-items: start; max-width: 24ch; color: rgba(255,255,255,0.75); font-size: 16px; z-index: 2; }
.dev { position: absolute; inset: 0; pointer-events: none; }
.dev .arc { position: absolute; right: 8%; bottom: -58%; width: 52%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(160deg, #8FD126 0%, #0E7A4A 30%, #073523 60%, rgba(2,20,12,0) 82%); }
.dev .pill { position: absolute; right: 5%; top: 10%; width: clamp(88px, 9vw, 128px); height: clamp(36px, 3.6vw, 50px); border-radius: 999px; background: linear-gradient(90deg, #073523, #0E7A4A); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.dev .pill::after { content: ""; position: absolute; right: 4px; top: 4px; bottom: 4px; aspect-ratio: 1; border-radius: 50%; background: #77C200; }
.dev .gem { position: absolute; right: 51%; top: 24%; width: clamp(58px, 6.4vw, 92px); aspect-ratio: 1; transform: rotate(45deg); border-radius: 24%; background: linear-gradient(140deg, #B5E061, #0E7A4A); display: grid; place-items: center; box-shadow: 0 18px 36px rgba(2,20,12,0.5); }
.dev .gem svg { transform: rotate(-45deg); width: 46%; height: 46%; }
.dev .ipad { position: absolute; right: 16%; bottom: -7%; height: 72%; width: auto; filter: drop-shadow(0 8px 20px rgba(2,20,12,0.5)); }
.dev .phone { position: absolute; right: 3.5%; bottom: -5%; height: 38%; width: auto; filter: drop-shadow(0 8px 20px rgba(2,20,12,0.5)); }

/* Rollen-Karussell (bei SAP: Kundenberichte) */
.car { position: relative; margin-top: 44px; border-radius: 16px; overflow: hidden; height: clamp(380px, 40vw, 520px); background: var(--night); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.slide.on { opacity: 1; }
.slide > img { width: 100%; height: 100%; object-fit: cover; }
.slide .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,24,18,0.78) 0%, rgba(8,24,18,0.62) 36%, rgba(8,24,18,0.2) 58%, rgba(8,24,18,0) 72%); }
.slide .txt { position: absolute; left: clamp(20px, 3vw, 40px); top: clamp(24px, 3vw, 40px); bottom: clamp(60px, 6vw, 76px); width: min(520px, 80%); color: var(--white); display: grid; align-content: start; gap: 18px; z-index: 2; }
.slide .role { justify-self: start; color: var(--green-mint); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: -6px; }
.slide .role svg { display: none; }
.slide h3 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.slide p { font-size: 16px; color: rgba(255,255,255,0.88); max-width: 42ch; }
.slide .btn { justify-self: start; }
.slide .gstar, .slide .gline, .slide .spark { left: var(--x); top: var(--y); height: var(--h); width: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }
.car-pp { position: absolute; left: clamp(20px, 3vw, 40px); bottom: 20px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--white); background: rgba(2,20,12,0.3); display: grid; place-items: center; cursor: pointer; z-index: 4; padding: 0; }
.car-pp svg { width: 50%; height: 50%; }
.tabs { margin-top: 26px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.tab { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font: 600 16px/1.3 var(--font); color: #8A8C84; display: grid; gap: 14px; }
.tab .prog { display: block; height: 5px; border-radius: 5px; background: #E3E6E0; overflow: hidden; }
.tab .prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--emerald), var(--lime)); }
.tab[aria-selected="true"] { color: var(--black); }

/* Ohayo-Terminal (bei SAP: Joule Work) */
.term-sec { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: clamp(24px, 4.5vw, 72px); align-items: start; }
.term-sec .txt { display: grid; gap: 24px; padding-top: 8px; }
.term-sec .btns { display: grid; gap: 16px; justify-items: start; }
/* Kein Rahmen um die Animation, wie beim SAP-Video: die Bühne nimmt die volle Spaltenbreite ein */
.term-frame { position: relative; }

/* Funktionskacheln (bei SAP: Autonome Funktionen): Titel, längerer Text, Link, unten Foto mit überlappender Karte und Glasformen */
.tiles { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; }
.tile { background: var(--tile); border-radius: 12px; padding-top: 26px; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.tile > h3, .tile > p, .tile > .more { margin-inline: 26px; }
.tile h3 { font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: -0.012em; color: var(--ink); }
.tile .nw { white-space: nowrap; }
.tile > p { margin-top: 24px; font-size: 16px; line-height: 1.2; }
.tile > .more { margin-top: 24px; align-self: flex-start; }
.pic { position: relative; margin-top: auto; width: 100%; aspect-ratio: 16 / 9; flex: none; container-type: inline-size; }
.pic::before { content: ""; position: absolute; left: -8%; bottom: -30%; width: 60%; height: 80%; border-radius: 50%; background: radial-gradient(closest-side, rgba(195,229,154,0.3), rgba(195,229,154,0)); }
.ph { position: absolute; left: 26%; bottom: 6%; width: 68%; aspect-ratio: 16 / 9; border-radius: 1.4cqw; overflow: hidden; background: var(--grey); box-shadow: 0 1.5cqw 4cqw rgba(10,77,51,0.1); }
.ph > img { width: 100%; height: 100%; object-fit: cover; }
/* Karte wie bei SAP: halb so breit wie das Bild, knapp halb so hoch, alle gleich groß, feine Verlaufskontur */
.ui { position: absolute; left: 20%; top: 37%; width: 50%; height: 47%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 1.6cqw; padding: 2cqw; border: 1.5px solid transparent; border-radius: 2.6cqw; background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(120deg, #8FCB4A 0%, #C3E59A 55%, #E8F4DC 100%) border-box; box-shadow: 0 2cqw 5cqw rgba(10,77,51,0.1); z-index: 3; font-size: 2.6cqw; line-height: 1.2; }
.pic.b .ui { left: 14%; }
.ui .row { display: flex; gap: 2.4cqw; align-items: center; min-width: 0; padding: 0 2cqw; border: 1px solid var(--line); border-radius: 1.6cqw; }
.ui .ic { flex: none; width: 7.4cqw; height: 7.4cqw; border-radius: 1.8cqw; background: var(--lime-soft); color: var(--emerald); display: grid; place-items: center; }
.ui .ic svg { width: 4.4cqw; height: 4.4cqw; }
.ui .row b { font-weight: 700; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* Karte als Dokument, wie „Phone Sourcing Event“ bei SAP */
.ui.doc { grid-template-rows: auto 1fr; padding: 2.4cqw 3cqw; gap: 1.6cqw; }
.ui .dh { display: flex; gap: 2.4cqw; align-items: center; min-width: 0; }
.ui.doc .ic { width: 6cqw; height: 6cqw; background: none; color: var(--ink); }
.ui.doc .ic svg { width: 6cqw; height: 6cqw; }
.ui .dh > div { min-width: 0; flex: 1; }
.ui .dh b { display: block; font-size: 3cqw; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui .dh span { display: block; font-size: 2.3cqw; color: var(--emerald); }
.ui .dh em { flex: none; align-self: start; font-style: normal; font-size: 2cqw; color: var(--emerald); }
.ui dl { margin: 0; display: grid; align-content: start; font-size: 2.1cqw; line-height: 1.3; }
.ui dt { font-weight: 700; color: var(--ink); }
.ui dd { margin: 0 0 0.8cqw; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui dd:last-child { margin-bottom: 0; }
/* Glasformen wie bei SAP: halbtransparent, das Foto dahinter verschwimmt */
.gstar { position: absolute; z-index: 2; pointer-events: none; background: linear-gradient(150deg, rgba(255,255,255,0.92) 0%, rgba(222,242,200,0.55) 38%, rgba(119,194,0,0.30) 72%, rgba(14,122,74,0.30) 100%); -webkit-backdrop-filter: blur(5px) saturate(1.3); backdrop-filter: blur(5px) saturate(1.3); -webkit-mask: var(--star) center / 100% 100% no-repeat; mask: var(--star) center / 100% 100% no-repeat; }
.pic .gline, .slide .gline { position: absolute; z-index: 2; pointer-events: none; overflow: visible; }
.pic .gline use, .slide .gline use { fill: none; stroke: url(#glr); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.pic .spark { width: 10cqw; z-index: 4; }
.tile .gstar, .slide .gstar { background: linear-gradient(150deg, rgba(255,255,255,0.62) 0%, rgba(222,242,200,0.4) 45%, rgba(166,217,106,0.32) 100%); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100.0 50.0 100.1 51.3 99.1 53.9 98.3 55.1 97.3 55.8 94.6 57.1 93.5 57.3 92.5 57.9 91.5 58.1 89.9 58.8 87.9 59.5 81.0 62.8 79.4 64.0 78.4 64.4 77.2 65.4 76.8 65.5 75.6 66.6 75.2 66.7 70.6 70.6 68.6 73.0 68.0 73.5 67.9 73.8 66.5 75.4 66.4 75.8 65.5 76.8 65.4 77.2 64.2 78.6 64.0 79.4 62.1 82.3 60.6 85.7 59.7 87.3 59.1 89.3 58.3 90.7 56.5 96.1 55.4 97.7 53.9 99.1 51.7 99.9 50.4 99.9 48.7 99.9 47.4 99.5 45.7 98.7 44.6 97.5 43.5 95.9 43.3 94.7 39.7 85.8 38.2 82.5 36.4 79.8 36.2 79.0 35.4 78.1 34.9 77.2 34.0 76.2 33.6 75.3 32.8 74.6 32.8 74.2 28.9 70.0 28.4 69.8 25.8 67.2 25.4 67.2 23.0 65.3 22.6 65.2 21.2 64.0 20.4 63.8 17.0 61.7 9.3 58.3 3.9 56.5 2.9 55.8 1.9 55.1 1.1 53.8 0.1 51.3 0.1 50.0 0.1 48.7 0.5 47.4 1.3 45.7 2.3 44.6 3.9 43.5 9.3 41.7 16.7 38.5 20.4 36.2 21.2 36.0 22.6 34.8 23.0 34.7 25.4 32.8 25.8 32.8 28.4 30.2 28.8 30.2 30.2 28.8 30.2 28.4 32.8 25.8 32.8 25.4 33.6 24.7 35.4 21.9 36.2 21.0 36.4 20.2 38.2 17.5 39.7 14.2 43.3 5.3 43.5 4.1 44.6 2.5 45.7 1.3 47.4 0.5 48.7 0.1 50.0 0.1 51.3 0.1 53.0 0.7 53.4 0.7 54.7 1.5 55.4 2.3 56.5 3.9 59.5 12.1 62.8 19.0 64.0 20.6 64.4 21.6 65.4 22.8 65.5 23.2 66.4 24.2 66.7 24.8 70.6 29.4 73.0 31.4 73.5 32.0 73.8 32.1 75.4 33.5 75.8 33.6 76.8 34.5 77.2 34.6 78.6 35.8 79.4 36.0 81.9 37.7 86.1 39.6 87.3 40.3 89.3 40.9 90.7 41.7 94.6 42.9 97.3 44.2 99.1 46.1 100.1 48.7Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100.0 50.0 100.1 51.3 99.1 53.9 98.3 55.1 97.3 55.8 94.6 57.1 93.5 57.3 92.5 57.9 91.5 58.1 89.9 58.8 87.9 59.5 81.0 62.8 79.4 64.0 78.4 64.4 77.2 65.4 76.8 65.5 75.6 66.6 75.2 66.7 70.6 70.6 68.6 73.0 68.0 73.5 67.9 73.8 66.5 75.4 66.4 75.8 65.5 76.8 65.4 77.2 64.2 78.6 64.0 79.4 62.1 82.3 60.6 85.7 59.7 87.3 59.1 89.3 58.3 90.7 56.5 96.1 55.4 97.7 53.9 99.1 51.7 99.9 50.4 99.9 48.7 99.9 47.4 99.5 45.7 98.7 44.6 97.5 43.5 95.9 43.3 94.7 39.7 85.8 38.2 82.5 36.4 79.8 36.2 79.0 35.4 78.1 34.9 77.2 34.0 76.2 33.6 75.3 32.8 74.6 32.8 74.2 28.9 70.0 28.4 69.8 25.8 67.2 25.4 67.2 23.0 65.3 22.6 65.2 21.2 64.0 20.4 63.8 17.0 61.7 9.3 58.3 3.9 56.5 2.9 55.8 1.9 55.1 1.1 53.8 0.1 51.3 0.1 50.0 0.1 48.7 0.5 47.4 1.3 45.7 2.3 44.6 3.9 43.5 9.3 41.7 16.7 38.5 20.4 36.2 21.2 36.0 22.6 34.8 23.0 34.7 25.4 32.8 25.8 32.8 28.4 30.2 28.8 30.2 30.2 28.8 30.2 28.4 32.8 25.8 32.8 25.4 33.6 24.7 35.4 21.9 36.2 21.0 36.4 20.2 38.2 17.5 39.7 14.2 43.3 5.3 43.5 4.1 44.6 2.5 45.7 1.3 47.4 0.5 48.7 0.1 50.0 0.1 51.3 0.1 53.0 0.7 53.4 0.7 54.7 1.5 55.4 2.3 56.5 3.9 59.5 12.1 62.8 19.0 64.0 20.6 64.4 21.6 65.4 22.8 65.5 23.2 66.4 24.2 66.7 24.8 70.6 29.4 73.0 31.4 73.5 32.0 73.8 32.1 75.4 33.5 75.8 33.6 76.8 34.5 77.2 34.6 78.6 35.8 79.4 36.0 81.9 37.7 86.1 39.6 87.3 40.3 89.3 40.9 90.7 41.7 94.6 42.9 97.3 44.2 99.1 46.1 100.1 48.7Z'/%3E%3C/svg%3E"); }
.slide .gstar { background: linear-gradient(150deg, rgba(255,255,255,0.5) 0%, rgba(196,230,156,0.46) 45%, rgba(92,170,60,0.4) 100%); }

/* Plattform (bei SAP: eine Plattform für alle KI-Szenarien) */
.plat-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.plat-top svg { width: 100%; height: auto; }
.boxes { margin-top: 56px; display: grid; gap: 20px; }
.box { border: 1px solid #DCE0D9; border-radius: 16px; padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.box .txt { display: grid; gap: 16px; align-content: start; }
.box h3 { font-size: clamp(1.5rem, 1.15rem + 1vw, 2.1rem); line-height: 1.12; font-weight: 600; letter-spacing: -0.015em; }
.box .links { display: grid; gap: 10px; margin-top: 10px; justify-items: start; }
.box .links .more { white-space: normal; }
.box .links .more::after { content: "\00a0›"; }
.vis { position: relative; border-radius: 12px; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; background: var(--g-mesh); font-family: var(--ui); }
/* Verlauf wie --g-mesh, aber ohne grellen Lichtpunkt oben links */
.vis { background: radial-gradient(90% 120% at 100% 100%, #0A4D33 0%, rgba(10,77,51,0) 55%), radial-gradient(70% 90% at 0% 0%, rgba(226,242,207,0.35) 0%, rgba(226,242,207,0) 60%), linear-gradient(125deg, #C4E49C 0%, #9ED15A 42%, #1E8A4F 100%); }
.vis .gf { position: absolute; background: rgba(255,255,255,0.3); border: 0.2cqw solid rgba(255,255,255,0.95); border-radius: 3cqw; padding: 1.4cqw; box-shadow: 0 2cqw 5cqw rgba(10,77,51,0.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vis .gf > .in { width: 100%; height: 100%; box-sizing: border-box; background: var(--white); border-radius: 1.8cqw; overflow: hidden; color: var(--ink); line-height: 1.25; }
.vis .net { position: absolute; inset: 0; width: 100%; height: 100%; }
.vis .knot { position: absolute; z-index: 3; width: 1.1cqw; height: 1.1cqw; margin: -0.55cqw 0 0 -0.55cqw; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 0.35cqw rgba(255,255,255,0.3); }
.vis .soft { filter: blur(0.3cqw); }
/* Etiketten und Zeilen wie im Ohayo-Terminal */
.vis .b-tag { justify-self: start; display: inline-block; font-size: 0.78cqw; font-weight: 600; padding: 0.3cqw 0.7cqw; border-radius: 0.45cqw; white-space: nowrap; }
.vis .b-tag.g { background: var(--emerald); color: var(--white); }
.vis .b-tag.s { background: #10241A; color: var(--white); }
.vis .b-tag.h { background: var(--lime-soft); color: var(--emerald); border: 0.1cqw solid var(--green-mint); }
.vis .b-row { display: flex; align-items: center; gap: 0.6cqw; height: 1.7cqw; padding: 0 0.6cqw; border-radius: 0.4cqw; background: #F1F3EF; }
.vis .b-row i { display: block; height: 0.5cqw; border-radius: 1cqw; background: #CBD3C8; }
.vis .b-row.on { background: var(--green); }
.vis .b-row.on i { background: rgba(255,255,255,0.85); }
.vis .b-row u { flex: none; width: 0.9cqw; height: 0.9cqw; border-radius: 0.2cqw; background: #DDE6D8; text-decoration: none; }
/* Karte mit Verlaufsrand wie in den Kacheln */
.vis .b-uc { position: absolute; z-index: 3; display: grid; gap: 0.9cqw; padding: 1.1cqw; box-sizing: border-box; border: 0.15cqw solid transparent; border-radius: 1.4cqw; background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(120deg, #8FCB4A 0%, #C3E59A 55%, #E8F4DC 100%) border-box; box-shadow: 0 1.4cqw 3.4cqw rgba(10,77,51,0.16); font-size: 1.05cqw; line-height: 1.2; color: var(--ink); }
.vis .b-uc > div { display: flex; align-items: center; gap: 1cqw; padding: 0.7cqw 0.9cqw; border: 0.1cqw solid var(--line); border-radius: 0.9cqw; min-width: 0; }
.vis .b-uc b { font-weight: 700; }
.vis .b-ic { flex: none; width: 2.8cqw; height: 2.8cqw; border-radius: 0.7cqw; background: var(--lime-soft); display: grid; place-items: center; }
.vis .b-ic svg { width: 1.7cqw; height: 1.7cqw; }
/* Vernetzung */
.v1 .b-side { position: absolute; z-index: 3; left: 6%; top: 9%; width: 8.4%; height: 82%; box-sizing: border-box; border-radius: 5cqw; background: rgba(255,255,255,0.9); box-shadow: 0 0 0 0.7cqw rgba(255,255,255,0.35), 0 2cqw 4cqw rgba(10,77,51,0.15); display: grid; justify-items: center; align-content: start; gap: 2.6cqw; padding-top: 3cqw; }
.v1 .b-side img { width: 3.6cqw; height: 3.6cqw; margin-bottom: 1.4cqw; }
.v1 .b-side span { width: 4.2cqw; height: 4.2cqw; border-radius: 50%; display: grid; place-items: center; }
.v1 .b-side span.on { background: var(--white); box-shadow: 0 0.5cqw 1.4cqw rgba(10,77,51,0.18), 0 0 0 0.25cqw var(--lime-soft); }
.v1 .b-side svg { width: 2.2cqw; height: 2.2cqw; }
.v1 .app { left: 19%; top: 8%; width: 75%; height: 44%; z-index: 3; }
.v1 .app .in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2cqw; padding: 1.5cqw; background: #F4F7F2; }
.v1 .b-card { background: var(--white); border-radius: 1cqw; padding: 1.1cqw; display: grid; align-content: start; gap: 0.7cqw; min-width: 0; box-shadow: 0 0.4cqw 1.2cqw rgba(10,77,51,0.07); }
.v1 .b-card > b { font-size: 1cqw; font-weight: 600; margin-bottom: 0.3cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v1 .b-bars { display: flex; align-items: flex-end; gap: 0.5cqw; height: 8cqw; margin-top: 0.4cqw; }
.v1 .b-bars i { flex: 1; border-radius: 0.3cqw 0.3cqw 0 0; background: #CFE8B4; }
.v1 .b-bars i.d { background: var(--emerald); }
.v1 .b-uc { left: 50%; top: 60%; width: 41%; }
@container (max-width: 460px) { .v1 .b-card > b, .v1 .b-row:nth-of-type(n+5) { display: none; } }
/* Analyse */
.v2 .b-hub { position: absolute; left: 42.9%; top: 4%; width: 14.2%; aspect-ratio: 1; border-radius: 2.2cqw; background: rgba(255,255,255,0.92); border: 0.2cqw solid var(--white); box-shadow: 0 1.6cqw 4cqw rgba(10,77,51,0.22); display: grid; place-items: center; z-index: 1; }
.v2 .b-hub img { width: 54%; }
.v2 .b-chip { position: absolute; width: 5.6cqw; aspect-ratio: 1; border-radius: 1.3cqw; background: rgba(255,255,255,0.9); box-shadow: 0 1cqw 2.6cqw rgba(10,77,51,0.16); display: grid; place-items: center; }
.v2 .b-chip svg { width: 62%; height: 62%; }
.v2 .b-dev { left: 11.9%; top: 50%; width: 76.2%; height: 56%; padding: 1.6cqw 1.6cqw 0; border-radius: 3.4cqw 3.4cqw 0 0; border-bottom: 0; z-index: 3; }
.v2 .b-dev .in { border-radius: 1.4cqw 1.4cqw 0 0; display: grid; grid-template-rows: auto 1fr; }
.v2 .b-hd { display: flex; align-items: center; gap: 0.9cqw; padding: 1.2cqw 1.8cqw; border-bottom: 0.1cqw solid #E8ECE6; font-size: 1.15cqw; font-weight: 600; white-space: nowrap; }
.v2 .b-hd em { margin-left: auto; font-style: normal; font-size: 0.8cqw; font-weight: 500; color: var(--emerald); }
.v2 .b-body { display: grid; grid-template-columns: minmax(0, 1fr) 46%; gap: 1.8cqw; padding: 1.4cqw 1.8cqw 0; }
.v2 .b-kt { display: grid; align-content: start; gap: 0.8cqw; font-size: 0.95cqw; color: #34493F; }
.v2 .b-kt small { font-size: 0.72cqw; font-weight: 700; letter-spacing: 0.06em; color: var(--emerald); }
.v2 .b-kt p { margin: 0; font-size: 1.15cqw; line-height: 1.35; color: var(--ink); font-weight: 500; }
.v2 .b-kt .b-tag { margin-top: 0.6cqw; }
.v2 .b-radar { background: var(--lime-soft); border-radius: 1.2cqw; padding: 0.6cqw; }
.v2 .b-radar svg { width: 100%; height: auto; display: block; }
.v2 .b-uc { left: 66%; top: 34%; width: 28%; }
.v2 .b-st { display: grid; grid-template-columns: 7.4cqw minmax(0, 1fr) 1.6cqw; align-items: center; gap: 0.7cqw; font-size: 0.85cqw; }
.v2 .b-st i { display: block; height: 0.7cqw; border-radius: 1cqw; background: #E6EBE3; overflow: hidden; }
.v2 .b-st i::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--green); }
.v2 .b-st b { font-weight: 600; color: var(--ink); text-align: right; }
@container (max-width: 460px) { .v2 .b-kt p + p, .v2 .b-hd em { display: none; } }
/* Sicherheit: 3D-Siegel, große Zahlen, Fakten */
.v3 .b-seal { position: absolute; left: 15%; top: 15%; width: 20%; z-index: 2; filter: drop-shadow(0 1cqw 1.6cqw rgba(10,77,51,0.22)); }
.v3 .b-seal svg { display: block; width: 100%; height: auto; }
.v3 .b-kpi3 { position: absolute; top: 9%; width: 21.5%; height: 33%; box-sizing: border-box; z-index: 3; border-radius: 1.6cqw; background: var(--white); box-shadow: 0 1.6cqw 4cqw rgba(10,77,51,0.18); padding: 1.6cqw 1.6cqw 1.4cqw; display: grid; align-content: space-between; color: var(--ink); line-height: 1.2; }
.v3 .b-kpi3 b { font-size: 5.2cqw; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--emerald); }
.v3 .b-kpi3 span { font-size: 1.1cqw; font-weight: 600; }
.v3 .b-kpi3 small { display: inline-block; justify-self: start; font-size: 0.8cqw; font-weight: 600; color: var(--emerald); background: var(--lime-soft); border-radius: 0.4cqw; padding: 0.25cqw 0.6cqw; }
.v3 .b-uc { left: 49%; top: 47.5%; width: 44.5%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8cqw; }
.v3 .b-uc b { display: block; font-size: 1.1cqw; }
.v3 .b-uc .u { display: block; font-size: 0.8cqw; color: var(--muted); margin-top: 0.2cqw; }

/* Band (bei SAP: Joule Studio) */
.band { position: relative; border-radius: 16px; overflow: hidden; background: var(--lime-soft); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.band .txt { padding: clamp(26px, 2.6vw, 38px) clamp(20px, 2vw, 32px) clamp(26px, 2.6vw, 38px) clamp(24px, 4.4vw, 64px); display: grid; gap: 12px; align-content: center; justify-items: start; position: relative; z-index: 1; }
.band h2 { font-size: clamp(1.45rem, 1rem + 1.2vw, 2rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.band .img { position: relative; min-height: 240px; }
.band p { max-width: 50ch; }
.band .btn { margin-top: 6px; }
.band .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 22%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }

/* Startklar (bei SAP: Partnernetz) */
.cards3 { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.c3 { display: grid; gap: 14px; align-content: start; }
.c3 .vis3 { height: 220px; border-radius: 12px; display: grid; place-items: center; position: relative; overflow: hidden; }
.c3 h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.c3 p { font-size: 15.5px; color: #34493F; }
.v-green { background: var(--g-mesh); }
.v-pattern { background: var(--night); }
.v-pattern svg.pat { position: absolute; right: 0; top: 0; height: 100%; width: auto; }
.v-soft { background: linear-gradient(140deg, #F4FAEC, #E2F2D4); }
.icons { display: flex; gap: 18px; }
.icons span { width: 68px; height: 68px; border-radius: 16px; background: var(--white); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(2,20,12,0.15); }
.icons svg { width: 32px; height: 32px; }
.cal { position: absolute; left: 7%; top: 50%; transform: translateY(-50%); width: 62%; background: var(--white); border-radius: 10px; padding: 14px; display: grid; gap: 8px; font-size: 13px; box-shadow: 0 10px 30px rgba(2,20,12,0.35); z-index: 1; }
.cal b { font-size: 14px; }
.cal .r { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.cal .r span:last-child { color: var(--green-deep); font-weight: 600; }
.bubble { display: grid; gap: 10px; width: 76%; }
.bubble span { background: var(--white); border-radius: 14px 14px 14px 4px; padding: 12px 14px; font-size: 14px; box-shadow: 0 6px 16px rgba(10,77,51,0.12); }
.bubble span.me { justify-self: end; background: var(--emerald); color: var(--white); border-radius: 14px 14px 4px 14px; }

/* Neuigkeiten */
.news { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.news > div { border-radius: 12px; padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 300px; }
.news .big { color: var(--forest); background: radial-gradient(90% 120% at 100% 100%, #0A4D33 0%, rgba(10,77,51,0) 55%), radial-gradient(70% 90% at 0% 0%, rgba(226,242,207,0.35) 0%, rgba(226,242,207,0) 60%), linear-gradient(125deg, #C4E49C 0%, #9ED15A 42%, #1E8A4F 100%); }
.news .big p { color: #1F3A2C; }
.news .big .eyebrow { color: var(--forest); }
.news .big .btn { margin-top: 6px; }
.news .n { background: var(--grey); }
.news .n .btn { margin-top: auto; }
.news h3 { font-size: 1.45rem; line-height: 1.18; }
.news p { font-size: 15px; }

/* Footer wie bei SAP: graue Fläche, Kontakt links, vier Linkspalten, Pfeil nach oben rechts; schmal als Akkordeon */
.foot { margin-top: clamp(72px, 9vw, 136px); background: var(--grey); color: var(--slate); }
.foot .fgrid { position: relative; padding-block: 72px 40px; padding-right: calc(max(16px, env(safe-area-inset-right, 0px)) + 40px); display: grid; grid-template-columns: minmax(0, 2.3fr) repeat(4, minmax(0, 1fr)); column-gap: 48px; row-gap: 48px; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover, .foot .cookie:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot .logo { height: 32px; width: auto; margin-bottom: 28px; }
.foot .contact { display: grid; gap: 24px; align-content: start; font-size: 14px; line-height: 21px; }
.foot .contact .row { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 20px; align-items: start; }
.foot .contact svg { width: 18px; height: 18px; margin-top: 2px; }
.foot .contact .tel { display: block; padding-top: 2px; font-size: 20px; font-weight: 600; line-height: 24px; color: var(--ink); }
.foot summary { display: block; list-style: none; pointer-events: none; }
.foot summary::-webkit-details-marker { display: none; }
.foot .chev { display: none; }
.foot h4 { font-size: 16px; font-weight: 600; line-height: 1.15; color: var(--ink); }
.foot ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 17px; font-size: 14px; line-height: 21px; }
.foot .cookie { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.foot .copy { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.foot .top { position: absolute; top: 70px; right: max(16px, env(safe-area-inset-right, 0px)); width: 28px; height: 28px; display: grid; place-items: center; color: var(--emerald); }
.foot .top svg { width: 22px; height: 22px; }
@media (min-width: 1400px) {
  .foot .fgrid { padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .foot .top { right: -28px; }
}
@media (max-width: 1200px) {
  .foot .fgrid { padding-right: max(16px, env(safe-area-inset-right, 0px)); grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; row-gap: 40px; }
  .foot .contact { grid-column: 1 / -1; grid-template-columns: repeat(3, max-content); column-gap: 64px; padding-bottom: 40px; border-bottom: 1px solid #D2D6D0; }
  .foot .contact .logo { grid-column: 1 / -1; margin-bottom: 4px; }
  .foot .copy { padding-top: 32px; border-top: 1px solid #D2D6D0; }
}
@media (max-width: 820px) {
  .foot .fgrid { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: 48px; }
  .foot .contact { grid-template-columns: minmax(0, 1fr); padding-bottom: 32px; border-bottom: 0; }
  .foot .contact .logo { margin-bottom: 4px; }
  .foot .fcol { border-bottom: 1px solid #D2D6D0; }
  .foot summary { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 22px; padding-block: 15px; }
  .foot .chev { display: block; width: 18px; height: 18px; flex: none; color: var(--emerald); transition: transform 0.2s; }
  .foot .fcol[open] .chev { transform: rotate(90deg); }
  .foot h4 { font-weight: 500; }
  .foot ul { margin: 2px 0 22px 40px; }
  .foot .copy { margin-top: 32px; padding-top: 0; border-top: 0; }
  .foot .top { position: static; margin-top: 32px; }
}
.kontakt { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 15; display: inline-flex; align-items: center; gap: 10px; background: var(--forest); color: var(--white); border: 2px solid var(--white); box-shadow: 0 8px 24px rgba(2,20,12,0.25); padding: 12px 18px; border-radius: 10px; font: 700 16px/1 var(--font); text-decoration: none; }
.kontakt svg { width: 20px; height: 20px; }
.note { font: 13px/1.5 var(--ui); color: var(--muted); padding-block: 0 24px; max-width: 80ch; }
.foot .notewrap { display: block; padding-block: 0; }

@media (max-width: 1200px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .news .big { grid-row: span 2; }
  .news > .n { min-height: 300px; }
}
@media (max-width: 820px) {
  .nav .links { display: none; }
  .nav .burger { display: block; }
  .head .row, .term-sec, .plat-top, .box, .band, .cards3 { grid-template-columns: minmax(0, 1fr); }
  .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .band .img { min-height: clamp(220px, 38vw, 300px); }
  .band .img img { object-position: 60% 6%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%); }
  .banner { height: auto; display: flex; flex-direction: column; gap: 18px; padding: 32px 22px 0; }
  .banner h2, .banner .tag { position: static; }
  .banner h2 { max-width: 11ch; }
  .dev { position: relative; inset: auto; height: clamp(220px, 58vw, 340px); margin: 6px -22px 0; }
  .dev .arc { right: -6%; bottom: -70%; width: 92%; }
  .dev .gem { display: none; }
  .dev .pill { display: none; }
  .dev .ipad { right: 20%; height: 92%; bottom: -8%; }
  .dev .phone { right: 4%; height: 50%; }
}
@media (max-width: 560px) {
  .tiles, .news { grid-template-columns: minmax(0, 1fr); }
  .news .big { grid-row: auto; min-height: 480px; }
  .news > .n { min-height: 0; }
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav .right .login { display: none; }
  .nav .wrap, .nav .right { gap: 12px; }
  .nav .right > svg:first-child { display: none; }
  .slide .txt { width: auto; right: 20px; }
  .slide .shade { background: linear-gradient(180deg, rgba(8,24,18,0.78), rgba(8,24,18,0.55)); }
  .car { height: 480px; }
  .slide .klein { display: none; }
  .slide .gstar, .slide .gline { left: 86%; top: 90%; height: 26%; }
}
@media (min-width: 561px) and (max-width: 1100px) {
  .car { height: clamp(440px, 40vw, 520px); }
  .slide .txt { width: 47%; gap: 14px; }
  .slide h3 { font-size: clamp(1.4rem, 0.8rem + 1.5vw, 1.8rem); }
  .slide p { font-size: 15px; }
  .slide .shade { background: linear-gradient(90deg, rgba(8,24,18,0.82) 0%, rgba(8,24,18,0.7) 44%, rgba(8,24,18,0.3) 60%, rgba(8,24,18,0) 74%); }
}
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }

/* Kopfzeile mit Mega-Menü nach sap.de; Präfix mh- (Kopf), md- (Schublade), mt- (Hinweis). Klassen von V3 (.nav, .links, .right …) bleiben unberührt */
.mh { position: relative; z-index: 40; background: var(--white); border-bottom: 1px solid var(--line); font-family: var(--font); }
.mh-in { height: 64px; display: flex; align-items: center; gap: 24px; }
.mh-logo { flex: none; display: block; }
.mh-logo img { height: 30px; width: auto; }
.mh-items { display: flex; align-items: stretch; gap: 20px; height: 100%; min-width: 0; }
.mh-item { position: relative; display: flex; align-items: center; height: 100%; padding: 0; border: 0; background: none; font: 400 14.5px/1 var(--font); color: #34493F; cursor: pointer; white-space: nowrap; text-decoration: none; }
.mh-item:hover { color: var(--ink); }
.mh-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--emerald); transform: scaleX(0); transition: transform 0.18s ease; }
.mh-item[aria-expanded="true"] { color: var(--ink); }
.mh-item[aria-expanded="true"]::after { transform: scaleX(1); }
.mh-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }
.mh-right .mh-item { height: 64px; }
.mh-ico { width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: none; border-radius: 50%; color: var(--ink); cursor: pointer; padding: 0; }
.mh-ico:hover { background: var(--tile); }
.mh-ico svg { width: 20px; height: 20px; }
.mh-ico.user { box-shadow: inset 0 0 0 1px var(--line); }
.mh-login { font: 400 14.5px/1 var(--font); color: #34493F; text-decoration: none; white-space: nowrap; }
.mh-demo { padding: 9px 16px; font-size: 15px; }
.mh-burger { display: none; }

/* Mega-Panel */
.mh-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 28px 40px -12px rgba(2,20,12,0.16); opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s; }
.mh-panel.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 0.16s ease, transform 0.16s ease; }
.mh-panel .mh-pin { padding-block: 34px 44px; }
.mh-panel.drop { left: var(--x, 0px); right: auto; width: var(--w, 320px); max-width: calc(100vw - 32px); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; }
.mh-panel.drop .mh-pin { padding: 28px 30px 32px; max-width: none; }
.mh-ptitle { text-align: center; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); font-weight: 600; letter-spacing: -0.02em; margin: 2px 0 30px; color: var(--ink); }
.mh-cols { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 48px; }
.mh-col { min-width: 0; }
.mh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--line); font: 600 15px/1.25 var(--font); color: var(--ink); text-decoration: none; }
a.mh-head:hover { color: var(--emerald); }
a.mh-head::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); margin-right: 4px; }
.mh-glabel { display: block; margin: 14px 0 4px; font: 700 12px/1 var(--font); letter-spacing: 0.07em; text-transform: uppercase; color: var(--emerald); }
.mh-col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mh-col ul.ind { padding-left: 16px; }
.mh-col li a { display: block; padding: 8px 0; font: 400 15px/1.3 var(--font); color: #34493F; text-decoration: none; }
.mh-col li a:hover { color: var(--emerald); text-decoration: underline; text-underline-offset: 3px; }
.mh-sep { height: 1px; background: var(--line); margin: 10px 0; width: 60%; }

/* Schublade für schmale Bildschirme */
.md { position: fixed; inset: 0; z-index: 60; background: var(--white); display: none; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.md.on { display: flex; }
.md-top { height: 64px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.md-top img { height: 28px; width: auto; }
.md-body { flex: 1; overflow-y: auto; padding-block: 8px 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.md-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; font: 500 17px/1.25 var(--font); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.md-row::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--emerald); border-top: 2px solid var(--emerald); transform: rotate(45deg); }
.md-back { display: inline-flex; align-items: center; gap: 10px; margin: 8px 0 6px; padding: 8px 0; border: 0; background: none; font: 600 15px var(--font); color: var(--emerald); cursor: pointer; }
.md-back::before { content: ""; width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.md h3 { font-size: 22px; margin: 4px 0 8px; }
.md .mh-col { padding: 14px 0 6px; }
.md .mh-head { margin-bottom: 4px; }
.md-foot { display: grid; gap: 12px; padding-top: 22px; }
.md-foot .btn { justify-self: stretch; }

/* Hinweis auf das Linkziel */
.mt-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 80; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px); background: var(--ink); color: var(--white); border-radius: 10px; padding: 12px 16px; font: 14px/1.4 var(--ui); box-shadow: 0 12px 30px rgba(2,20,12,0.3); transition: opacity 0.18s ease, transform 0.18s ease; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mt-toast.on { opacity: 1; transform: translate(-50%, 0); }
.mt-toast code { font: 500 14px var(--ui); color: #C3E59A; word-break: break-all; }
.mt-toast span { font-size: 12.5px; padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,0.12); }

/* Länderwahl rechts im Kopf wie SAPs runde Flagge: Deutschland mit Flagge, International mit Globus */
.mh-lang { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.mh-lang:hover { background: var(--tile); }
.mh-lang[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--emerald); }
.mh-flag { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(16,36,26,0.12); }
.mh-flag.de { background: linear-gradient(#000000 0 33.34%, #DD0000 33.34% 66.67%, #FFCE00 66.67%); }
.mh-flag.int { box-shadow: none; color: var(--forest); }
.mh-flag.int svg { width: 20px; height: 20px; }
.mh-langp .mh-pin { padding: 24px 26px 18px; }
.mh-ltitle { text-align: center; font: 600 16px/1.3 var(--font); color: var(--ink); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mh-lrows { list-style: none; margin: 0; padding: 0; }
.mh-lrows button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; font: 400 15px/1.2 var(--font); color: #34493F; cursor: pointer; text-align: left; }
.mh-lrows button:hover b { color: var(--emerald); }
.mh-lname { display: grid; gap: 3px; }
.mh-lname b { font-weight: 500; color: var(--ink); }
.mh-lname small { font: 400 12.5px/1.2 var(--ui); color: var(--muted); }
.mh-lrows button[aria-current="true"] b { font-weight: 600; }
.mh-lrows > li > button > svg { width: 18px; height: 18px; margin-left: auto; color: var(--emerald); }

/* Hinweisleiste bei abweichender Browsersprache, nach der Leiste auf sap.com */
.mh-hint { background: var(--lime-soft); border-bottom: 1px solid var(--green-mint); }
.mh-hint .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding-block: 12px; }
.mh-hint p { display: flex; align-items: center; gap: 10px; margin: 0 auto 0 0; font: 500 16px/1.35 var(--font); color: var(--ink); }
.mh-hint p svg { width: 20px; height: 20px; flex: none; color: var(--emerald); }
.mh-hint-b { display: flex; gap: 10px; flex-wrap: wrap; }
.mh-hint .btn { cursor: pointer; font-family: var(--font); }
.mh-hint .btn.dark { border: 0; }

/* Fassungen: Blöcke nur auf Deutsch oder nur auf Englisch */
html[data-site-lang="en"] .l-de, html:not([data-site-lang="en"]) .l-en { display: none !important; }
.mh-hint .btn .mh-flag { width: 18px; height: 18px; }
.mh-hint .btn.dark .mh-flag.int { color: var(--white); }
.mh-hint .btn.dark .mh-flag.int svg { width: 18px; height: 18px; }

@media (max-width: 1280px) {
  .mh.v2 .mh-items, .mh.v2 .mh-right .mh-item, .mh.v2 .mh-right .mh-ico.search, .mh.v2 .mh-right .mh-ico.user { display: none; }
  .mh.v2 .mh-burger { display: grid; }
}
@media (max-width: 940px) {
  .mh.v1 .mh-items, .mh.v1 .mh-login, .mh.v1 .mh-right .mh-ico.search { display: none; }
  .mh.v1 .mh-burger { display: grid; }
}
@media (max-width: 1280px) { .mh.v2 .mh-panel:not(.mh-langp) { display: none; } }
@media (max-width: 940px) { .mh.v1 .mh-panel:not(.mh-langp) { display: none; } }
@media (max-width: 480px) { .mh-demo { display: none; } }
@media (prefers-reduced-motion: reduce) { .mh-panel, .mh-item::after, .mt-toast { transition: none; } }

/* Unterseiten nach sap.de: lokale Navigation (ln-), Abschnitte (px-), Ansichtswechsel in der Entwurfsleiste (dv-) */
.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.draft .wrap { display: grid; gap: 8px; }
.dv-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.dv-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 8px; background: #2C2E29; }
.dv-tabs button { border: 0; background: none; color: #C9CBC3; font: 500 13px/1 var(--ui); padding: 8px 11px; border-radius: 6px; cursor: pointer; }
.dv-tabs button[aria-selected="true"] { background: #ECEDE8; color: #1C1D1A; }
.dv-lang button[aria-current="true"] { background: #ECEDE8; color: #1C1D1A; }
.dv-meta { font: 12.5px/1.45 var(--ui); color: #A6A99F; }
.dv-meta code { font: inherit; color: #C3E59A; }
.view[hidden] { display: none !important; }

/* Lokale Navigation */
.ln { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--white); border-bottom: 1px solid var(--line); }
.ln-in { display: flex; align-items: center; gap: 22px; min-height: 72px; }
.ln-id { flex: none; display: grid; gap: 3px; padding-right: 22px; border-right: 1px solid var(--line); max-width: 46%; }
.ln-up { display: inline-flex; align-items: center; gap: 7px; font: 400 12.5px/1.2 var(--ui); color: var(--muted); text-decoration: none; }
.ln-up::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.ln-up:hover { color: var(--emerald); }
.ln-id b { font: 600 17px/1.25 var(--font); color: var(--ink); }
.ln-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; align-self: stretch; }
.ln-tabs::-webkit-scrollbar { display: none; }
.ln-tabs a { flex: none; position: relative; display: flex; align-items: center; padding: 0 10px; font: 400 14.5px/1 var(--font); color: #34493F; text-decoration: none; white-space: nowrap; }
.ln-tabs a:hover { color: var(--ink); }
.ln-tabs a.on { color: var(--ink); }
.ln-tabs a.on::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--emerald); }
.ln-cta { margin-left: auto; flex: none; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.ln.stuck .ln-cta { opacity: 1; pointer-events: auto; }
.ln-sent { height: 1px; margin-bottom: -1px; }

/* Abschnitte */
.px { padding-block: clamp(56px, 6vw, 96px) 0; scroll-margin-top: 90px; }
.px-h2 { font-size: clamp(1.7rem, 1.25rem + 1.4vw, 2.5rem); font-weight: 600; line-height: 1.14; letter-spacing: -0.02em; text-wrap: balance; max-width: 30ch; }
.px-lead { margin-top: 14px; max-width: 64ch; }
.px-hc { text-align: center; padding-block: clamp(44px, 5vw, 72px) 0; scroll-margin-top: 90px; }
.px-hc h1 { font-size: clamp(2.3rem, 1.6rem + 2.4vw, 3.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.px-sub { margin: 22px auto 0; max-width: 60ch; font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem); line-height: 1.5; }
.px-ctas { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.px-hc .px-ctas { justify-content: center; }

/* Bühne im Hero: Foto mittig, Karte links, Eingabe des Ohayo-Terminals, Glasformen */
.px-stage { position: relative; margin: clamp(36px, 5vw, 64px) auto 0; max-width: 1000px; aspect-ratio: 1000 / 540; text-align: left; }
.px-photo { position: absolute; left: 21%; top: 8%; width: 58%; height: 84%; border-radius: 16px; overflow: hidden; background: var(--tile); }
.px-photo img { width: 100%; height: 100%; object-fit: cover; }
.px-newpic { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 8% 12%; text-align: center; background: radial-gradient(80% 100% at 80% 100%, rgba(14,122,74,0.35), rgba(14,122,74,0) 60%), linear-gradient(135deg, #F4FAEC, #D7EEBE); color: var(--forest); }
.px-newpic .i { width: 34px; height: 34px; }
.px-newpic b { font: 700 13px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; }
.px-newpic p { font: 14px/1.45 var(--ui); color: var(--slate); max-width: 46ch; }
.px-stage .gstar { aspect-ratio: 1; }
.px-stage .spark { aspect-ratio: 1; }
.px-ucard { position: absolute; left: 0; top: 30%; width: 31%; display: grid; gap: 10px; padding: 14px; border: 1.5px solid transparent; border-radius: 16px; background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(120deg, #8FCB4A 0%, #C3E59A 55%, #E8F4DC 100%) border-box; box-shadow: 0 18px 40px rgba(10,77,51,0.12); z-index: 3; }
.px-ucard > div { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: 600 14px/1.25 var(--font); color: var(--ink); }
.px-ic { flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--lime-soft); color: var(--emerald); display: grid; place-items: center; }
.px-ic .i { width: 20px; height: 20px; }
.px-prompt { position: absolute; left: 17%; right: 17%; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 16px; padding: 16px 16px 16px 22px; border: 2px solid transparent; border-radius: 14px; background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(110deg, #0E7A4A, #77C200, #C3E59A) border-box; box-shadow: 0 16px 40px rgba(10,77,51,0.18); font: 400 clamp(14px, 0.8rem + 0.5vw, 19px)/1.3 var(--font); color: var(--ink); }
.px-prompt span { flex: 1; min-width: 0; }
.px-prompt i { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--lime-soft); color: var(--emerald); display: grid; place-items: center; }

/* Video und Text */
.px-media { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.px-video { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--tile); }
.px-video img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.px-play { position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; background: rgba(255,255,255,0.94); display: grid; place-items: center; box-shadow: 0 10px 26px rgba(2,20,12,0.3); }
.px-play svg { width: 24px; height: 24px; margin-left: 4px; fill: var(--forest); }
.px-media h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem); font-weight: 600; line-height: 1.2; }
.px-media p { margin-top: 12px; }
.px-media .btn { margin-top: 22px; }
.px-media .more { display: inline-block; margin-top: 16px; }
.px-media .stack { display: grid; justify-items: start; }
.px-points { margin-top: 14px; display: grid; gap: 14px; }
.px-points b { display: block; color: var(--ink); font-weight: 600; }
.px-points p { margin-top: 2px; font-size: 16px; }
.px-bullets { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--slate); }

.px-cols3 { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.px-cols3 .i { width: 38px; height: 38px; color: var(--emerald); stroke-width: 1.6; }
.px-cols3 h3 { margin-top: 16px; font-size: 1.22rem; font-weight: 600; line-height: 1.25; }
.px-cols3 p { margin-top: 8px; font-size: 16px; }

/* Assistenten */
.px-assist { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.px-alist { display: grid; }
.px-aitem { text-align: left; border: 0; border-left: 3px solid var(--line); background: none; padding: 16px 16px 16px 20px; cursor: pointer; font: 600 17px/1.3 var(--font); color: var(--ink); display: grid; gap: 6px; }
.px-aitem p { display: none; font: 400 15.5px/1.5 var(--font); color: var(--slate); }
.px-aitem[aria-selected="true"] { border-left-color: var(--emerald); background: linear-gradient(90deg, var(--lime-soft), rgba(238,247,228,0)); }
.px-aitem[aria-selected="true"] span { color: var(--emerald); }
.px-aitem[aria-selected="true"] p { display: block; }
/* Isometrische Szenen nach SAPs Assistenten-Grafik (iso.py): Reiter schalten die Kachel */
.px-avis { position: relative; display: block; }
.iso { display: block; width: 100%; height: auto; overflow: visible; }
.iso text { font: 600 14.5px var(--ui); fill: #8A988F; transition: fill 0.3s; }
.iso .lb.on text { fill: #10241A; }
.iso .lbc text { fill: #FFFFFF; }
.iso .q { opacity: 0.36; transition: opacity 0.35s ease; }
.iso .q.on { opacity: 1; }
.iso .t2, .iso .cn { opacity: 0; transition: opacity 0.35s ease; }
.iso .q.on .t2, .iso .cn.on { opacity: 1; }
.px-avis .iso .q, .px-avis .iso .lb { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .iso .q, .iso .t2, .iso .cn, .iso text { transition: none; } }
.px-allbtn { margin-top: 28px; white-space: normal; max-width: 100%; text-align: left; }
@media (max-width: 700px) {
  .px-avis, .px-isowrap { overflow: hidden; }
  .px-avis .iso, .px-isowrap .iso { width: 124%; margin-left: -12%; }
}
.px-tiles .px-card { min-height: 118px; }
.px-band > div > p:first-child { margin-top: 0; font-size: 17px; color: var(--ink); }
/* Im Fokus wie SAP: aufgeschlagene Berichte aus Titelblatt und Innenseite, nur Grafik */
.rep { container-type: inline-size; aspect-ratio: 16 / 9; display: grid; place-items: center; }
.rep .sp { width: 75cqw; height: 56.25cqw; display: flex; border-radius: 2px; overflow: hidden; box-shadow: 0 1px 3px rgba(2,20,12,0.1), 0 12px 30px rgba(2,20,12,0.14); }
.rep .pg { position: relative; height: 100%; overflow: hidden; }
.rep .cv { width: 43.4cqw; flex: none; padding: 3.2cqw; display: flex; flex-direction: column; gap: 1.1cqw; color: #FFFFFF; }
.rep .cv::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 2.4cqw; background: linear-gradient(90deg, rgba(2,20,12,0), rgba(2,20,12,0.16)); pointer-events: none; }
.rep .lab { position: relative; font: 700 1.3cqw/1.2 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; }
.rep .ti { position: relative; font: 700 3.4cqw/1.1 var(--font); letter-spacing: -0.01em; hyphens: manual; }
.rep .lg { position: relative; margin-top: auto; display: flex; align-items: center; gap: 0.8cqw; font: 700 1.5cqw/1 var(--font); }
.rep .lg img { width: 2.6cqw; height: 2.6cqw; border-radius: 0.5cqw; }
/* A: Stundenplan-Mosaik */
.rep .ka { background: #0A4D33; }
.rep .ka .lab { color: #9ED15A; }
.rep .tt { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1.1cqw repeat(5, 1fr); gap: 0.7cqw; height: 29cqw; margin: -3.2cqw -3.2cqw 1.8cqw; padding: 2.6cqw 3.2cqw 2.8cqw; background: #073523; }
.rep .tt i { display: block; position: relative; border-radius: 0.5cqw; }
.rep .tt .hc { background: rgba(255,255,255,0.28); height: 0.6cqw; width: 60%; align-self: center; border-radius: 0.3cqw; }
.rep .tt .a, .rep .wk .a { background: #77C200; }
.rep .tt .g, .rep .wk .g { background: #19A46A; }
.rep .tt .m, .rep .wk .m { background: #C3E59A; }
.rep .tt .e, .rep .wk .e { background: #0E7A4A; }
.rep .tt .o, .rep .wk .o { background: rgba(255,255,255,0.07); outline: 0.15cqw dashed rgba(255,255,255,0.3); outline-offset: -0.15cqw; }
.rep .tt .w, .rep .wk .w { background: #FFFFFF; }
.rep .tt .w::after { content: ""; position: absolute; inset: 22%; background: #77C200; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
/* B: heller Kopf mit Tausch-Grafik, grünes Band mit Pfeilen */
.rep .kb { padding: 0; gap: 0; background: #0E7A4A; }
.rep .kb .hdr { position: relative; height: 26cqw; display: grid; place-items: center; background-color: #EEF7E4; background-image: radial-gradient(circle, rgba(119,194,0,0.45) 0.28cqw, rgba(119,194,0,0) 0.32cqw); background-size: 2.4cqw 2.4cqw; }
.rep .kb .sw { width: 36cqw; height: auto; display: block; filter: drop-shadow(0 0.6cqw 1.2cqw rgba(10,77,51,0.18)); }
.rep .kb .bnd { position: relative; flex: 1; display: flex; flex-direction: column; gap: 1.1cqw; padding: 2.6cqw 3.2cqw 3.2cqw; }
.rep .kb .lab { color: #C3E59A; }
.rep .kb .ti { max-width: 27cqw; }
.rep .arw { position: absolute; right: 2.6cqw; top: 2.8cqw; display: grid; grid-template-columns: repeat(2, 4.4cqw); gap: 0.9cqw; }
.rep .arw i { display: block; height: 4.4cqw; background: #77C200; clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%); }
.rep .arw i:nth-child(2) { background: #C3E59A; }
.rep .arw i:nth-child(3) { grid-column: 2; background: #FFFFFF; opacity: 0.85; }
/* C: hellgrün mit Dreieck und Ebenen-Stapel */
.rep .kc { background: linear-gradient(160deg, #A6DC4E 0%, #77C200 55%, #5FA80C 100%); color: #073523; }
.rep .kc .tri { position: absolute; right: 0; bottom: 0; width: 34cqw; height: 36cqw; background: #0E7A4A; clip-path: polygon(100% 6%, 100% 100%, 36% 100%); }
.rep .kc .stk { position: absolute; right: 1.6cqw; bottom: 4.4cqw; width: 25cqw; height: 25cqw; filter: drop-shadow(0 1cqw 1.6cqw rgba(2,20,12,0.25)); }
.rep .kc .lab { color: #0A4D33; }
.rep .kc .ti { max-width: 34cqw; }
/* D: Überblick mit Logo */
.rep .kd { background: radial-gradient(80% 60% at 100% 100%, rgba(119,194,0,0.45), rgba(119,194,0,0) 60%), linear-gradient(160deg, #0E6B42 0%, #073523 70%, #02140C 100%); }
.rep .kd .lab { color: #9ED15A; }
.rep .kd .lgo { position: absolute; right: 3.2cqw; bottom: 7.5cqw; width: 19cqw; height: 19cqw; border-radius: 3cqw; box-shadow: 0 1.6cqw 4cqw rgba(0,0,0,0.35); }
/* Innenseite mit Kleintext wie in SAPs Berichten */
.rep .ip { flex: 1; min-width: 0; background: #FFFFFF; padding: 3.2cqw 2.6cqw 2.2cqw 3.4cqw; display: flex; flex-direction: column; gap: 1.2cqw; font: 0.82cqw/1.55 var(--ui); color: #7C8A82; }
.rep .ip::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3.2cqw; background: linear-gradient(90deg, rgba(2,20,12,0.12), rgba(2,20,12,0)); }
.rep .ip .k { font: 700 0.8cqw/1 var(--ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--emerald); }
.rep .ip .h { font: 700 1.7cqw/1.15 var(--font); color: var(--ink); margin-bottom: 0.4cqw; }
.rep .pa { display: block; }
.rep .c2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3cqw; }
.rep .c2 > span { display: flex; flex-direction: column; gap: 1cqw; }
.rep .wk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35cqw; padding: 0.7cqw; border-radius: 0.4cqw; background: #F1F5F2; }
.rep .wk i { display: block; height: 1.5cqw; border-radius: 0.25cqw; }
.rep .wk .o { outline-color: #C9D3CD; background: transparent; }
.rep .wk .w { background: #EEF7E4; }
.rep .tb { display: flex; flex-direction: column; gap: 0.55cqw; padding: 0 0 0.8cqw; border-radius: 0.4cqw; overflow: hidden; background: #EEF7E4; }
.rep .th { padding: 0.6cqw 0.8cqw; background: #0E7A4A; color: #FFFFFF; font: 700 0.85cqw/1 var(--ui); }
.rep .tr { display: grid; grid-template-columns: 0.5fr 1fr 1.3fr; gap: 0.8cqw; padding: 0 0.8cqw; }
.rep .tr i { display: block; height: 0.6cqw; border-radius: 0.3cqw; background: #B9CDB0; }
.rep .tr i:first-child { background: #77C200; }
.rep .nr { display: grid; grid-template-columns: 2.6cqw 1fr; gap: 1cqw; align-items: start; }
.rep .nr b { display: grid; place-items: center; height: 2.6cqw; border-radius: 0.5cqw; background: #EEF7E4; color: var(--emerald); font: 700 1.2cqw/1 var(--font); }
.rep .nt { display: block; font: 700 0.95cqw/1.3 var(--ui); color: var(--ink); }
.rep .gr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8cqw; }
.rep .gr i { display: block; height: 4.6cqw; border-radius: 0.5cqw; background: #EEF7E4; border-left: 0.5cqw solid #77C200; }
.rep .sh { display: block; margin-top: 0.5cqw; font: 700 0.95cqw/1.3 var(--ui); color: var(--ink); }
.rep .pn { margin-top: auto; align-self: flex-end; display: block; width: 2cqw; height: 0.45cqw; background: #CDD6D0; flex: none; }
.px-promo .rep { aspect-ratio: 16 / 10; }
.px-promo .rep .sp { width: 80cqw; height: 52cqw; }
/* Oberflächenrahmen wie SAPs Bildschirmfotos in den Reitern der Branchenseite */
.px-ui { border-radius: 14px; aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 5%; background: radial-gradient(80% 100% at 100% 0%, rgba(119,194,0,0.22), rgba(119,194,0,0) 60%), linear-gradient(135deg, #F3FAEC 0%, #E2F2D2 100%); }
.px-ui .px-acard { background: rgba(255,255,255,0.55); border-color: #FFFFFF; box-shadow: 0 16px 36px rgba(10,77,51,0.14); }
.px-acard { width: min(100%, 440px); background: rgba(255,255,255,0.3); border: 2px solid rgba(255,255,255,0.95); border-radius: 18px; padding: 8px; box-shadow: 0 18px 40px rgba(10,77,51,0.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.px-acard .in { background: var(--white); border-radius: 12px; padding: 16px 18px; display: grid; gap: 10px; font: 14px/1.35 var(--ui); color: var(--ink); }
.px-acard .hd { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.px-acard .tag { font: 600 11px/1 var(--ui); padding: 5px 7px; border-radius: 5px; background: var(--emerald); color: var(--white); }
.px-acard .tag.warn { background: #10241A; }
.px-acard .sub { color: var(--muted); font-size: 13px; }
.px-acard .r { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 8px; background: #F4F7F2; }
.px-acard .r b { font-weight: 600; }
.px-acard .r em { font-style: normal; color: var(--emerald); font-weight: 600; white-space: nowrap; }
.px-acard .r.ok { background: var(--lime-soft); }
.px-acard .note2 { font-size: 13px; color: var(--slate); background: #FFF8E6; border-radius: 8px; padding: 9px 10px; }

/* Karten, Band, nächster Schritt, FAQ */
.px-cards { margin-top: 28px; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
.px-card { border: 1px solid var(--line); border-radius: 12px; padding: 22px; display: grid; gap: 10px; align-content: start; text-decoration: none; color: var(--ink); background: var(--white); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.px-card:hover { border-color: var(--green-mint); box-shadow: 0 8px 22px rgba(10,77,51,0.08); }
.px-card .i { width: 30px; height: 30px; color: var(--emerald); stroke-width: 1.6; }
.px-card b { font-size: 17px; font-weight: 600; line-height: 1.25; }
.px-card span { font-size: 15px; color: var(--slate); }
.px-card small { font: 600 11px/1 var(--ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--emerald); }
.px-band { margin-top: 28px; border-radius: 14px; background: var(--lime-soft); padding: 24px 28px; display: flex; gap: 18px 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.px-band > div { max-width: 70ch; }
.px-band h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.px-band p { margin-top: 6px; font-size: 15.5px; }
.px-next { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
/* Der nächste Schritt wie SAP: Dialog "Demo vereinbaren" vor einer App-Ansicht im Glasrahmen */
.px.tint { background: var(--tile); margin-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); }
.px-demo { container-type: inline-size; position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; isolation: isolate; background: radial-gradient(55% 75% at 100% 0%, rgba(119,194,0,0.6), rgba(119,194,0,0) 65%), radial-gradient(60% 80% at 0% 100%, rgba(25,164,106,0.55), rgba(25,164,106,0) 60%), linear-gradient(135deg, #0E7A4A 0%, #0A4D33 55%, #073523 100%); }
.px-demo .st { position: absolute; inset: 0; z-index: 0; }
.px-demo .st i { position: absolute; top: -40%; height: 180%; transform: rotate(32deg); border-radius: 0.4cqw; filter: blur(0.25cqw); background: linear-gradient(to bottom, rgba(195,229,154,0) 0%, rgba(195,229,154,0.85) 52%, rgba(195,229,154,0) 100%); }
.px-demo .st i:nth-child(1) { left: 84%; width: 1.4%; }
.px-demo .st i:nth-child(2) { left: 88%; width: 3.2%; background: linear-gradient(to bottom, rgba(119,194,0,0) 0%, rgba(119,194,0,0.9) 50%, rgba(119,194,0,0) 100%); }
.px-demo .st i:nth-child(3) { left: 92.5%; width: 0.7%; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 55%, rgba(255,255,255,0) 100%); }
.px-demo .st i:nth-child(4) { left: 95%; width: 4.4%; opacity: 0.7; }
.px-demo .st i:nth-child(5) { left: 101%; width: 2%; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 100%); }
.px-demo .st i:nth-child(6) { left: 6%; top: 40%; height: 120%; width: 2.6%; opacity: 0.8; }
.px-demo .st i:nth-child(7) { left: 11%; top: 40%; height: 120%; width: 1%; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 55%, rgba(255,255,255,0) 100%); }
.px-demo .st i:nth-child(8) { left: 14%; top: 40%; height: 120%; width: 3.6%; background: linear-gradient(to bottom, rgba(119,194,0,0) 0%, rgba(119,194,0,0.85) 50%, rgba(119,194,0,0) 100%); }
.px-demo .win { position: absolute; z-index: 1; left: 5.5%; top: 7%; width: 74%; height: 104%; padding: 2.2cqw; border-radius: 3.4cqw; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.px-demo .win img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: 2cqw; opacity: 0.62; }
.px-demo .dlg { position: absolute; z-index: 2; left: 40%; top: 24%; width: 55%; bottom: -3cqw; display: flex; flex-direction: column; background: #FFFFFF; border-radius: 1.6cqw; box-shadow: 0 2cqw 6cqw rgba(2,20,12,0.4); color: var(--ink); }
.px-demo .dh { display: flex; justify-content: space-between; align-items: center; padding: 3cqw 3.6cqw 2.6cqw; border-bottom: 1px solid var(--line); font: 600 2.7cqw/1 var(--font); }
.px-demo .x { position: relative; width: 2.2cqw; height: 2.2cqw; }
.px-demo .x::before, .px-demo .x::after { content: ""; position: absolute; left: 50%; top: -15%; height: 130%; width: 0.3cqw; margin-left: -0.15cqw; background: var(--ink); transform: rotate(45deg); }
.px-demo .x::after { transform: rotate(-45deg); }
.px-demo .db { display: flex; flex-direction: column; gap: 2cqw; padding: 3.2cqw 3.6cqw; }
.px-demo .ld { font: 600 2.2cqw/1.2 var(--ui); }
.px-demo .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8cqw; }
.px-demo .f { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; min-height: 4.4cqw; padding: 0 1.4cqw; border: 1px solid #B9C4BD; border-radius: 0.6cqw; font: 2cqw/1 var(--ui); }
.px-demo .f.s i { height: 1.5cqw; width: 64%; border-radius: 1cqw; background: #E3E8E4; }
.px-demo .f.s::after { content: ""; width: 1cqw; height: 1cqw; margin-top: -0.6cqw; border-right: 0.25cqw solid var(--muted); border-bottom: 0.25cqw solid var(--muted); transform: rotate(45deg); }
.px-next h3 { font-size: clamp(1.3rem, 1.05rem + 0.7vw, 1.7rem); font-weight: 600; }
.px-next p { margin-top: 10px; }
.px-next .px-ctas { margin-top: 20px; align-items: center; }
.px-faq { margin-top: 24px; border-top: 1px solid var(--line); }
.px-faq details { border-bottom: 1px solid var(--line); }
.px-faq summary { list-style: none; cursor: pointer; display: flex; gap: 18px; align-items: center; padding: 18px 4px; font: 500 17px/1.35 var(--font); color: var(--ink); }
.px-faq summary::-webkit-details-marker { display: none; }
.px-faq summary::before { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--emerald); border-top: 2px solid var(--emerald); transform: rotate(45deg); transition: transform 0.2s ease; }
.px-faq details[open] summary::before { transform: rotate(135deg); }
.px-faq .a { padding: 0 4px 22px 30px; max-width: 76ch; }
.px-faq .a a { color: var(--emerald); }

/* Hero links auf Verlaufsfläche (Komponente) und mit Foto (Rolle) */
.px-hl { background: radial-gradient(70% 120% at 100% 100%, rgba(14,122,74,0.28), rgba(14,122,74,0) 60%), linear-gradient(115deg, #F4FAEC 0%, #E3F2D2 55%, #C4E49C 100%); scroll-margin-top: 90px; }
.px-hl .wrap { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: clamp(40px, 5vw, 72px); }
.px-hl h1, .px-hr h1 { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; }
.px-hl .px-sub, .px-hr .px-sub { margin: 18px 0 0; }
.px-hl .vis { box-shadow: 0 24px 50px rgba(10,77,51,0.18); }
.px-hr { background: linear-gradient(100deg, #F4FAEC 0%, #E6F4D6 46%, #A9D873 100%); scroll-margin-top: 90px; }
.px-hr .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: clamp(40px, 5vw, 64px); }
.px-hr .pimg { position: relative; border-radius: 16px; overflow: visible; aspect-ratio: 4 / 3; }
.px-hr .pimg > img { width: 100%; height: 100%; object-fit: cover; object-position: 92% 30%; border-radius: 16px; box-shadow: 0 24px 50px rgba(10,77,51,0.2); }
.px-hr .gstar, .px-hr .spark { aspect-ratio: 1; }

/* Abschnitt mit Bild und Text (KI für …) */
.px-split { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.px-split img { width: 100%; border-radius: 14px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; box-shadow: 0 16px 40px rgba(2,20,12,0.16); }
.px-split h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem); font-weight: 600; }
.px-split p { margin-top: 10px; }
.px-split .btn { margin-top: 20px; }

/* Reiter je Bereich (Rolle) */
.px-tabbar { margin-top: 28px; display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.px-tabbar button { flex: none; position: relative; border: 0; background: none; padding: 14px 14px; font: 600 15px/1.2 var(--font); color: var(--muted); cursor: pointer; }
.px-tabbar button[aria-selected="true"] { color: var(--ink); }
.px-tabbar button[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--emerald); }
.px-tpanel { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.px-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
.px-apps div { display: grid; gap: 6px; align-content: start; }
.px-apps small { font: 600 11px/1 var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.px-apps b { font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.px-apps p { font-size: 15px; }
.px-apps .more { margin-top: 2px; }
.px-grid2 .more, .px-media .more, .px-mesh8 .more, .px-apps .more, .px-next .more { white-space: normal; }
.px-tfoot { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Unterstützen Sie … (Bereiche einer Komponente) */
.px-mesh8 { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.px-mesh8 div { display: grid; gap: 6px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line); }
.px-mesh8 b { font-size: 17px; font-weight: 600; color: var(--ink); }
.px-mesh8 p { font-size: 15px; }
.px-grid2 { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.px-grid2 > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; align-content: start; }
.px-grid2 .i { width: 32px; height: 32px; color: var(--emerald); stroke-width: 1.6; grid-row: span 3; }
.px-grid2 b { font-size: 18px; font-weight: 600; color: var(--ink); }
.px-grid2 p { font-size: 15.5px; }
.px-grid2 .more { justify-self: start; margin-top: 4px; }
.px-comp { margin-top: 28px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.px-comp a { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 12px; background: var(--tile); text-decoration: none; color: var(--ink); }
.px-comp a:hover { background: var(--lime-soft); }
.px-comp small { font: 700 11px/1 var(--font); letter-spacing: 0.07em; text-transform: uppercase; color: var(--emerald); }
.px-comp b { font-size: 16px; font-weight: 600; line-height: 1.25; }
.px-comp span { font-size: 14px; color: var(--slate); }

/* Mechanismus-Grafik */

/* Themenseite */
.px-th { padding-block: clamp(40px, 5vw, 72px) 0; scroll-margin-top: 90px; }
.px-th .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.px-th .kick { font: 700 13px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.px-th h1 { margin-top: 16px; font-size: clamp(2.1rem, 1.5rem + 2vw, 3.1rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; }
.px-th .px-sub { margin: 18px 0 0; }
.px-th .date { margin-top: 18px; font: 14px var(--ui); color: var(--muted); }
.px-th .chip { display: inline-block; margin-top: 14px; font: 500 13px/1 var(--ui); padding: 7px 10px; border-radius: 6px; background: var(--tile); color: var(--slate); }
.px-th .pic2 { border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; }
.px-th .pic2 img { width: 100%; height: 100%; object-fit: cover; }
.px-art { margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: 230px minmax(0, 1fr) 270px; gap: clamp(24px, 3.5vw, 56px); align-items: start; }
.px-toc { position: sticky; top: 104px; }
.px-toc h2 { font-size: 18px; font-weight: 600; }
.px-toc ol { list-style: none; margin: 18px 0 0; padding: 0; border-left: 2px solid var(--line); }
.px-toc a { display: block; margin-left: -2px; padding: 10px 0 10px 16px; border-left: 2px solid transparent; font: 600 14.5px/1.3 var(--font); color: var(--ink); text-decoration: none; }
.px-toc a.on { border-left-color: var(--emerald); color: var(--emerald); }
.px-body > h2 { font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.95rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin-top: 52px; scroll-margin-top: 104px; }
.px-body > h2:first-child { margin-top: 0; }
.px-body > p { margin-top: 14px; font-size: 17px; line-height: 1.65; max-width: 68ch; }
.px-steps { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.px-steps div { border-radius: 12px; background: var(--tile); padding: 16px; display: grid; gap: 6px; align-content: start; }
.px-steps i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--forest); color: var(--white); font: 700 14px var(--font); }
.px-steps b { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.px-steps p { font-size: 14.5px; line-height: 1.45; }
.px-promo { position: sticky; top: 104px; border-radius: 16px; overflow: hidden; background: var(--lime-soft); display: grid; }
.px-promo .vis3 { height: 150px; border-radius: 0; }
.px-promo > div:last-child { padding: 22px; display: grid; gap: 10px; justify-items: start; }
.px-promo small { font: 700 12px/1 var(--font); letter-spacing: 0.07em; text-transform: uppercase; color: var(--emerald); }
.px-promo b { font-size: 20px; line-height: 1.2; font-weight: 600; color: var(--ink); }
.px-promo p { font-size: 15px; }

@media (max-width: 1100px) {
  .px-art { grid-template-columns: minmax(0, 1fr) 260px; }
  .px-toc { display: none; }
  .px-comp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-mesh8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .ln-in { flex-wrap: wrap; gap: 0; min-height: 0; }
  .ln-id { border-right: 0; padding: 10px 0 2px; max-width: none; }
  .ln-tabs { width: 100%; }
  .ln-tabs a { padding: 14px 10px; }
  .ln-tabs a:first-child { padding-left: 0; }
  .ln-cta { display: none; }
  .px-media, .px-assist, .px-next, .px-hl .wrap, .px-hr .wrap, .px-split, .px-tpanel, .px-th .wrap, .px-art, .px-grid2 { grid-template-columns: minmax(0, 1fr); }
  .px-cols3, .px-cards { grid-template-columns: minmax(0, 1fr); }
  .px-promo { position: static; }
  .px-stage { aspect-ratio: auto; display: grid; gap: 14px; }
  .px-photo { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .px-ucard { position: relative; left: auto; top: auto; width: 100%; }
  .px-prompt { position: relative; left: auto; right: auto; bottom: auto; }
  .px-stage .gstar, .px-stage .spark { display: none; }
  .px-comp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .px-apps, .px-mesh8, .px-comp, .px-steps { grid-template-columns: minmax(0, 1fr); }
  }
/* WELLE1-CSS */
/* Welle 1: Titelblatt mit Bereichsmotiv, Gerätebild im Video-Platz, Bereichsreiter in der Entwurfsleiste */
.rep .ill { display: block; height: 29cqw; margin: -3.2cqw -3.2cqw 1.8cqw; padding: 2.4cqw 3.2cqw 2.6cqw; background: #073523; }
.rep .ill .mo { display: block; width: 100%; height: 100%; }
.px-video.dev { background: radial-gradient(70% 90% at 72% 100%, rgba(119,194,0,0.3), rgba(119,194,0,0) 70%), linear-gradient(135deg, #F4FAEC, #DCEFC6); }
.px-video.dev img { object-fit: contain; object-position: center bottom; padding: 5% 10% 0; }
.dv-areas { justify-self: start; }
.dv-areas[hidden] { display: none; }
/* Hero-Foto im SAP-Aufbau: Bild 614:451, Rahmen ab 15,5 % der Höhe, der Kopf der Hauptperson ragt darüber */
.px-stage.pop { max-width: 1100px; aspect-ratio: 1000 / 411; }
.px-stage.pop .px-photo { left: 22%; top: 0; width: 56%; height: 100%; border-radius: 0; overflow: visible; background: none; }
.px-stage.pop .px-photo img { object-fit: contain; }
.px-stage.pop .px-ucard { top: 22%; width: 29%; }
.px-stage.pop .px-prompt { left: 20%; right: 20%; top: 72.5%; bottom: auto; }
@media (max-width: 820px) {
  .px-stage.pop { aspect-ratio: auto; }
  .px-stage.pop .px-photo { left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 614 / 451; }
  .px-stage.pop .px-ucard { top: auto; width: 100%; }
  .px-stage.pop .px-prompt { left: auto; right: auto; top: auto; }
}
/* /WELLE1-CSS */
/* WELLE2-CSS */
/* Welle 2: Anwendungsseiten wie SAPs Unterproduktseiten: Band mit Fotokarte, Eingabe und Datenkarte, vier Vorteile, Agenten-Schaubild, Funktionsreiter */
.px-ah { background: radial-gradient(55% 90% at 100% 40%, rgba(119,194,0,0.32), rgba(119,194,0,0) 70%), linear-gradient(100deg, #F4FAEC 0%, #E6F4D6 52%, #CDE9A8 100%); scroll-margin-top: 90px; }
.px-ah .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: clamp(40px, 5vw, 76px); }
.px-ah h1 { font-size: clamp(2.1rem, 1.5rem + 2vw, 3.1rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.07; text-wrap: balance; }
.px-ah .px-sub { margin: 18px 0 0; }
.ah-vis { position: relative; container-type: inline-size; aspect-ratio: 100 / 68; }
.ah-photo { position: absolute; left: 3%; top: 2%; width: 60%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--tile); box-shadow: 0 24px 50px rgba(10,77,51,0.18); }
.ah-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.ah-photo .px-newpic { position: absolute; }
.ah-chip { position: absolute; left: 44%; right: 1%; top: 7%; z-index: 2; display: flex; align-items: center; gap: 2cqw; padding: 2.2cqw 2.8cqw; border: 2px solid transparent; border-radius: 2.6cqw; background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(110deg, #0E7A4A, #77C200, #C3E59A) border-box; box-shadow: 0 14px 32px rgba(10,77,51,0.16); font: 500 clamp(12.5px, 2.55cqw, 16px)/1.35 var(--font); color: var(--ink); }
.ah-chip .i { width: clamp(16px, 3.4cqw, 22px); height: clamp(16px, 3.4cqw, 22px); color: var(--emerald); }
.ah-spark { position: absolute; left: 76%; top: 26%; width: 5.4%; aspect-ratio: 1; z-index: 2; }
.ah-card { position: absolute; left: 46%; right: 0; top: 37%; z-index: 2; padding: 1.3cqw; border-radius: 3cqw; background: rgba(255,255,255,0.34); border: 2px solid rgba(255,255,255,0.95); box-shadow: 0 18px 40px rgba(10,77,51,0.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ah-card .in { background: var(--white); border-radius: 2cqw; padding: 2.6cqw 2.8cqw; display: grid; gap: 1.4cqw; font: clamp(12px, 2.3cqw, 14.5px)/1.35 var(--ui); color: var(--ink); }
.ah-card b { font: 600 clamp(13px, 2.5cqw, 15.5px)/1.3 var(--font); }
.ah-card .r { display: flex; justify-content: space-between; align-items: baseline; gap: 1.6cqw; padding: 1.3cqw 1.6cqw; border-radius: 1.4cqw; background: #F4F7F2; }
.ah-card .r em { font-style: normal; color: var(--emerald); font-weight: 600; text-align: right; }
.px-acard .r > span { display: grid; gap: 2px; min-width: 0; }
.px-acard .r small { font-size: 12.5px; color: var(--muted); }
.px-ben { margin-top: clamp(44px, 5vw, 72px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 48px) clamp(28px, 5vw, 80px); padding-bottom: clamp(8px, 1vw, 16px); }
.px-ben .i { width: 38px; height: 38px; color: var(--emerald); stroke-width: 1.6; }
.px-ben h3 { margin-top: 14px; font-size: 1.22rem; font-weight: 600; line-height: 1.25; }
.px-ben p { margin-top: 6px; font-size: 16px; max-width: 52ch; }
.px-fpanel[hidden] { display: none; }
.px-fpanel .px-points { margin-top: 0; gap: 20px; }
.px-fpanel .px-points b { font-size: 17px; }
.ag-sec .px-split { align-items: center; }
.ag-sec .px-split h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem); font-weight: 600; }
.ag-sec .px-split .more { display: inline-block; margin-top: 16px; white-space: normal; }
.agv { container-type: inline-size; position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: radial-gradient(70% 90% at 0% 100%, rgba(119,194,0,0.22), rgba(119,194,0,0) 60%), linear-gradient(135deg, #F7FBF2 0%, #E6F3D8 100%); box-shadow: 0 16px 40px rgba(2,20,12,0.1); }
.agv .ag-l { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #8FCB4A; stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.agv .ag-l path { stroke-width: 1.6px; }
.agv .ag-g i { position: absolute; height: 4.2%; border-radius: 99px; background: rgba(14,122,74,0.1); }
.agv .ag-s { position: absolute; left: 5%; top: 9%; width: 32%; height: 82%; display: grid; grid-template-rows: 1fr 1.25fr 1fr; gap: 4%; }
.agv .ag-c { border-radius: 1.6cqw; background: #0A4D33; display: flex; flex-direction: column; justify-content: center; gap: 1.2cqw; padding: 0 2.4cqw; color: var(--white); box-shadow: 0 1cqw 2.4cqw rgba(2,20,12,0.18); }
.agv .ag-c i { display: block; height: 1.1cqw; width: 70%; border-radius: 1cqw; background: rgba(195,229,154,0.55); }
.agv .ag-c i + i { width: 45%; background: rgba(255,255,255,0.25); }
.agv .ag-c.on { background: #0E7A4A; flex-direction: column; align-items: flex-start; gap: 1.2cqw; }
.agv .ag-c.on .i { width: 3.4cqw; height: 3.4cqw; color: #C3E59A; }
.agv .ag-c.on b { font: 600 2.7cqw/1.15 var(--font); }
.agv .ag-n { position: absolute; left: 46%; width: 34%; min-height: 18%; transform: translateY(0); display: flex; align-items: center; gap: 1.6cqw; padding: 1.2cqw 1.8cqw; border-radius: 1.4cqw; background: var(--white); border: 1px solid #C3E59A; box-shadow: 0 0.8cqw 2cqw rgba(10,77,51,0.1); font: 600 1.95cqw/1.25 var(--font); color: var(--ink); }
.agv .ag-n i { flex: none; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; display: grid; place-items: center; background: var(--lime-soft); color: var(--emerald); font: 700 1.8cqw/1 var(--font); font-style: normal; }
.c3.ap .rep .ti { overflow-wrap: anywhere; }
.dv-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; justify-self: start; max-width: 100%; }
.dv-apps[hidden] { display: none; }
.dv-apps label { font: 500 13px/1 var(--ui); color: #C9CBC3; }
.dv-apps select { font: 500 13px/1.2 var(--ui); color: #1C1D1A; background: #ECEDE8; border: 0; border-radius: 6px; padding: 8px 10px; max-width: 100%; }
@media (max-width: 820px) {
  .px-ah .wrap, .px-ben { grid-template-columns: minmax(0, 1fr); }
  .ah-vis { aspect-ratio: auto; display: grid; gap: 12px; container-type: normal; }
  .ah-photo { position: relative; left: auto; top: auto; width: 100%; aspect-ratio: 4 / 3; }
  .ah-chip, .ah-card { position: relative; left: auto; right: auto; top: auto; }
  .ah-chip { margin: -44px 14px 0; padding: 12px 14px; gap: 10px; border-radius: 14px; font-size: 15px; }
  .ah-chip .i { width: 20px; height: 20px; }
  .ah-card { padding: 7px; border-radius: 18px; }
  .ah-card .in { padding: 14px 16px; gap: 8px; border-radius: 12px; font-size: 14px; }
  .ah-card b { font-size: 15px; }
  .ah-card .r { padding: 8px 10px; gap: 10px; border-radius: 8px; }
  .ah-spark { display: none; }
}
/* /WELLE2-CSS */
/* WELLE3-CSS */
/* Wellen 3 bis 5: Komponenten, Übersichten, Preise, Rollen, Themen, Service, Unternehmen, Rechtliches */
.vis .b-ic .i { width: 62%; height: 62%; color: var(--emerald); stroke-width: 1.8; }
.vis.dv { aspect-ratio: 16 / 11; }
.dv .dv-card { left: 6%; top: 8%; width: 70%; z-index: 3; }
.dv .dv-card .in { display: grid; }
.dv .dv-hd { display: flex; align-items: center; gap: 1.4cqw; padding: 2cqw 2.4cqw; border-bottom: 0.15cqw solid #E8ECE6; font-size: 1.9cqw; font-weight: 600; white-space: nowrap; }
.dv .dv-hd .t { overflow: hidden; text-overflow: ellipsis; }
.dv .dv-hd em { margin-left: auto; font-style: normal; font-size: 1.45cqw; font-weight: 500; color: var(--emerald); }
.dv .b-tag { font-size: 1.35cqw; padding: 0.5cqw 1cqw; border-radius: 0.7cqw; }
.dv .dv-rows { display: grid; gap: 1.5cqw; padding: 2.2cqw 2.4cqw 2.6cqw; }
.dv .dv-r { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 1.8cqw; font-size: 1.75cqw; }
.dv .dv-r span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv .dv-r i { height: 1.2cqw; border-radius: 1cqw; background: linear-gradient(90deg, var(--emerald) var(--w), #E3EBDD var(--w)); }
.dv .dv-r b { font-size: 1.65cqw; font-weight: 600; color: var(--emerald); min-width: 6cqw; text-align: right; }
.dv .dv-r i.nb { background: none; }
.px-isowrap.hiso { align-self: center; }
.px-video.shot img { object-fit: cover; object-position: top left; }
.dv .dv-uc { left: auto; right: 4%; top: auto; bottom: 7%; width: 46%; gap: 1.2cqw; padding: 1.4cqw; border-radius: 2cqw; }
.dv .dv-uc > div { gap: 1.4cqw; padding: 1.1cqw 1.3cqw; border-radius: 1.3cqw; font-size: 1.6cqw; line-height: 1.25; }
.dv .dv-uc .b-ic { width: 4.2cqw; height: 4.2cqw; border-radius: 1cqw; }
.dv .dv-uc .u { display: block; font-size: 1.35cqw; color: var(--muted); }
.hs { position: relative; }
.hs-in { border-radius: 14px; overflow: hidden; border: 2px solid rgba(255,255,255,0.95); box-shadow: 0 24px 50px rgba(10,77,51,0.2); background: var(--white); }
.hs-in img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.hs-chip { position: absolute; left: 8%; right: 8%; bottom: -22px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 2px solid transparent; border-radius: 14px; background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(110deg, #0E7A4A, #77C200, #C3E59A) border-box; box-shadow: 0 14px 32px rgba(10,77,51,0.16); font: 500 16px/1.35 var(--font); }
.hs-chip .i { flex: none; width: 22px; height: 22px; color: var(--emerald); }
.px-video.ph img { object-position: center 30%; }
.px-ben.top { margin-top: 36px; }
.px-comp { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.px-steps.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.px-steps.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.px-tfoot { margin-top: 22px; }
.px-card small { font: 700 11.5px/1 var(--font); letter-spacing: 0.07em; text-transform: uppercase; color: var(--emerald); }
.px-card span { font-size: 15px; color: var(--slate); }
.px-az { margin-top: 28px; columns: 4 220px; column-gap: 32px; }
.px-az > div { break-inside: avoid; display: grid; gap: 6px; padding: 0 0 22px; }
.px-az b { font: 700 20px/1 var(--font); color: var(--emerald); margin-bottom: 4px; }
.px-az .az { color: var(--ink); text-decoration: none; font-size: 16px; }
.px-az .az:hover { color: var(--emerald); text-decoration: underline; }
.px-grp { margin-top: 32px; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 20px; }
.px-grp > div { border-radius: 14px; background: var(--tile); padding: 24px; display: grid; gap: 10px; align-content: start; }
.px-grp small { font: 700 12px/1 var(--font); letter-spacing: 0.07em; text-transform: uppercase; color: var(--emerald); }
.px-grp h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.px-grp p { font-size: 15.5px; }
.px-grp .lk { display: grid; gap: 6px; margin-top: 6px; justify-items: start; }
.px-grp .more { white-space: normal; }
.px-price { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.px-price .pc { padding: clamp(28px, 4vw, 44px); background: linear-gradient(135deg, #F4FAEC 0%, #DDEFC8 100%); display: grid; gap: 10px; align-content: start; justify-items: start; }
.px-price .pc small { font: 700 13px/1 var(--font); letter-spacing: 0.07em; text-transform: uppercase; color: var(--emerald); }
.px-price .am { font: 700 clamp(3rem, 2.2rem + 3vw, 4.6rem)/1 var(--font); letter-spacing: -0.03em; color: var(--ink); margin-top: 8px; }
.px-pk { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.px-pk > div { border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px, 3vw, 40px); display: grid; gap: 8px; align-content: start; justify-items: start; background: #FFFFFF; }
.px-pk > div.hl { border-color: var(--emerald); box-shadow: inset 0 0 0 1px var(--emerald); background: linear-gradient(180deg, #F4FAEC 0%, #FFFFFF 45%); }
.px-pk small { font: 700 13px/1 var(--font); letter-spacing: 0.07em; text-transform: uppercase; color: var(--emerald); }
.px-pk h3 { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.8rem); font-weight: 600; line-height: 1.15; }
.px-pk .am { font: 700 clamp(1.7rem, 1.4rem + 1vw, 2.3rem)/1.1 var(--font); color: var(--ink); margin-top: 6px; }
.px-pk .un { font: 500 16px/1.35 var(--font); color: var(--slate); }
.px-pk p { margin: 4px 0 8px; max-width: 46ch; }
.px-pk h4 { font: 600 16px/1.3 var(--font); color: var(--ink); margin-top: 14px; }
.px-pk .px-check { justify-self: stretch; }
.px-price .am.txt { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); letter-spacing: -0.02em; }
.px-price .un { font: 500 17px/1.3 var(--font); color: var(--slate); }
.px-price .pc p { margin: 8px 0 14px; max-width: 40ch; }
.px-price .inc { padding: clamp(28px, 4vw, 44px); }
.px-price .inc h3 { font-size: 1.2rem; font-weight: 600; }
.px-check { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.px-check li { position: relative; padding-left: 32px; }
.px-check li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--lime-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%230E7A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.px-pnotes { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.px-pnotes > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.px-pnotes .i { width: 30px; height: 30px; color: var(--emerald); stroke-width: 1.6; }
.px-pnotes b { font-weight: 600; }
.px-pnotes p { font-size: 15.5px; margin-top: 2px; }
.px-pl { padding-block: clamp(44px, 5vw, 76px) clamp(8px, 1vw, 16px); background: linear-gradient(100deg, #F4FAEC 0%, #E6F4D6 60%, #D4ECB4 100%); scroll-margin-top: 90px; }
.px-pl h1 { font-size: clamp(2.1rem, 1.5rem + 2vw, 3.1rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; max-width: 24ch; }
.px-pl .px-sub { margin: 16px 0 0; }
.px-pl .date { margin-top: 14px; font: 14px var(--ui); color: var(--muted); }
.px-pl .px-ctas { margin-top: 24px; }
.px-pl .wrap { padding-bottom: clamp(36px, 4vw, 60px); }
.px-legal { max-width: 78ch; }
.px-legal h2 { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); font-weight: 600; line-height: 1.25; margin-top: 40px; }
.px-legal h2:first-child { margin-top: 0; }
.px-legal h3 { font-size: 1.12rem; font-weight: 600; margin-top: 24px; }
.px-legal p { margin-top: 12px; font-size: 16.5px; line-height: 1.65; }
.px-legal .px-bullets { font-size: 16.5px; }
.px-newsl { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.px-news { display: grid; gap: 10px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); }
.px-news:hover { border-color: var(--emerald); }
.px-news small { font: 500 13px var(--ui); color: var(--muted); }
.px-news b { font-size: 1.2rem; line-height: 1.25; font-weight: 600; }
.px-news span { font-size: 15.5px; color: var(--slate); }
.px-news em { font-style: normal; font-weight: 500; color: var(--emerald); }
.px-news em::after { content: " ›"; }
.px-form { margin-top: 28px; max-width: 760px; display: grid; gap: 18px; }
.px-form .fl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.px-form label { display: grid; gap: 6px; font: 500 15px/1.3 var(--font); color: var(--ink); }
.px-form input:not([type=checkbox]), .px-form select, .px-form textarea { font: 16px/1.4 var(--ui); padding: 11px 12px; border: 1px solid #B9C4BC; border-radius: 8px; background: var(--white); color: var(--ink); width: 100%; }
.px-form textarea { resize: vertical; }
.px-form label:has(textarea) { grid-column: 1 / -1; }
.px-form .ck { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14.5px; color: var(--slate); }
.px-form .ck input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--emerald); flex: none; }
.px-form .btn { justify-self: start; }
.px-form .fnote { font: 14.5px/1.5 var(--ui); color: var(--slate); max-width: 70ch; }
.px-form .fl:has(> label.ck:only-child), .px-form .fl:not(:has(> label:not(.ck))) { grid-template-columns: minmax(0, 1fr); }
.ln.none { display: none; }
.px-th .pic2 { position: relative; }
.px-newpic.np { overflow: auto; align-content: center; gap: 8px; padding: 5% 7%; }
.px-newpic.np b { text-transform: none; letter-spacing: 0; font-size: 14px; }
.px-newpic.np .np-note { font: 14px/1.4 var(--ui); color: var(--slate); max-width: 52ch; }
.np-prompt { width: 100%; max-width: 560px; font: 12.5px/1.45 var(--ui); color: var(--ink); background: rgba(255,255,255,0.85); border: 1px solid #B9C4BC; border-radius: 8px; padding: 8px 10px; resize: vertical; }
.px-newpic .np-copy { justify-self: center; }
.dv-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; justify-self: start; max-width: 100%; }
.dv-pages[hidden] { display: none; }
.dv-pages label { font: 500 13px/1 var(--ui); color: #C9CBC3; }
.dv-pages select { font: 500 13px/1.2 var(--ui); color: #1C1D1A; background: #ECEDE8; border: 0; border-radius: 6px; padding: 8px 10px; max-width: 100%; }
@media (max-width: 1100px) {
  .px-comp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-grp, .px-newsl, .px-pnotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-steps.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .px-comp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-price, .px-pk { grid-template-columns: minmax(0, 1fr); }
  .px-grp, .px-newsl, .px-pnotes, .px-form .fl { grid-template-columns: minmax(0, 1fr); }
  .vis.dv { aspect-ratio: auto; container-type: normal; display: grid; gap: 12px; padding: 16px; }
  .dv .dv-card, .dv .dv-uc { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; }
  .dv .dv-hd { gap: 10px; padding: 12px 14px; font-size: 15px; }
  .dv .dv-hd em { font-size: 12.5px; }
  .dv .b-tag { font-size: 11px; padding: 4px 7px; border-radius: 5px; }
  .dv .dv-rows { gap: 10px; padding: 14px; }
  .dv .dv-r { gap: 10px; font-size: 13.5px; grid-template-columns: minmax(0, 1fr) 56px auto; }
  .dv .dv-r span { white-space: normal; overflow: visible; hyphens: auto; overflow-wrap: anywhere; }
  .dv .dv-r b { white-space: normal; text-align: right; }
  .dv .dv-r i { height: 7px; }
  .dv .dv-r b { font-size: 13px; min-width: 40px; }
  .dv .dv-uc { gap: 8px; padding: 10px; border-radius: 14px; }
  .dv .dv-uc > div { gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14px; }
  .dv .dv-uc .b-ic { width: 30px; height: 30px; border-radius: 8px; }
  .dv .dv-uc .u { font-size: 12.5px; }
  .dv .net, .dv .knot { display: none; }
  .hs-chip { position: relative; left: auto; right: auto; bottom: auto; margin: -20px 12px 0; font-size: 15px; }
}
@media (max-width: 560px) {
  .px-comp, .px-steps.n4, .px-steps.n2 { grid-template-columns: minmax(0, 1fr); }
}
/* /WELLE3-CSS */


/* Kräftiger Verlauf nur auf den Technologieseiten (.px-hl: Intelligenzinfrastruktur, Plattform, KI usw.), wie SAP Business Data Cloud.
   Bereichs-, Anwendungs-, Foto-, Text- und Artikelseiten bleiben weiß wie SAP Personalmanagement; Karten mit leichtem Schatten.
   Technologieseiten: EIN Verlauf füllt den Hero (links hinter dem Text Lime hell, nach rechts unten
   kräftiger bis Smaragd) und läuft unten weich ins Weiß aus; die lokale Navigation darüber bleibt weiß. Grafiken liegen ohne eigenen
   Kasten auf dem Verlauf: weiße Karten mit weichem Schatten, 2 bis 4 Geisterkacheln im Raster der Karten, dahinter ein dichtes
   Linienbündel. Nur im Hero; Grafiken weiter unten behalten ihren Kasten. Seiten ohne Bild und Artikel: flacherer Verlauf ohne Dunkel. */
:root {
  --hero-grad: linear-gradient(115deg, #DDF0C6 0%, #CDE8A9 30%, #B5DC80 46%, #8CC75C 60%, #52A954 76%, #23894D 90%, #0E7A4A 100%);
  --hero-grad-m: linear-gradient(172deg, #DDF0C6 0%, #D2EBB2 calc(100% - 290px), #A6D466 calc(100% - 190px), #4FA754 calc(100% - 90px), #0E7A4A 100%);
  --hero-fade: linear-gradient(180deg, rgba(255,255,255,0) calc(100% - 96px), rgba(255,255,255,0.6) calc(100% - 36px), #FFFFFF 100%);
  --hero-card: 0 18px 44px rgba(8,62,38,0.22), 0 2px 6px rgba(8,62,38,0.08);
  --hero-card-w: 0 14px 36px rgba(16,48,32,0.13), 0 1px 4px rgba(16,48,32,0.08);
  --hero-ghost: linear-gradient(150deg, rgba(205,234,170,0.40) 0%, rgba(119,194,0,0.26) 100%);
}
.px-hl { position: relative; isolation: isolate; overflow: clip; background: var(--hero-fade), var(--hero-grad); }
.px-hr, .px-ah, .px-hc, .px-pl, .px-th { position: relative; isolation: isolate; overflow: clip; background: #FFFFFF; }
.px-hl .wrap { padding-bottom: clamp(56px, 6vw, 88px); }
.px-hl .eyebrow, .px-hr .eyebrow, .px-ah .eyebrow, .px-pl .eyebrow, .px-hc .eyebrow { color: var(--forest); }
.px-pl .date, .px-th .date { color: var(--slate); }

/* Linienbündel hinter der Grafik (Grid-Fläche der rechten Spalte) */
.px-hl .wrap { position: relative; }
.px-hl .wrap::before { content: ""; position: absolute; z-index: -1; grid-column: 2; grid-row: 1; left: 5%; width: 40%; top: -90px; bottom: -110px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 600' preserveAspectRatio='none' fill='none' stroke='%23FFFFFF' stroke-width='0.9' vector-effect='non-scaling-stroke' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M61.7 0.0L64.3 12.5L67.3 25.0L70.7 37.5L74.5 50.0L78.6 62.5L83.1 75.0L87.8 87.5L92.7 100.0L97.9 112.5L103.2 125.0L108.7 137.5L114.2 150.0L119.7 162.5L125.2 175.0L130.6 187.5L135.7 200.0L140.7 212.5L145.4 225.0L149.7 237.5L153.6 250.0L157.1 262.5L160.1 275.0L162.5 287.5L164.4 300.0L165.6 312.5L166.2 325.0L166.0 337.5L165.2 350.0L163.8 362.5L161.6 375.0L158.7 387.5L155.1 400.0L150.9 412.5L146.0 425.0L140.6 437.5L134.6 450.0L128.1 462.5L121.2 475.0L113.9 487.5L106.3 500.0L98.4 512.5L90.4 525.0L82.4 537.5L74.3 550.0L66.4 562.5L58.6 575.0L51.1 587.5L43.9 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M63.8 0.0L66.4 12.5L69.3 25.0L72.6 37.5L76.3 50.0L80.2 62.5L84.5 75.0L89.0 87.5L93.8 100.0L98.7 112.5L103.8 125.0L108.9 137.5L114.2 150.0L119.4 162.5L124.6 175.0L129.6 187.5L134.5 200.0L139.2 212.5L143.6 225.0L147.6 237.5L151.3 250.0L154.5 262.5L157.3 275.0L159.5 287.5L161.2 300.0L162.3 312.5L162.8 325.0L162.6 337.5L161.8 350.0L160.3 362.5L158.1 375.0L155.3 387.5L151.9 400.0L147.9 412.5L143.2 425.0L138.0 437.5L132.3 450.0L126.2 462.5L119.6 475.0L112.7 487.5L105.5 500.0L98.0 512.5L90.5 525.0L82.9 537.5L75.3 550.0L67.8 562.5L60.4 575.0L53.3 587.5L46.6 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M65.9 0.0L68.4 12.5L71.3 25.0L74.5 37.5L78.0 50.0L81.8 62.5L85.9 75.0L90.2 87.5L94.7 100.0L99.4 112.5L104.2 125.0L109.1 137.5L114.1 150.0L119.0 162.5L123.9 175.0L128.6 187.5L133.2 200.0L137.6 212.5L141.7 225.0L145.5 237.5L148.9 250.0L151.9 262.5L154.4 275.0L156.5 287.5L158.0 300.0L159.0 312.5L159.3 325.0L159.1 337.5L158.3 350.0L156.8 362.5L154.7 375.0L152.1 387.5L148.8 400.0L144.9 412.5L140.5 425.0L135.6 437.5L130.1 450.0L124.3 462.5L118.1 475.0L111.5 487.5L104.7 500.0L97.7 512.5L90.6 525.0L83.4 537.5L76.3 550.0L69.2 562.5L62.3 575.0L55.6 587.5L49.3 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M68.0 0.0L70.4 12.5L73.2 25.0L76.3 37.5L79.7 50.0L83.4 62.5L87.3 75.0L91.4 87.5L95.7 100.0L100.1 112.5L104.7 125.0L109.3 137.5L113.9 150.0L118.6 162.5L123.1 175.0L127.6 187.5L131.9 200.0L136.0 212.5L139.8 225.0L143.3 237.5L146.5 250.0L149.2 262.5L151.6 275.0L153.4 287.5L154.8 300.0L155.6 312.5L155.9 325.0L155.7 337.5L154.8 350.0L153.4 362.5L151.4 375.0L148.8 387.5L145.7 400.0L142.0 412.5L137.8 425.0L133.1 437.5L128.0 450.0L122.5 462.5L116.7 475.0L110.5 487.5L104.1 500.0L97.5 512.5L90.8 525.0L84.1 537.5L77.4 550.0L70.7 562.5L64.3 575.0L58.0 587.5L52.1 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M70.0 0.0L72.4 12.5L75.1 25.0L78.1 37.5L81.4 50.0L84.9 62.5L88.6 75.0L92.5 87.5L96.5 100.0L100.7 112.5L105.0 125.0L109.4 137.5L113.7 150.0L118.1 162.5L122.4 175.0L126.5 187.5L130.5 200.0L134.3 212.5L137.8 225.0L141.1 237.5L144.0 250.0L146.5 262.5L148.7 275.0L150.4 287.5L151.6 300.0L152.3 312.5L152.5 325.0L152.2 337.5L151.4 350.0L150.0 362.5L148.1 375.0L145.6 387.5L142.6 400.0L139.1 412.5L135.2 425.0L130.8 437.5L126.0 450.0L120.8 462.5L115.3 475.0L109.5 487.5L103.5 500.0L97.4 512.5L91.1 525.0L84.8 537.5L78.6 550.0L72.4 562.5L66.3 575.0L60.5 587.5L54.9 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M72.0 0.0L74.4 12.5L77.0 25.0L79.9 37.5L83.0 50.0L86.3 62.5L89.8 75.0L93.5 87.5L97.4 100.0L101.3 112.5L105.3 125.0L109.4 137.5L113.5 150.0L117.5 162.5L121.5 175.0L125.4 187.5L129.1 200.0L132.6 212.5L135.8 225.0L138.8 237.5L141.5 250.0L143.8 262.5L145.7 275.0L147.3 287.5L148.4 300.0L149.0 312.5L149.1 325.0L148.8 337.5L148.0 350.0L146.6 362.5L144.8 375.0L142.4 387.5L139.6 400.0L136.3 412.5L132.6 425.0L128.5 437.5L124.0 450.0L119.2 462.5L114.0 475.0L108.7 487.5L103.1 500.0L97.3 512.5L91.5 525.0L85.6 537.5L79.8 550.0L74.0 562.5L68.4 575.0L63.0 587.5L57.8 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M74.0 0.0L76.3 12.5L78.9 25.0L81.6 37.5L84.6 50.0L87.7 62.5L91.1 75.0L94.5 87.5L98.1 100.0L101.8 112.5L105.6 125.0L109.4 137.5L113.2 150.0L116.9 162.5L120.6 175.0L124.2 187.5L127.6 200.0L130.8 212.5L133.8 225.0L136.5 237.5L138.9 250.0L141.0 262.5L142.8 275.0L144.2 287.5L145.1 300.0L145.6 312.5L145.7 325.0L145.4 337.5L144.5 350.0L143.3 362.5L141.5 375.0L139.3 387.5L136.7 400.0L133.6 412.5L130.1 425.0L126.3 437.5L122.1 450.0L117.6 462.5L112.8 475.0L107.9 487.5L102.7 500.0L97.4 512.5L92.0 525.0L86.5 537.5L81.1 550.0L75.8 562.5L70.6 575.0L65.6 587.5L60.8 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M76.0 0.0L78.3 12.5L80.7 25.0L83.3 37.5L86.1 50.0L89.1 62.5L92.2 75.0L95.5 87.5L98.9 100.0L102.3 112.5L105.8 125.0L109.3 137.5L112.8 150.0L116.3 162.5L119.7 175.0L122.9 187.5L126.0 200.0L129.0 212.5L131.7 225.0L134.2 237.5L136.4 250.0L138.3 262.5L139.8 275.0L141.0 287.5L141.9 300.0L142.3 312.5L142.3 325.0L142.0 337.5L141.2 350.0L139.9 362.5L138.3 375.0L136.2 387.5L133.8 400.0L130.9 412.5L127.7 425.0L124.1 437.5L120.3 450.0L116.1 462.5L111.7 475.0L107.1 487.5L102.4 500.0L97.5 512.5L92.5 525.0L87.5 537.5L82.6 550.0L77.7 562.5L72.9 575.0L68.2 587.5L63.8 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M78.0 0.0L80.1 12.5L82.5 25.0L85.0 37.5L87.6 50.0L90.4 62.5L93.4 75.0L96.4 87.5L99.6 100.0L102.7 112.5L106.0 125.0L109.2 137.5L112.4 150.0L115.6 162.5L118.7 175.0L121.6 187.5L124.5 200.0L127.1 212.5L129.6 225.0L131.8 237.5L133.8 250.0L135.4 262.5L136.8 275.0L137.9 287.5L138.6 300.0L139.0 312.5L138.9 325.0L138.6 337.5L137.8 350.0L136.6 362.5L135.1 375.0L133.2 387.5L130.9 400.0L128.3 412.5L125.3 425.0L122.1 437.5L118.5 450.0L114.7 462.5L110.7 475.0L106.5 487.5L102.1 500.0L97.7 512.5L93.1 525.0L88.6 537.5L84.0 550.0L79.6 562.5L75.2 575.0L71.0 587.5L66.9 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M79.9 0.0L82.0 12.5L84.2 25.0L86.6 37.5L89.1 50.0L91.7 62.5L94.5 75.0L97.3 87.5L100.2 100.0L103.1 112.5L106.1 125.0L109.0 137.5L111.9 150.0L114.8 162.5L117.6 175.0L120.3 187.5L122.8 200.0L125.2 212.5L127.4 225.0L129.4 237.5L131.1 250.0L132.6 262.5L133.8 275.0L134.7 287.5L135.3 300.0L135.6 312.5L135.6 325.0L135.2 337.5L134.4 350.0L133.4 362.5L131.9 375.0L130.2 387.5L128.1 400.0L125.7 412.5L123.0 425.0L120.0 437.5L116.8 450.0L113.4 462.5L109.7 475.0L105.9 487.5L102.0 500.0L97.9 512.5L93.8 525.0L89.7 537.5L85.6 550.0L81.6 562.5L77.6 575.0L73.8 587.5L70.1 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M81.9 0.0L83.8 12.5L86.0 25.0L88.2 37.5L90.5 50.0L93.0 62.5L95.5 75.0L98.1 87.5L100.8 100.0L103.4 112.5L106.1 125.0L108.8 137.5L111.4 150.0L114.0 162.5L116.5 175.0L118.9 187.5L121.1 200.0L123.2 212.5L125.2 225.0L126.9 237.5L128.5 250.0L129.7 262.5L130.8 275.0L131.6 287.5L132.1 300.0L132.3 312.5L132.2 325.0L131.8 337.5L131.1 350.0L130.1 362.5L128.8 375.0L127.2 387.5L125.3 400.0L123.2 412.5L120.7 425.0L118.1 437.5L115.2 450.0L112.1 462.5L108.8 475.0L105.4 487.5L101.9 500.0L98.3 512.5L94.6 525.0L90.9 537.5L87.3 550.0L83.6 562.5L80.1 575.0L76.6 587.5L73.3 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M83.8 0.0L85.7 12.5L87.7 25.0L89.7 37.5L91.9 50.0L94.2 62.5L96.5 75.0L98.9 87.5L101.3 100.0L103.7 112.5L106.1 125.0L108.5 137.5L110.8 150.0L113.1 162.5L115.3 175.0L117.4 187.5L119.4 200.0L121.2 212.5L122.9 225.0L124.4 237.5L125.8 250.0L126.9 262.5L127.7 275.0L128.4 287.5L128.8 300.0L128.9 312.5L128.8 325.0L128.4 337.5L127.8 350.0L126.9 362.5L125.7 375.0L124.3 387.5L122.6 400.0L120.7 412.5L118.5 425.0L116.2 437.5L113.6 450.0L110.9 462.5L108.0 475.0L105.0 487.5L101.9 500.0L98.7 512.5L95.5 525.0L92.2 537.5L89.0 550.0L85.8 562.5L82.6 575.0L79.5 587.5L76.6 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M85.6 0.0L87.4 12.5L89.3 25.0L91.3 37.5L93.3 50.0L95.4 62.5L97.5 75.0L99.6 87.5L101.7 100.0L103.9 112.5L106.0 125.0L108.1 137.5L110.2 150.0L112.2 162.5L114.1 175.0L115.9 187.5L117.6 200.0L119.2 212.5L120.6 225.0L121.9 237.5L123.0 250.0L123.9 262.5L124.7 275.0L125.2 287.5L125.5 300.0L125.6 312.5L125.5 325.0L125.1 337.5L124.5 350.0L123.7 362.5L122.7 375.0L121.4 387.5L119.9 400.0L118.3 412.5L116.4 425.0L114.4 437.5L112.2 450.0L109.8 462.5L107.3 475.0L104.7 487.5L102.0 500.0L99.3 512.5L96.5 525.0L93.6 537.5L90.8 550.0L88.0 562.5L85.2 575.0L82.5 587.5L79.9 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M87.5 0.0L89.2 12.5L90.9 25.0L92.7 37.5L94.6 50.0L96.5 62.5L98.4 75.0L100.3 87.5L102.2 100.0L104.1 112.5L105.9 125.0L107.7 137.5L109.5 150.0L111.2 162.5L112.8 175.0L114.4 187.5L115.8 200.0L117.1 212.5L118.3 225.0L119.4 237.5L120.3 250.0L121.0 262.5L121.6 275.0L122.0 287.5L122.2 300.0L122.3 312.5L122.1 325.0L121.8 337.5L121.3 350.0L120.6 362.5L119.7 375.0L118.6 387.5L117.3 400.0L115.9 412.5L114.3 425.0L112.6 437.5L110.8 450.0L108.8 462.5L106.7 475.0L104.5 487.5L102.2 500.0L99.9 512.5L97.5 525.0L95.1 537.5L92.7 550.0L90.3 562.5L87.9 575.0L85.6 587.5L83.3 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M89.3 0.0L90.9 12.5L92.5 25.0L94.2 37.5L95.9 50.0L97.5 62.5L99.2 75.0L100.9 87.5L102.5 100.0L104.2 112.5L105.7 125.0L107.3 137.5L108.8 150.0L110.2 162.5L111.5 175.0L112.8 187.5L113.9 200.0L115.0 212.5L115.9 225.0L116.8 237.5L117.5 250.0L118.1 262.5L118.5 275.0L118.8 287.5L118.9 300.0L118.9 312.5L118.8 325.0L118.5 337.5L118.0 350.0L117.4 362.5L116.7 375.0L115.8 387.5L114.8 400.0L113.6 412.5L112.3 425.0L110.9 437.5L109.4 450.0L107.8 462.5L106.1 475.0L104.3 487.5L102.5 500.0L100.6 512.5L98.6 525.0L96.6 537.5L94.6 550.0L92.6 562.5L90.6 575.0L88.7 587.5L86.7 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M91.1 0.0L92.6 12.5L94.1 25.0L95.6 37.5L97.1 50.0L98.6 62.5L100.0 75.0L101.5 87.5L102.9 100.0L104.2 112.5L105.5 125.0L106.8 137.5L108.0 150.0L109.1 162.5L110.2 175.0L111.1 187.5L112.0 200.0L112.8 212.5L113.5 225.0L114.2 237.5L114.7 250.0L115.1 262.5L115.4 275.0L115.6 287.5L115.6 300.0L115.6 312.5L115.5 325.0L115.2 337.5L114.8 350.0L114.4 362.5L113.8 375.0L113.1 387.5L112.3 400.0L111.4 412.5L110.4 425.0L109.3 437.5L108.2 450.0L106.9 462.5L105.6 475.0L104.2 487.5L102.8 500.0L101.3 512.5L99.8 525.0L98.2 537.5L96.7 550.0L95.1 562.5L93.4 575.0L91.8 587.5L90.2 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M92.9 0.0L94.3 12.5L95.6 25.0L97.0 37.5L98.3 50.0L99.6 62.5L100.8 75.0L102.0 87.5L103.1 100.0L104.2 112.5L105.2 125.0L106.2 137.5L107.1 150.0L108.0 162.5L108.7 175.0L109.4 187.5L110.1 200.0L110.6 212.5L111.1 225.0L111.5 237.5L111.8 250.0L112.1 262.5L112.2 275.0L112.3 287.5L112.4 300.0L112.3 312.5L112.2 325.0L112.0 337.5L111.7 350.0L111.3 362.5L110.9 375.0L110.4 387.5L109.8 400.0L109.2 412.5L108.5 425.0L107.8 437.5L107.0 450.0L106.1 462.5L105.2 475.0L104.2 487.5L103.2 500.0L102.2 512.5L101.1 525.0L99.9 537.5L98.8 550.0L97.5 562.5L96.3 575.0L95.1 587.5L93.8 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M94.6 0.0L95.9 12.5L97.1 25.0L98.3 37.5L99.4 50.0L100.5 62.5L101.5 75.0L102.5 87.5L103.3 100.0L104.2 112.5L104.9 125.0L105.6 137.5L106.2 150.0L106.8 162.5L107.3 175.0L107.7 187.5L108.1 200.0L108.4 212.5L108.6 225.0L108.8 237.5L109.0 250.0L109.1 262.5L109.1 275.0L109.1 287.5L109.1 300.0L109.0 312.5L108.9 325.0L108.7 337.5L108.5 350.0L108.3 362.5L108.0 375.0L107.8 387.5L107.4 400.0L107.1 412.5L106.7 425.0L106.3 437.5L105.9 450.0L105.4 462.5L104.9 475.0L104.3 487.5L103.7 500.0L103.1 512.5L102.4 525.0L101.7 537.5L100.9 550.0L100.1 562.5L99.3 575.0L98.3 587.5L97.4 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M96.4 0.0L97.5 12.5L98.6 25.0L99.6 37.5L100.5 50.0L101.4 62.5L102.2 75.0L102.9 87.5L103.5 100.0L104.1 112.5L104.5 125.0L104.9 137.5L105.3 150.0L105.5 162.5L105.8 175.0L105.9 187.5L106.0 200.0L106.1 212.5L106.1 225.0L106.1 237.5L106.1 250.0L106.0 262.5L105.9 275.0L105.9 287.5L105.8 300.0L105.7 312.5L105.6 325.0L105.5 337.5L105.4 350.0L105.3 362.5L105.3 375.0L105.2 387.5L105.1 400.0L105.0 412.5L105.0 425.0L104.9 437.5L104.8 450.0L104.7 462.5L104.6 475.0L104.5 487.5L104.3 500.0L104.1 512.5L103.8 525.0L103.5 537.5L103.2 550.0L102.8 562.5L102.3 575.0L101.7 587.5L101.0 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M98.0 0.0L99.1 12.5L100.0 25.0L100.8 37.5L101.6 50.0L102.2 62.5L102.8 75.0L103.3 87.5L103.6 100.0L103.9 112.5L104.1 125.0L104.2 137.5L104.3 150.0L104.3 162.5L104.2 175.0L104.1 187.5L103.9 200.0L103.8 212.5L103.6 225.0L103.4 237.5L103.2 250.0L103.0 262.5L102.8 275.0L102.6 287.5L102.5 300.0L102.4 312.5L102.3 325.0L102.3 337.5L102.3 350.0L102.4 362.5L102.5 375.0L102.6 387.5L102.8 400.0L103.1 412.5L103.3 425.0L103.6 437.5L103.9 450.0L104.2 462.5L104.4 475.0L104.7 487.5L105.0 500.0L105.2 512.5L105.4 525.0L105.5 537.5L105.5 550.0L105.5 562.5L105.3 575.0L105.1 587.5L104.7 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M99.7 0.0L100.6 12.5L101.4 25.0L102.1 37.5L102.6 50.0L103.0 62.5L103.4 75.0L103.6 87.5L103.7 100.0L103.7 112.5L103.6 125.0L103.4 137.5L103.2 150.0L102.9 162.5L102.6 175.0L102.2 187.5L101.8 200.0L101.4 212.5L101.0 225.0L100.6 237.5L100.2 250.0L99.9 262.5L99.6 275.0L99.4 287.5L99.2 300.0L99.1 312.5L99.1 325.0L99.1 337.5L99.3 350.0L99.5 362.5L99.8 375.0L100.2 387.5L100.6 400.0L101.1 412.5L101.7 425.0L102.3 437.5L103.0 450.0L103.7 462.5L104.3 475.0L105.0 487.5L105.7 500.0L106.3 512.5L106.9 525.0L107.5 537.5L107.9 550.0L108.2 562.5L108.4 575.0L108.5 587.5L108.5 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M101.4 0.0L102.1 12.5L102.7 25.0L103.2 37.5L103.6 50.0L103.8 62.5L103.9 75.0L103.8 87.5L103.7 100.0L103.4 112.5L103.1 125.0L102.6 137.5L102.1 150.0L101.5 162.5L100.9 175.0L100.3 187.5L99.6 200.0L99.0 212.5L98.4 225.0L97.8 237.5L97.3 250.0L96.8 262.5L96.4 275.0L96.1 287.5L95.9 300.0L95.8 312.5L95.9 325.0L96.0 337.5L96.3 350.0L96.6 362.5L97.1 375.0L97.7 387.5L98.5 400.0L99.3 412.5L100.2 425.0L101.1 437.5L102.2 450.0L103.2 462.5L104.3 475.0L105.4 487.5L106.5 500.0L107.6 512.5L108.6 525.0L109.5 537.5L110.4 550.0L111.1 562.5L111.6 575.0L112.0 587.5L112.3 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M103.0 0.0L103.6 12.5L104.1 25.0L104.4 37.5L104.5 50.0L104.5 62.5L104.4 75.0L104.1 87.5L103.6 100.0L103.1 112.5L102.5 125.0L101.7 137.5L100.9 150.0L100.1 162.5L99.2 175.0L98.3 187.5L97.4 200.0L96.6 212.5L95.7 225.0L95.0 237.5L94.3 250.0L93.7 262.5L93.2 275.0L92.9 287.5L92.7 300.0L92.6 312.5L92.7 325.0L92.9 337.5L93.3 350.0L93.8 362.5L94.5 375.0L95.4 387.5L96.3 400.0L97.5 412.5L98.7 425.0L100.0 437.5L101.4 450.0L102.9 462.5L104.4 475.0L105.9 487.5L107.4 500.0L108.9 512.5L110.3 525.0L111.7 537.5L112.9 550.0L114.0 562.5L114.9 575.0L115.6 587.5L116.1 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M104.5 0.0L105.0 12.5L105.3 25.0L105.5 37.5L105.4 50.0L105.2 62.5L104.8 75.0L104.2 87.5L103.6 100.0L102.7 112.5L101.8 125.0L100.8 137.5L99.7 150.0L98.6 162.5L97.5 175.0L96.3 187.5L95.2 200.0L94.1 212.5L93.1 225.0L92.1 237.5L91.3 250.0L90.6 262.5L90.0 275.0L89.6 287.5L89.4 300.0L89.3 312.5L89.5 325.0L89.8 337.5L90.3 350.0L91.0 362.5L92.0 375.0L93.0 387.5L94.3 400.0L95.7 412.5L97.3 425.0L99.0 437.5L100.8 450.0L102.6 462.5L104.5 475.0L106.5 487.5L108.4 500.0L110.3 512.5L112.2 525.0L113.9 537.5L115.5 550.0L116.9 562.5L118.2 575.0L119.2 587.5L120.0 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M106.1 0.0L106.4 12.5L106.6 25.0L106.5 37.5L106.3 50.0L105.8 62.5L105.2 75.0L104.4 87.5L103.4 100.0L102.3 112.5L101.1 125.0L99.8 137.5L98.5 150.0L97.1 162.5L95.7 175.0L94.3 187.5L92.9 200.0L91.6 212.5L90.4 225.0L89.3 237.5L88.3 250.0L87.5 262.5L86.8 275.0L86.4 287.5L86.1 300.0L86.1 312.5L86.3 325.0L86.7 337.5L87.4 350.0L88.3 362.5L89.4 375.0L90.8 387.5L92.3 400.0L94.1 412.5L96.0 425.0L98.0 437.5L100.2 450.0L102.4 462.5L104.8 475.0L107.1 487.5L109.5 500.0L111.8 512.5L114.0 525.0L116.2 537.5L118.2 550.0L120.0 562.5L121.5 575.0L122.9 587.5L123.9 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M107.6 0.0L107.8 12.5L107.8 25.0L107.5 37.5L107.1 50.0L106.4 62.5L105.5 75.0L104.4 87.5L103.2 100.0L101.8 112.5L100.4 125.0L98.8 137.5L97.2 150.0L95.5 162.5L93.8 175.0L92.2 187.5L90.6 200.0L89.0 212.5L87.6 225.0L86.4 237.5L85.3 250.0L84.3 262.5L83.6 275.0L83.1 287.5L82.9 300.0L82.9 312.5L83.2 325.0L83.7 337.5L84.5 350.0L85.6 362.5L87.0 375.0L88.6 387.5L90.4 400.0L92.5 412.5L94.7 425.0L97.1 437.5L99.7 450.0L102.3 462.5L105.1 475.0L107.9 487.5L110.6 500.0L113.4 512.5L116.0 525.0L118.5 537.5L120.9 550.0L123.1 562.5L125.0 575.0L126.6 587.5L127.9 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M109.1 0.0L109.1 12.5L108.9 25.0L108.5 37.5L107.8 50.0L106.9 62.5L105.8 75.0L104.4 87.5L103.0 100.0L101.3 112.5L99.6 125.0L97.7 137.5L95.8 150.0L93.9 162.5L91.9 175.0L90.0 187.5L88.2 200.0L86.5 212.5L84.9 225.0L83.4 237.5L82.2 250.0L81.2 262.5L80.4 275.0L79.9 287.5L79.6 300.0L79.7 312.5L80.1 325.0L80.7 337.5L81.7 350.0L83.0 362.5L84.6 375.0L86.4 387.5L88.5 400.0L90.9 412.5L93.5 425.0L96.3 437.5L99.2 450.0L102.3 462.5L105.5 475.0L108.7 487.5L111.8 500.0L115.0 512.5L118.1 525.0L121.0 537.5L123.7 550.0L126.2 562.5L128.4 575.0L130.4 587.5L131.9 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M110.5 0.0L110.4 12.5L110.1 25.0L109.4 37.5L108.5 50.0L107.4 62.5L106.0 75.0L104.4 87.5L102.7 100.0L100.7 112.5L98.7 125.0L96.6 137.5L94.4 150.0L92.2 162.5L90.0 175.0L87.8 187.5L85.8 200.0L83.9 212.5L82.1 225.0L80.5 237.5L79.1 250.0L78.0 262.5L77.2 275.0L76.6 287.5L76.4 300.0L76.5 312.5L77.0 325.0L77.8 337.5L78.9 350.0L80.4 362.5L82.2 375.0L84.3 387.5L86.7 400.0L89.4 412.5L92.4 425.0L95.6 437.5L98.9 450.0L102.4 462.5L105.9 475.0L109.5 487.5L113.1 500.0L116.7 512.5L120.2 525.0L123.5 537.5L126.6 550.0L129.4 562.5L132.0 575.0L134.2 587.5L136.0 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M112.0 0.0L111.7 12.5L111.1 25.0L110.3 37.5L109.2 50.0L107.8 62.5L106.2 75.0L104.3 87.5L102.3 100.0L100.1 112.5L97.8 125.0L95.4 137.5L92.9 150.0L90.5 162.5L88.0 175.0L85.6 187.5L83.4 200.0L81.2 212.5L79.3 225.0L77.5 237.5L76.1 250.0L74.9 262.5L74.0 275.0L73.4 287.5L73.2 300.0L73.4 312.5L73.9 325.0L74.8 337.5L76.1 350.0L77.8 362.5L79.9 375.0L82.3 387.5L85.0 400.0L88.0 412.5L91.3 425.0L94.9 437.5L98.6 450.0L102.5 462.5L106.5 475.0L110.5 487.5L114.5 500.0L118.5 512.5L122.4 525.0L126.0 537.5L129.5 550.0L132.7 562.5L135.6 575.0L138.0 587.5L140.1 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M113.4 0.0L112.9 12.5L112.2 25.0L111.1 37.5L109.8 50.0L108.2 62.5L106.3 75.0L104.2 87.5L101.9 100.0L99.4 112.5L96.8 125.0L94.2 137.5L91.4 150.0L88.7 162.5L86.0 175.0L83.4 187.5L80.9 200.0L78.5 212.5L76.4 225.0L74.6 237.5L73.0 250.0L71.7 262.5L70.7 275.0L70.2 287.5L70.0 300.0L70.2 312.5L70.9 325.0L71.9 337.5L73.4 350.0L75.3 362.5L77.6 375.0L80.3 387.5L83.3 400.0L86.7 412.5L90.4 425.0L94.3 437.5L98.4 450.0L102.7 462.5L107.1 475.0L111.5 487.5L116.0 500.0L120.4 512.5L124.6 525.0L128.7 537.5L132.5 550.0L136.0 562.5L139.2 575.0L141.9 587.5L144.2 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M114.7 0.0L114.1 12.5L113.2 25.0L111.9 37.5L110.4 50.0L108.5 62.5L106.4 75.0L104.0 87.5L101.4 100.0L98.7 112.5L95.8 125.0L92.9 137.5L89.9 150.0L86.9 162.5L83.9 175.0L81.1 187.5L78.4 200.0L75.8 212.5L73.6 225.0L71.5 237.5L69.8 250.0L68.5 262.5L67.5 275.0L66.9 287.5L66.8 300.0L67.1 312.5L67.9 325.0L69.1 337.5L70.7 350.0L72.9 362.5L75.4 375.0L78.4 387.5L81.7 400.0L85.4 412.5L89.5 425.0L93.8 437.5L98.3 450.0L103.0 462.5L107.8 475.0L112.7 487.5L117.5 500.0L122.3 512.5L127.0 525.0L131.4 537.5L135.6 550.0L139.4 562.5L142.9 575.0L145.9 587.5L148.4 600.0'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M116.0 0.0L115.3 12.5L114.2 25.0L112.7 37.5L110.9 50.0L108.8 62.5L106.4 75.0L103.8 87.5L100.9 100.0L97.9 112.5L94.8 125.0L91.5 137.5L88.3 150.0L85.0 162.5L81.8 175.0L78.7 187.5L75.8 200.0L73.1 212.5L70.7 225.0L68.5 237.5L66.7 250.0L65.3 262.5L64.3 275.0L63.7 287.5L63.6 300.0L64.0 312.5L64.9 325.0L66.2 337.5L68.1 350.0L70.4 362.5L73.3 375.0L76.5 387.5L80.2 400.0L84.2 412.5L88.6 425.0L93.3 437.5L98.2 450.0L103.4 462.5L108.6 475.0L113.9 487.5L119.1 500.0L124.3 512.5L129.4 525.0L134.2 537.5L138.7 550.0L142.9 562.5L146.6 575.0L149.9 587.5L152.6 600.0'/%3E%3C/svg%3E") center / 100% 100% no-repeat; opacity: 0.6; pointer-events: none; }

/* Grafik ohne Kasten: weiße Karten mit weichem Schatten */
.px-hl .vis { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.px-hl .vis .net, .px-hl .vis .knot { display: none; }
.px-hl .vis .gf { padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 1.8cqw; box-shadow: 0 2.4cqw 6cqw rgba(8,62,38,0.22), 0 0.3cqw 0.9cqw rgba(8,62,38,0.08); }
.px-hl .vis .gf > .in { border-radius: 1.8cqw; }
.px-hl .vis .b-uc, .px-hl .v3 .b-kpi3 { box-shadow: 0 2.4cqw 6cqw rgba(8,62,38,0.22), 0 0.3cqw 0.9cqw rgba(8,62,38,0.08); }
.px-hl .v2 .b-dev { height: 50%; }
.px-hl .v2 .b-uc { top: 22%; }                                  /* Seitenkarte ganz über dem Gerät, keine Überdeckung */
.px-hl .v2 .b-dev .in { border-radius: 1.6cqw; }
.px-hl .agv { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.px-hl .agv .ag-g { display: none; }
.px-hl .agv .ag-l { stroke: #FFFFFF; }
.px-hl .agv .ag-n { border-color: #FFFFFF; box-shadow: 0 1.6cqw 4cqw rgba(8,62,38,0.2); }
.px-hl .agv .ag-c { box-shadow: 0 1.6cqw 4cqw rgba(8,62,38,0.24); }
.px-hl .hs-in { box-shadow: var(--hero-card); }

.px-ah .ah-card { padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.px-ah .ah-card .in { border-radius: 2.2cqw; box-shadow: var(--hero-card-w); }

/* Geisterkacheln: halbtransparent im Grünton, an Kante und Zeilenhöhe der echten Karten ausgerichtet */
.px-hl .dv .dv-card::after, .px-hl .dv .dv-uc::before, .px-hl .dv .dv-uc::after, .px-hl .v1 .b-uc::before, .px-hl .v1 .b-uc::after,
.px-hl .v2::before, .px-hl .v2::after, .px-hl .v3::before, .px-hl .v3::after, .px-hl .hs::before, .px-hl .hs::after, .px-hl .agv .ag-n::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 1.6cqw; background: var(--hero-ghost); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
.px-hl .dv .dv-card::after { left: calc(100% + 2cqw); width: 18cqw; top: 0; bottom: 0; }
.px-hl .dv .dv-uc::before { right: calc(100% + 2cqw); width: 20cqw; top: -0.15cqw; bottom: -0.15cqw; }
.px-hl .dv .dv-uc::after { right: calc(100% + 24cqw); width: 20cqw; top: -0.15cqw; bottom: -0.15cqw; }
.px-hl .v1 .b-uc::before { right: calc(100% + 2cqw); width: 13.5cqw; top: -0.15cqw; bottom: -0.15cqw; }
.px-hl .v1 .b-uc::after { right: calc(100% + 17.5cqw); width: 13.5cqw; top: -0.15cqw; bottom: -0.15cqw; }
.px-hl .v2::before { left: 0; width: 9.9%; top: 50%; bottom: 0; }
.px-hl .v2::after { left: 90.1%; width: 9.9%; top: 50%; bottom: 0; }      /* Gegenstück rechts neben dem Gerät */
.px-hl .v3::before, .px-hl .v3::after { top: 75.9%; height: 22.9%; width: 21.5%; }
.px-hl .v3::before { left: 49%; }
.px-hl .v3::after { left: 72%; }
.px-hl .hs { width: 84%; }                                       /* Platz für die Geisterkacheln innerhalb der Spalte */
.px-hl .hs::before, .px-hl .hs::after { left: calc(100% + 16px); width: calc(19.05% - 16px); height: calc(50% - 8px); border-radius: 12px; }
.px-hl .hs::before { top: 0; }
.px-hl .hs::after { bottom: 0; }
.px-hl .agv .ag-n::after { left: calc(100% + 17.65%); width: 29.4%; top: -1px; bottom: -1px; border-radius: 1.4cqw; }


/* Bereichsseiten wie SAP Personal-, Finanz-, Lieferketten-, CX- und Ausgabenmanagement (hero_ergebnis.py): links Kontextkarte, rechts
   Ergebnis zur Eingabezeile, gestrichelte Linien; Kartentyp, Höhe und Linienführung wechseln je Bereich */
.px-stage.pop { container-type: inline-size; }
.px-stage.pop .px-ucard[style] { top: var(--t); }
.px-res { position: absolute; left: 73%; top: var(--t, 4%); width: 27%; z-index: 3; display: grid; gap: 2.6cqw; text-align: left; }
.px-res > * { position: relative; }
.px-res > * + *::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 1.5px); height: 2.6cqw; border-left: 2px dashed var(--emerald); }
.px-res .rc, .px-res .ra, .px-res .bb, .px-ucard.pl > div { border: 1.5px solid transparent; border-radius: max(10px, 1.3cqw); box-shadow: 0 18px 40px rgba(10,77,51,0.12);
  background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(120deg, #8FCB4A 0%, #C3E59A 55%, #E8F4DC 100%) border-box; }
.px-res .rc { display: grid; gap: max(5px, 0.6cqw); padding: max(10px, 1.25cqw) max(11px, 1.4cqw); font: max(11px, 1.2cqw)/1.3 var(--ui); color: var(--ink); }
.px-res .rc b { font: 600 max(12px, 1.3cqw)/1.3 var(--font); margin-bottom: max(2px, 0.3cqw); }
.px-res .r { display: flex; justify-content: space-between; align-items: baseline; gap: max(8px, 0.9cqw); padding: max(5px, 0.55cqw) max(8px, 0.85cqw); border-radius: max(6px, 0.7cqw); background: #F4F7F2; }
.px-res .r em, .px-res dd, .px-res .br em { font-style: normal; color: var(--emerald); font-weight: 600; text-align: right; }
.px-res .ra { display: flex; align-items: center; gap: max(8px, 1cqw); padding: max(8px, 0.9cqw) max(11px, 1.4cqw); font: 600 max(12px, 1.25cqw)/1.25 var(--font); color: var(--ink); }
.px-res .px-ic { flex: none; }
/* Zusammenfassung mit Nummern und Link */
.px-res .sm .mt, .px-res .hd small { color: var(--slate); margin-top: max(-4px, -0.5cqw); }
.px-res .sm ol { margin: 0; padding-left: 1.25em; display: grid; gap: max(3px, 0.35cqw); color: var(--emerald); }
.px-res .sm .lb { font-weight: 600; margin-top: max(2px, 0.3cqw); }
.px-res .sm .nx { color: var(--emerald); }
.px-res .sm .lk { justify-self: start; margin-top: max(3px, 0.4cqw); padding: max(4px, 0.45cqw) max(9px, 0.9cqw); border: 1px solid var(--emerald); border-radius: max(6px, 0.6cqw); color: var(--emerald); font-weight: 600; }
/* Folgefrage und Antwort mit Platzhalterzeilen */
.px-res .bb { padding: max(10px, 1.2cqw) max(12px, 1.4cqw); font: 500 max(12px, 1.3cqw)/1.3 var(--ui); color: var(--ink); margin-right: 8%; }
.px-res .tx p { margin: 0; color: var(--slate); }
.px-res .sk { display: block; height: max(6px, 0.65cqw); border-radius: 99px; background: #E9F0E4; }
.px-res .sk.s { width: 62%; }
/* Detail mit Status */
.px-res .hd { display: flex; align-items: flex-start; gap: max(8px, 0.9cqw); }
.px-res .hd > span:not(.px-ic) { display: grid; min-width: 0; }
.px-res .hd b { margin: 0; }
.px-res .hd .px-ic { width: max(28px, 3cqw); height: max(28px, 3cqw); }
.px-res .hd .px-ic .i { width: 60%; height: 60%; }
.px-res .tag { margin-left: auto; flex: none; padding: max(2px, 0.25cqw) max(7px, 0.7cqw); border-radius: 99px; background: var(--lime-soft); color: var(--emerald); font: 600 max(10px, 1cqw)/1.4 var(--ui); font-style: normal; }
.px-res dl { margin: max(2px, 0.3cqw) 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: max(4px, 0.45cqw) max(10px, 1.2cqw); }
.px-res dt { color: var(--slate); }
.px-res dd { margin: 0; }
/* Balken */
.px-res .br { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: max(3px, 0.35cqw) max(8px, 0.9cqw); }
.px-res .tr { grid-column: 1 / -1; display: block; height: max(6px, 0.65cqw); border-radius: 99px; background: #EEF3EA; overflow: hidden; }
.px-res .tr i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #77C200, #0E7A4A); }
/* linke Karten: Hinweis, Diagramme, einzelne Schritte */
.px-ucard.al { display: grid; gap: 6px; padding: 18px 20px; }
.px-ucard.al .wn { width: 22px; height: 22px; color: #B45309; }
.px-ucard.al b { font: 600 17px/1.25 var(--font); color: var(--ink); }
.px-ucard.al p { margin: 0; font: 14px/1.4 var(--ui); color: var(--slate); }
.px-ucard.ch { display: grid; gap: 12px; padding: 18px 20px; }
.px-ucard.ch > b { font: 600 15.5px/1.3 var(--font); color: var(--ink); }
.px-ucard.ch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font: 13.5px/1.3 var(--ui); color: var(--slate); }
.px-ucard.ch li i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; }
.px-ucard .dc { display: flex; align-items: center; gap: 18px; }
.px-ucard .dn { flex: none; width: 84px; aspect-ratio: 1; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); mask: radial-gradient(circle, transparent 52%, #000 53%); }
.px-ucard .cl { display: flex; align-items: stretch; gap: 14px; height: 96px; padding: 0 4px; }
.px-ucard .cl > span { flex: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 4px; }
.px-ucard .cl i { align-self: end; width: 100%; max-width: 30px; background: #CFE6B5; border-radius: 4px 4px 0 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.px-ucard .cl em { display: block; background: var(--emerald); }
.px-ucard .cl s { text-decoration: none; font: 12.5px/1 var(--ui); color: var(--slate); }
.px-ucard.ch > ul:last-child { grid-auto-flow: column; justify-content: start; gap: 16px; }
.px-ucard.pl { padding: 0; border: 0; background: none; box-shadow: none; gap: 12px; }
.px-ucard.pl > div { padding: 10px 14px 10px 10px; gap: 12px; }
.px-ucard.pl .px-ic { width: 30px; height: 30px; }
.px-ucard.pl .px-ic .i { width: 17px; height: 17px; }
.px-ln { position: absolute; z-index: 2; border: 0 dashed var(--emerald); pointer-events: none; }
.px-ln.l { left: 4.5%; top: 59%; width: 15.5%; height: 22%; border-left-width: 2px; border-bottom-width: 2px; border-bottom-left-radius: 6px; }
.px-ln.r { left: 80%; top: 61%; width: 6.5%; height: 20%; border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: 6px; }
.px-ln.t { left: 68%; width: 5%; height: 10%; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }

@media (max-width: 820px) {
  .px-stage.pop .px-ucard[style] { top: auto; }
  .px-res { position: relative; left: auto; top: auto; width: 100%; gap: 14px; }
  .px-res .rc { gap: 8px; padding: 14px 16px; font-size: 14px; border-radius: 16px; }
  .px-res .rc b { font-size: 15px; }
  .px-res .r { padding: 8px 10px; gap: 10px; border-radius: 8px; }
  .px-res .ra, .px-res .bb { gap: 12px; padding: 12px 16px; font-size: 14.5px; border-radius: 16px; }
  .px-res .bb { margin-right: 0; }
  .px-res .tag { font-size: 12px; }
  .px-res > * + *::before, .px-ln { display: none; }
  .px-hl { background: linear-gradient(180deg, rgba(255,255,255,0) calc(100% - 64px), rgba(255,255,255,0.6) calc(100% - 24px), #FFFFFF 100%), var(--hero-grad-m); }
  .px-hl .wrap::before { grid-column: 1; grid-row: 2; left: 20%; width: 60%; top: -60px; bottom: -120px; }
  .px-hl .vis.dv { padding: 0; grid-template-columns: minmax(0, 1fr); }
  .px-hl .dv .dv-hd { flex-wrap: wrap; white-space: normal; }
  .px-hl .dv .dv-r { grid-template-columns: minmax(0, 1.15fr) 40px minmax(0, 1fr); }
  .px-hl .dv .dv-r span { hyphens: manual; overflow-wrap: normal; }
  .px-hl .dv .dv-card::after, .px-hl .dv .dv-uc::before, .px-hl .dv .dv-uc::after, .px-hl .hs::before, .px-hl .hs::after { display: none; }
  .px-hl .hs { width: auto; }
  .px-hl .vis .gf, .px-hl .vis.dv .b-uc { box-shadow: var(--hero-card); }
  .px-ah .ah-card { padding: 0; border-radius: 12px; }
  .px-ah .ah-card .in { border-radius: 12px; }
}