@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; }
.cal .r.th { display: grid; gap: 1px; justify-content: start; }
.cal .r.th span:last-child { font-size: 12px; }
.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; }

.st {
  
  --white: #FFFFFF;
  --black: #0A0A0A;
  --ink: #10241A;
  --muted: #5B6B62;
  --line: #DFE6DE;
  --green: #77C200;
  --green-deep: #0E7A4A;
  --green-soft: #EEF7E4;
  --green-tint: #F5FAEF;
  --font: "Hanken Grotesk", -apple-system, system-ui, sans-serif;
 position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 16px; overflow: hidden; container-type: inline-size; background: var(--green-tint); isolation: isolate; color: var(--ink); font-family: var(--font); }
.st .scene { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; line-height: normal; }
.st .abs { position: absolute; }
.st .wash { background: radial-gradient(55cqw 35cqw at 0% 0%, #E2F1D2, transparent 70%), radial-gradient(55cqw 35cqw at 100% 100%, #E2F1D2, transparent 70%), #F6FAF5; }
.st .cam { position: absolute; inset: 0; }
.st .panel, .st .mainp { background: var(--white); border-radius: 1.4cqw; box-shadow: 0 0.6cqw 2.6cqw rgba(10,77,51,0.08); }
.st .chip-s { font-size: 0.85cqw; font-weight: 600; padding: 0.45cqw 0.9cqw; border-radius: 0.5cqw; background: #F1F3EF; color: var(--muted); }
.st .chip-s.on { background: var(--green); color: var(--white); }
.st .sk { display: block; height: 0.65cqw; border-radius: 1cqw; background: #E8ECE6; }
.st .upill { background: var(--green); color: var(--white); font-size: 1.05cqw; font-weight: 600; padding: 0.75cqw 1.3cqw; border-radius: 0.7cqw; white-space: nowrap; transform-origin: 0 50%; }
.st .pbar { background: var(--white); border: 0.12cqw solid #B9DDBB; border-radius: 1cqw; box-shadow: 0 0 0 0.35cqw rgba(76, 175, 80, 0.08), 0 0.6cqw 2cqw rgba(10,77,51,0.1); }
.st .pbar .entry { position: absolute; left: 1.4cqw; top: 1.3cqw; font-size: 1.15cqw; color: var(--ink); white-space: nowrap; }
.st .pbar .caret { display: inline-block; width: 0.12cqw; height: 1.3cqw; background: var(--green-deep); vertical-align: -0.2cqw; margin-left: 0.1cqw; }
.st .pbar .hint { position: absolute; left: 1.4cqw; top: 1.1cqw; font-size: 0.95cqw; color: #9C9B94; white-space: nowrap; font-style: italic; }
.st .pbar .tl { position: absolute; left: 1.3cqw; bottom: 1cqw; display: flex; gap: 1cqw; color: var(--green-deep); font-weight: 700; font-size: 1.2cqw; line-height: 1; }
.st .pbar .snd { position: absolute; right: 1.2cqw; bottom: 0.9cqw; width: 1.6cqw; height: 1.6cqw; }
.st .fine { font-size: 0.75cqw; color: #A3A29B; white-space: nowrap; transform: translateX(-50%); }
.st /* Szene A: Tagesüberblick aus allen Bereichen */
.sA-root { position: absolute; inset: 0; transform-origin: 50% 45%; }
.st .ptitle { left: 12cqw; top: 11.2cqw; display: flex; align-items: center; gap: 1cqw; font-size: 1.45cqw; font-weight: 700; }
.st .drow { left: 12cqw; width: 70cqw; height: 5.4cqw; display: grid; grid-template-columns: 9cqw minmax(0, 1fr) 7cqw; gap: 1.4cqw; align-items: center; border-bottom: 1px solid var(--line); font-size: 1.05cqw; }
.st .drow small { display: block; color: var(--muted); font-size: 0.8cqw; margin-top: 0.2cqw; }
.st .mod { justify-self: start; font-size: 0.8cqw; font-weight: 700; padding: 0.35cqw 0.8cqw; border-radius: 0.5cqw; white-space: nowrap; }
.st .m-sek { background: var(--black); color: var(--white); }
.st .m-std { background: var(--green-deep); color: var(--white); }
.st .m-elt { background: #CFE7D0; color: var(--ink); }
.st .m-unt { background: var(--green-soft); color: var(--green-deep); border: 1px solid #BFDDC0; }
.st .act { justify-self: end; font-size: 0.85cqw; font-weight: 700; padding: 0.45cqw 0.9cqw; border-radius: 0.5cqw; border: 1px solid var(--black); }
.st .act.go { background: var(--green); color: var(--white); border-color: var(--green); }
.st .act.ok { border: 0; color: var(--green-deep); }
.st /* Szene C/D: Seitenleiste, .st Bereich „Heute“ */
.rail { left: 6cqw; top: 5cqw; width: 7.4cqw; height: 46cqw; border-radius: 3cqw; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 0.7cqw rgba(214, 236, 213, 0.75), 0 1cqw 3cqw rgba(10,77,51,0.12); }
.st .ri { left: 8.5cqw; width: 2.4cqw; height: 2.4cqw; display: grid; place-items: center; border-radius: 0.7cqw; }
.st .ri img { width: 2.6cqw; height: 2.6cqw; max-width: none; border-radius: 0.5cqw; }
.st .ri svg { width: 1.8cqw; height: 1.8cqw; }
.st .ri.lit { background: var(--green-soft); }
.st .rtip { left: 9.7cqw; top: 19.9cqw; height: 3cqw; display: flex; align-items: center; gap: 1.2cqw; background: var(--green-soft); padding: 0 1.4cqw 0 2.6cqw; border-radius: 0.6cqw; font-size: 1.05cqw; font-weight: 600; color: var(--green-deep); white-space: nowrap; }
.st .rtip i { font-style: normal; font-weight: 700; }
.st .card { background: var(--white); border-radius: 1cqw; box-shadow: 0 0.3cqw 1.4cqw rgba(10,77,51,0.09); padding: 1.3cqw; font-size: 0.85cqw; color: var(--ink); display: grid; align-content: start; gap: 0.7cqw; }
.st .card h4 { margin: 0; font-size: 1.05cqw; font-weight: 700; display: flex; align-items: center; gap: 0.7cqw; }
.st .card .muted { color: var(--muted); font-size: 0.75cqw; }
.st .card .li { display: flex; align-items: center; gap: 0.6cqw; }
.st .card .dot { width: 1.2cqw; height: 1.2cqw; border-radius: 0.35cqw; background: var(--green-soft); flex: none; }
.st .card .per { display: grid; grid-template-columns: 3.4cqw 1fr; gap: 0.6cqw; align-items: center; }
.st .card .per span:last-child { height: 2cqw; border-radius: 0.4cqw; background: #EEF1EC; display: flex; align-items: center; padding: 0 0.7cqw; font-size: 0.75cqw; }
.st .card .per.hot span:last-child { background: var(--green); color: var(--white); font-weight: 700; }
.st .bars { display: flex; align-items: flex-end; gap: 0.6cqw; height: 7cqw; }
.st .bars i { flex: 1; border-radius: 0.3cqw 0.3cqw 0 0; background: #CFE7D0; }
.st .bars i.hi { background: var(--green-deep); }
.st /* Szene E: Nahaufnahme Eingabe */
.sliver { left: 0; top: 0; bottom: 0; width: 6cqw; background: linear-gradient(90deg, #EEF6ED, #F9FBF8); border-right: 1px solid var(--line); }
.st .big { left: 12cqw; top: 12cqw; width: 112cqw; height: 22cqw; background: var(--white); border-radius: 3cqw; border: 0.22cqw solid #CFE7D0; box-shadow: 0 1.4cqw 4cqw rgba(10,77,51,0.1); }
.st .big .hint { position: absolute; left: 4.4cqw; top: 3.8cqw; font-size: 4.4cqw; font-style: italic; color: #8E8D86; white-space: nowrap; }
.st .big .circ { left: 4.4cqw; top: 13cqw; width: 6.2cqw; height: 6.2cqw; border-radius: 50%; background: #F1F4EF; display: grid; place-items: center; font-size: 3.8cqw; color: var(--ink); }
.st .big .at { left: 13.4cqw; top: 13cqw; width: 6.2cqw; height: 6.2cqw; border-radius: 50%; display: grid; place-items: center; font-size: 4.2cqw; color: var(--green-deep); font-weight: 700; }
.st .big .bch { left: 21.6cqw; top: 13cqw; height: 6.2cqw; display: flex; align-items: center; gap: 1.8cqw; background: #DDEFDD; color: var(--green-deep); border-radius: 4cqw; padding: 0 3cqw; font-size: 3.8cqw; font-weight: 600; white-space: nowrap; }
.st .big .bch.on { background: #C6E5C7; }
.st .big .at.on { background: #DDEFDD; }
.st .ecap { left: 34cqw; top: 40cqw; font-size: 3.2cqw; color: #8E8D86; white-space: nowrap; }
.st /* Szene F: Assistenten-Stapel */
.fbg { position: absolute; inset: 0; background: radial-gradient(60cqw 40cqw at 20% 110%, #0E7A4A, transparent 70%), radial-gradient(70cqw 45cqw at 80% 100%, #8BC98E, transparent 70%), linear-gradient(180deg, #F7FBF6 20%, #E2F1E2); }
.st .stack { left: 40cqw; top: 0; width: 20cqw; }
.st .acard { position: absolute; left: 0; width: 20cqw; height: 10cqw; border-radius: 1cqw; background: var(--black); color: var(--white); padding: 1.6cqw 1.8cqw; display: grid; align-content: end; gap: 0.3cqw; box-shadow: 0 0.8cqw 2cqw rgba(2,20,12,0.18); }
.st .acard i, .st .flycard i { font-style: normal; color: var(--green); line-height: 1; }
.st .acard i { font-size: 1.3cqw; }
.st .acard b { font-size: 1.6cqw; font-weight: 700; line-height: 1.12; }
.st /* Szene G: gekippte Ebene wie bei SAP. Gleich große Zeilen im Raster, .st der Verwaltungs-Agent und seine vier Agenten sind Zeilen davon (Maße = GW, .st GH im Skript) */
.gbg { position: absolute; inset: 0; background: linear-gradient(180deg, #F3F8EE, #EBF4E3); }
.st .plane { left: 50cqw; top: 28.1cqw; width: 0; height: 0; transform-origin: 0 0; }
.st .ghost, .st .agent { position: absolute; width: 30cqw; height: 4.8cqw; border-radius: 1.6cqw; }
.st .ghost { background: #D9E9CB; }
.st .ghost::after { content: ""; position: absolute; left: 22%; right: 22%; top: 2cqw; height: 0.8cqw; border-radius: 1cqw; background: #C0DCA6; }
.st .tree { overflow: visible; }
.st .tree path, .st .hlines path { fill: none; stroke: var(--green-deep); stroke-dasharray: 1; stroke-dashoffset: 1; }
.st .tree path { stroke-width: 0.2; }
.st .agent { display: grid; place-items: center; background: linear-gradient(180deg, #FFFFFF, rgba(255, 255, 255, 0.9)); box-shadow: 0 0.5cqw 1.6cqw rgba(10,77,51,0.13); color: #0A4D33; font-size: 1.9cqw; font-weight: 600; white-space: nowrap; opacity: 0; }
.st .agent b { font-weight: inherit; }
.st .agent .rest { visibility: hidden; }
.st /* Flugkarte in Endgröße (44 × 22 cqw auf der Ebene); zu Beginn auf 20, .st 8 / 44 verkleinert, .st dann deckt sie die Stapelkarte genau */
.flycard { left: 28cqw; top: 17.1cqw; width: 44cqw; height: 22cqw; border-radius: 2.2cqw; background: var(--black); color: var(--white); padding: 3.52cqw 3.96cqw; display: grid; align-content: end; gap: 0.66cqw; transform-origin: 50% 50%; box-shadow: 0 1.76cqw 4.4cqw rgba(2,20,12,0.18); }
.st .flycard i { font-size: 2.86cqw; }
.st .flycard b { font-size: 3.52cqw; line-height: 1.12; }
.st /* Szene H: Schlussbild */
.hbg { position: absolute; inset: 0; background: radial-gradient(34cqw 30cqw at 30% 60%, #77C200, transparent 70%), radial-gradient(30cqw 26cqw at 18% 30%, #0A4D33, transparent 70%), radial-gradient(40cqw 30cqw at 60% 40%, #DDF0C8, transparent 70%), var(--white); }
.st .hcard { left: 20cqw; top: 15cqw; width: 22cqw; height: 22cqw; border-radius: 3cqw; background: var(--white); box-shadow: 0 0 0 0.9cqw rgba(232, 245, 233, 0.85), 0 1.6cqw 4cqw rgba(2,20,12,0.18); display: grid; place-items: center; text-align: center; padding: 2cqw; font-size: 2.3cqw; font-weight: 700; line-height: 1.15; color: var(--black); }
.st .hlines { left: 0; top: 0; width: 100cqw; height: 56.25cqw; overflow: visible; }
.st .hlines path { stroke-width: 0.18; }
.st .hico { width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 0.6cqw rgba(76, 175, 80, 0.25), 0 0.6cqw 1.6cqw rgba(2,20,12,0.12); display: grid; place-items: center; transform: translate(-50%, -50%); }
.st .hico svg { width: 2.8cqw; height: 2.8cqw; }
.st .hlab { font-size: 1.15cqw; font-weight: 600; color: var(--green-deep); white-space: nowrap; transform: translateX(-50%); }
.st /* Mauszeiger mit Lichthof */
.cursor { position: absolute; left: 0; top: 0; width: 2.4cqw; height: 2.4cqw; z-index: 5; pointer-events: none; }
.st .cursor svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0.2cqw 0.4cqw rgba(2,20,12,0.25)); position: relative; }
.st .halo { position: absolute; left: -1.8cqw; top: -1.8cqw; width: 4cqw; height: 4cqw; border-radius: 50%; background: radial-gradient(circle, rgba(76, 175, 80, 0.35), rgba(76, 175, 80, 0.12) 60%, transparent 70%); box-shadow: 0 0 0 0.15cqw rgba(76, 175, 80, 0.35); }
.st .pp { position: absolute; left: 1.4cqw; bottom: 1.4cqw; z-index: 6; width: 2.4cqw; height: 2.4cqw; min-width: 24px; min-height: 24px; border-radius: 50%; border: 1.5px solid var(--black); background: rgba(255, 255, 255, 0.85); display: grid; place-items: center; cursor: pointer; padding: 0; }
.st .pp svg { width: 50%; height: 50%; }

@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; } }