/* ==========================================================================
   M2 Digital – Design-System
   Marke: Navy #102a3f · Lime #e0ed35 (Linie S/4HANA) · Orange #e55c00 (Linie ECC)
   ========================================================================== */

/* ------------------------------------------------------------------
   Schriften lokal ausgeliefert. Kein Abruf bei Google, keine
   IP-Uebertragung des Besuchers. Quelle: Google Fonts, OFL.
   ------------------------------------------------------------------ */
/* Archivo 400 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo 400 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-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;
}

/* Archivo 500 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo 500 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-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;
}

/* Archivo 600 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo 600 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-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;
}

/* Archivo 700 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo 700 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-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;
}

/* Archivo 800 latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo 800 latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/archivo-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;
}

/* IBM Plex Mono 400 latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 400 latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-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;
}

/* IBM Plex Mono 500 latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 500 latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-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: "Conthrax";
  src: url("../fonts/conthrax-sb.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marke */
  --navy:        #102a3f;
  --navy-deep:   #0b1c2b;
  --navy-lift:   #16374f;
  --lime:        #e0ed35;
  --orange:      #e55c00;

  /* Flächen hell */
  --paper:       #f6f8f9;
  --paper-warm:  #eef2f4;
  --white:       #ffffff;

  /* Text */
  --ink:         #102a3f;
  --ink-2:       #3c5468;
  --ink-3:       #5a7286;   /* 5,0:1 auf Weiss (vorher #647d92 = 4,29:1) */
  --on-dark:     #ffffff;
  --on-dark-2:   #b9cbd8;
  --on-dark-3:   #7f9aad;

  /* Linien */
  --rule:        #dde4e9;        /* nur Trennlinien, darf blass sein */
  --rule-dark:   #23445c;
  --rule-ui:     #8fa3b2;        /* Raender von Bedienelementen, 3,0:1 auf Weiss */
  --rule-ui-dark:#54748c;        /* dito auf Navy */

  /* Akzent der aktuellen Produktlinie – je Seite überschrieben */
  --accent:      var(--lime);
  --accent-ink:  #4a5600;          /* Lime als Text nur in dieser Abdunklung */
  --accent-on:   #102a3f;          /* Textfarbe auf Akzentfläche */
  --lime-tief:   #cfe01f;          /* Limette eine Spur satter, fuer Ueberfahren */
  --accent-hover:var(--lime-tief);

  /* Typo-Skala */
  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.09rem);
  --step-1:  clamp(1.18rem, 1.1rem + .35vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.28rem + .8vw, 2rem);
  --step-3:  clamp(1.85rem, 1.5rem + 1.6vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.6rem + 3.2vw, 4.4rem);

  --hdr-h: 5.25rem;
  --shell: 78rem;
  --gap: clamp(1.1rem, .8rem + 1vw, 1.75rem);
  --sec-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  --shadow-1: 0 1px 2px rgba(16,42,63,.05), 0 6px 18px -12px rgba(16,42,63,.22);
  --shadow-2: 0 2px 6px rgba(16,42,63,.07), 0 24px 56px -28px rgba(16,42,63,.4);
}

/* Produktlinien-Akzente */
.line-ecc {
  --accent: var(--orange);
  --accent-ink: #a63f00;
  --accent-on: #ffffff;
  --accent-solid: #c24e00;   /* Flaeche hinter weisser Schrift: 4,6:1 statt 3,58:1 */
  --accent-hover: #a63f00;
}
:root { --accent-solid: var(--accent); }

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* Fokus: Navy auf hell (11,5:1 auf Lime, 4,1:1 auf Orange), Lime auf dunkel.
   Bewusst NICHT an die Produktlinie gekoppelt - sonst verschwindet der Ring auf hellem Grund. */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 3px;
}
:is(.sec--dark, .sec--deep, .hero, .hdr, .ftr, .cta) :focus-visible {
  outline-color: var(--lime);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: .8rem 1.2rem; font-weight: 600;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------------------------------------------------------------- Bausteine */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: clamp(1.1rem, .6rem + 2vw, 2.5rem); }

.eyebrow {
  font-family: Conthrax, Archivo, sans-serif;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.eyebrow::before {
  content: "";
  width: 1.6rem; height: 2px;
  background: var(--accent);
  flex: none;
}
.on-dark .eyebrow, :is(.sec--dark,.sec--deep,.hero,.cta) .eyebrow { color: var(--on-dark-2); }

h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.028em; font-weight: 800; text-wrap: balance; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -.018em; font-weight: 700; }

p { margin: 0 0 1rem; }
.lead { font-size: var(--step-1); line-height: 1.6; color: var(--ink-2); max-width: 58ch; font-weight: 400; }
:is(.sec--dark,.sec--deep) .lead, .on-dark .lead { color: var(--on-dark-2); }
.measure { max-width: 62ch; }

code, .mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
}
code { background: var(--paper-warm); padding: .12em .38em; border-radius: 3px; }
:is(.sec--dark,.sec--deep) code { background: rgba(255,255,255,.1); color: var(--on-dark); }

/* ---------------------------------------------------------------- Sektionen */
.sec { padding-block: var(--sec-y); }
.sec--paper { background: var(--paper); }
.sec--dark { background: var(--navy); color: var(--on-dark); }
.sec--deep { background: var(--navy-deep); color: var(--on-dark); }
.sec-head { max-width: 46rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; font-size: .96rem; line-height: 1;
  padding: .95rem 1.6rem; border-radius: 4px;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--accent-solid); color: var(--accent-on); border-color: var(--accent-solid); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-on); }
.btn--ghost { border-color: var(--rule-ui); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
:is(.sec--dark,.sec--deep,.cta,.preftr,.ftr) .btn--ghost, .hero .btn--ghost { border-color: var(--rule-ui-dark); color: #fff; }
:is(.sec--dark,.sec--deep,.cta,.preftr,.ftr) .btn--ghost:hover, .hero .btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; text-decoration: none; color: var(--ink);
  border-bottom: 2px solid var(--accent); padding-bottom: .18rem;
}
:is(.sec--dark,.sec--deep) .arrow-link { color: #fff; }
.arrow-link:hover { gap: .85rem; }
.arrow-link span { transition: transform .18s ease; }

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; background: var(--navy); color: var(--on-dark); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Bildausschnitt nach oben verschoben, damit der Monitor im Video tiefer sitzt
     und nicht hinter der Ueberschrift liegt. */
  object-position: 50% 42%;
}
@media (max-width: 64rem) { .hero__media video, .hero__media img { object-position: 62% 45%; } }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* oben: Schleier fuer die Kopfzeile, laeuft weich ins Bild aus */
    linear-gradient(to bottom, rgba(8,20,31,.95) 0, rgba(8,20,31,.84) 5rem, rgba(8,20,31,.45) 11rem, rgba(8,20,31,0) 19rem),
    /* unten: Uebergang in den folgenden Abschnitt */
    linear-gradient(to bottom, rgba(16,42,63,0) 45%, rgba(11,28,43,.75) 82%, var(--navy-deep) 100%),
    /* seitlich: Textlesbarkeit links, Bild bleibt rechts sichtbar */
    linear-gradient(100deg, var(--navy) 0%, rgba(16,42,63,.9) 34%, rgba(16,42,63,.5) 68%, rgba(16,42,63,.28) 100%);
}

/* Startseiten-Hero fuellt das Fenster; svh beachtet die Browserleiste auf Telefonen */
.hero--full { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.hero--full .hero__in { width: 100%; padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.hero__in { position: relative; z-index: 1; padding-block: clamp(4.5rem, 3rem + 9vw, 9rem); }
.hero h1 { max-width: 17ch; }
.hero .lead { margin-top: 1.5rem; color: var(--on-dark-2); }

/* Passermarken – Cockpit-Motiv */
.crop { position: relative; }
.crop::before, .crop::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.crop::before { top: -1px; left: -1px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.crop::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }

/* ---------------------------------------------------------------- Raster */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 44rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 66rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 62rem) { .split { grid-template-columns: 1fr 1fr; } .split--wide { grid-template-columns: 5fr 7fr; } }

/* ---------------------------------------------------------------- Karten */
.card {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 8px; padding: 1.6rem 1.5rem;
}
.sec--paper .card { background: #fff; }
:is(.sec--dark,.sec--deep) .card { background: var(--navy-lift); border-color: var(--rule-dark); }
.card__ico { width: 2rem; height: 2rem; margin-bottom: 1rem; }
.card h3 { margin-bottom: .5rem; }
.card p { margin: 0; font-size: .95rem; color: var(--ink-2); }
:is(.sec--dark,.sec--deep) .card p { color: var(--on-dark-2); }

/* ---------------------------------------------------------------- Vorher/Nachher */
.compare { display: grid; gap: var(--gap); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 54rem) { .compare { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.compare__label {
  font-family: Conthrax, Archivo, sans-serif; font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 1rem;
}
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 26rem) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tiles div { overflow-wrap: anywhere; hyphens: auto;
  border: 1px dashed var(--rule-dark); border-radius: 5px;
  padding: .9rem .7rem; font-size: .78rem; color: var(--on-dark-2);
  text-align: center; min-height: 4.2rem; display: flex; align-items: center; justify-content: center;
  line-height: 1.35;
}
.compare__arrow { color: var(--accent); font-size: 1.6rem; text-align: center; font-weight: 700; }
.onewin {
  border: 2px solid var(--accent); border-radius: 6px; background: var(--navy-lift);
  padding: 1.4rem 1.2rem; min-height: 100%;
}
.onewin ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.onewin li { font-size: .86rem; color: #fff; display: flex; align-items: center; gap: .6rem; }
.onewin li::before { content: ""; width: .4rem; height: .4rem; background: var(--accent); border-radius: 50%; flex: none; }

/* ---------------------------------------------------------------- Zahlen */
.stats { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; grid-template-columns: repeat(2, 1fr); }
:is(.sec--dark,.sec--deep) .stats { background: var(--rule-dark); border-color: var(--rule-dark); }
.stats > div { background: #fff; padding: 1.6rem 1.4rem; }
:is(.sec--dark,.sec--deep) .stats > div, .sec--deep .stats > div { background: var(--navy); }
.stats dt { font-family: Conthrax, Archivo, sans-serif; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .7rem; }
:is(.sec--dark,.sec--deep) .stats dt { color: var(--on-dark-3); }
.stats dd { margin: 0; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.stats .u { display: block; font-size: .82rem; font-weight: 400; color: var(--ink-3); margin-top: .55rem; line-height: 1.5; letter-spacing: 0; }
:is(.sec--dark,.sec--deep) .stats .u { color: var(--on-dark-3); }

/* ---------------------------------------------------------------- Medien */
.shot { border-radius: 8px; overflow: hidden; border: 1px solid var(--rule); background: var(--paper); box-shadow: var(--shadow-2); }
:is(.sec--dark,.sec--deep) .shot { border-color: var(--rule-dark); }
.shot figcaption { padding: .9rem 1.1rem; font-size: .85rem; color: var(--ink-3); background: #fff; border-top: 1px solid var(--rule); }
:is(.sec--dark,.sec--deep) .shot figcaption { background: var(--navy-lift); color: var(--on-dark-2); border-color: var(--rule-dark); }

/* Video mit Klick-zum-Laden */
.vid { position: relative; border-radius: 8px; overflow: hidden; background: var(--navy-deep); aspect-ratio: 16 / 9; }
.vid img, .vid video { width: 100%; height: 100%; object-fit: cover; }
.vid__btn {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(11,28,43,.42); border: 0; cursor: pointer; color: #fff; padding: 0;
  transition: background-color .2s ease;
}
.vid__btn:hover { background: rgba(11,28,43,.2); }
.vid__btn span {
  width: 4.2rem; height: 4.2rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-on);
  display: grid; place-items: center; font-size: 1.1rem; padding-left: .25rem;
  box-shadow: 0 8px 30px -8px rgba(0,0,0,.6);
}
.vid[data-playing="true"] .vid__btn { display: none; }
.vid__cap { font-size: .85rem; color: var(--ink-3); margin-top: .8rem; }
:is(.sec--dark,.sec--deep) .vid__cap { color: var(--on-dark-3); }

/* ---------------------------------------------------------------- Tabelle */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 8px; background: #fff; }
:is(.sec--dark,.sec--deep) .tbl-wrap { border-color: var(--rule-dark); background: var(--navy); }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .92rem; }
th, td { text-align: left; padding: .85rem 1.1rem; border-bottom: 1px solid var(--rule); }
:is(.sec--dark,.sec--deep) th, :is(.sec--dark,.sec--deep) td, .sec--deep th, .sec--deep td { border-color: var(--rule-dark); }
thead th { background: var(--paper); font-family: Conthrax, Archivo, sans-serif; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
:is(.sec--dark,.sec--deep) thead th { background: var(--navy-lift); color: var(--on-dark-2); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--rule); max-width: 52rem; }
:is(.sec--dark,.sec--deep) .faq { border-color: var(--rule-dark); }
.faq details { border-bottom: 1px solid var(--rule); }
:is(.sec--dark,.sec--deep) .faq details { border-color: var(--rule-dark); }
.faq summary { cursor: pointer; padding: 1.35rem 2.5rem 1.35rem 0; font-weight: 700; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .4rem; top: 1.75rem;
  width: .8rem; height: .8rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.95rem; }
.faq .a { padding: 0 0 1.4rem; color: var(--ink-2); max-width: 58ch; margin: 0; }
:is(.sec--dark,.sec--deep) .faq .a { color: var(--on-dark-2); }

/* ---------------------------------------------------------------- Produktwahl */
.picker { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.picker__card { border: 1px solid var(--rule); border-radius: 10px; padding: 2rem 1.8rem; background: #fff; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.picker__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; }
.picker__card--s4::before { background: var(--lime); }
.picker__card--ecc::before { background: var(--orange); }
.picker__sys { font-family: Conthrax, Archivo, sans-serif; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .9rem; }
.picker__card h3 { margin-bottom: .6rem; }
.picker__card p { font-size: .95rem; color: var(--ink-2); flex: 1; }
.picker__card .btn { align-self: flex-start; margin-top: 1.2rem; }
.picker__here { align-self: flex-start; margin-top: 1.2rem; font-size: .85rem; font-weight: 600; color: var(--ink-3); border: 1px dashed var(--rule); padding: .7rem 1.2rem; border-radius: 4px; }

/* ---------------------------------------------------------------- Aufzählung */
.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: .95rem; }
.ticks li { position: relative; padding-left: 1.9rem; color: var(--ink-2); }
:is(.sec--dark,.sec--deep) .ticks li { color: var(--on-dark-2); }
.ticks li strong { color: var(--ink); }
:is(.sec--dark,.sec--deep) .ticks li strong, .sec--deep .ticks li strong { color: #fff; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .75rem; height: .42rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------- CTA */
.cta { background: var(--navy); color: #fff; border-radius: 12px; padding: clamp(2.2rem, 1.4rem + 3vw, 4rem); text-align: center; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); }
.cta h2 { max-width: 22ch; margin-inline: auto; }
.cta p { color: var(--on-dark-2); max-width: 48ch; margin: 1.1rem auto 0; }
.cta .btn-row { justify-content: center; }

/* ---------------------------------------------------------------- Einblenden */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Markenzeichen */
.hero__brand { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.6rem; }
.hero__brand img { height: 2.5rem; width: auto; }
.hero__brand span {
  font-family: Conthrax, Archivo, sans-serif; font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--on-dark-2);
  padding-left: 1rem; border-left: 2px solid var(--accent);
}
.picker__logo {
  height: 1.6rem; width: auto; align-self: flex-start;  /* sonst streckt der Flex-Container */
  object-fit: contain; margin-bottom: 1.4rem;
}
.picker__card--ecc .picker__logo { height: 2.6rem; }

/* ---------------------------------------------------------------- Formular */
.form { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow-1); }
.form__row { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { margin: 0 0 1.15rem; }
.field label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: .45rem; color: var(--ink); }
.field abbr { color: var(--orange); text-decoration: none; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: .96rem; color: var(--ink);
  padding: .75rem .9rem; border: 1px solid var(--rule-ui); border-radius: 5px;
  background: var(--paper); transition: border-color .15s ease, background-color .15s ease;
}
.field input:focus, .field textarea:focus { background: #fff; border-color: var(--navy); }
.field textarea { resize: vertical; min-height: 7rem; }
.form__note { font-size: .82rem; color: var(--ink-3); line-height: 1.6; margin: 1.2rem 0 1.4rem; }
.form__note a { color: var(--ink-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Rueckmeldung ueber einem Formular. Auf der Kontaktseite fuellt sie das
   Skript, auf der Anmeldeseite PHP. Ohne Text nimmt sie keinen Platz ein. */
.form__status { font-size: .88rem; line-height: 1.55; margin: 0 0 1.2rem; color: var(--ink-2); }
.form__status:empty { display: none; }
.form__status--fehler {
  color: var(--ink); background: color-mix(in srgb, var(--orange) 10%, #fff);
  border-left: 3px solid var(--orange); border-radius: 3px; padding: .7rem .9rem;
}
.form__status--gut {
  color: var(--ink); background: var(--paper-warm);
  border-left: 3px solid var(--navy); border-radius: 3px; padding: .7rem .9rem;
}

/* Die Anmeldeseite hat genau eine Aufgabe. Das Formular steht deshalb allein
   und schmal in der Mitte; breiter wird es nicht lesbarer, nur leerer. */
.anmeldung { max-width: 26rem; margin-inline: auto; }
.anmeldung .form { padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }

/* 4 Kennzahlen: 2x2 statt ausgefranster 3er-Reihe; auf sehr schmal untereinander */
@media (max-width: 30rem) { .stats { grid-template-columns: 1fr; } }

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

/* ---- Kundenstimmen -------------------------------------------------------
   Zwei Zitate an derselben Stelle. Sie liegen in einer Rasterzelle
   uebereinander, die Karte ist damit so hoch wie das laengste Zitat und
   springt beim Wechsel nicht. Die Zeile mit der Herkunft sitzt unten in der
   Zelle, deshalb steht sie bei beiden Zitaten auf derselben Hoehe. */
.stimmen {
  position: relative;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 14px;
  padding: clamp(1.6rem, 1rem + 2.6vw, 3rem);
  box-shadow: var(--shadow-1);
}
.stimmen__marke {
  margin: 0 0 clamp(.8rem, 2vw, 1.4rem); color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 6vw, 4.4rem); line-height: .5; height: .5em;
}
.stimmen__bahn { display: grid; }
.js .stimmen__bahn > .stimme { grid-area: 1 / 1; }
.stimme {
  display: grid; grid-template-rows: 1fr auto; gap: clamp(1rem, 2.4vw, 1.6rem);
  margin: 0;
}
.stimme + .stimme { margin-top: 2.4rem; }        /* nur ohne Skript sichtbar */
.js .stimme + .stimme { margin-top: 0; }
.js .stimme {
  opacity: 0; transform: translateY(.5rem); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
/* Das kommende Zitat setzt spaeter ein als das gehende verschwindet, sonst
   liegen fuer einen Moment zwei Texte halbdurchsichtig uebereinander. */
.js .stimme.is-an {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .5s ease .3s, transform .5s ease .3s;
}
@media (prefers-reduced-motion: reduce) {
  .js .stimme { transition: none; }
}
.stimme blockquote {
  margin: 0; font-size: var(--step-2); line-height: 1.4; font-weight: 500;
  color: var(--ink); text-wrap: pretty;
}
.stimme figcaption {
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.stimmen__punkte {
  position: absolute; display: flex; gap: .45rem;
  right: clamp(1.6rem, 1rem + 2.6vw, 3rem); bottom: clamp(1.6rem, 1rem + 2.6vw, 3rem);
}
.stimmen__punkt {
  width: .55rem; height: .55rem; padding: 0; border: 0; border-radius: 99px;
  background: var(--rule-ui); cursor: pointer;
  transition: width .35s ease, background .35s ease;
}
.stimmen__punkt.is-an { width: 1.7rem; background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .stimmen__punkt { transition: none; }
}
/* Auf schmalen Geraeten kaeme die Punktleiste der Herkunftszeile ins Gehege. */
@media (max-width: 34rem) {
  .stimmen__punkte { position: static; margin-top: 1.4rem; }
}

/* Platzhalter – muss auffallen, damit er nicht versehentlich live geht */
.ph { position: relative; border: 2px dashed var(--orange); background: repeating-linear-gradient(135deg, rgba(229,92,0,.04) 0 12px, transparent 12px 24px); border-radius: 10px; }
.ph__flag {
  position: absolute; top: 0; left: 0; transform: translateY(-50%);
  margin-left: 1.2rem; background: var(--orange); color: #fff;
  font-family: Conthrax, Archivo, sans-serif; font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; padding: .32rem .7rem; border-radius: 3px; font-weight: 600;
}
.ph--shot { display: grid; place-items: center; min-height: clamp(14rem, 28vw, 22rem); text-align: center; padding: 2.5rem 1.5rem; color: var(--ink-3); }
.ph--shot p { margin: 0; font-size: .92rem; line-height: 1.6; max-width: 36ch; }
.ph--shot strong { display: block; color: var(--ink-2); margin-bottom: .4rem; font-size: 1rem; }

/* ---------------------------------------------------------------- Rollen */
.roles { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .roles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .roles { grid-template-columns: repeat(4, 1fr); } }
.roles > div { background: #fff; padding: 1.5rem 1.4rem; }
.roles dt { font-weight: 700; color: var(--ink); margin-bottom: .45rem; font-size: 1rem; }
.roles dd { margin: 0; font-size: .92rem; color: var(--ink-2); line-height: 1.6; }

/* W15: Browser-Standardplatzhalter liegt unter 4,5:1 */
.field ::placeholder { color: #5f6b73; opacity: 1; }

/* W3: ohne JavaScript bleibt alles sichtbar - die Animation wird erst durch .js aktiviert */
.rise { opacity: 1; transform: none; }
html.js .rise { opacity: 0; transform: translateY(14px); }
html.js .rise.in { opacity: 1; transform: none; }

/* W2: Pausenknopf fuer das Hero-Video */
.hero__pause {
  position: absolute; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.5rem);
  z-index: 2; display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(11,28,43,.72); color: #fff; border: 1px solid var(--rule-ui-dark);
  border-radius: 4px; padding: .55rem .9rem; font: inherit; font-size: .82rem; cursor: pointer;
}
.hero__pause:hover { background: var(--navy); }

/* W4: Ladehinweis im Video */
.vid__load {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(11,28,43,.55); color: #fff; font-size: .88rem; text-align: center; padding: 1rem;
}


/* ============================================================
   Nachbesserungen aus dem Endgeraete-Review
   ============================================================ */

/* 11: fehlte komplett - die Tabellen-Beschriftung stand sichtbar auf der Seite */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 3: Browser-Vorgabe margin:1em 40px hat jede Abbildung um 40px eingerueckt */
figure { margin: 0; }

/* 6: zwischen Ueberschrift und Vorspann stand 0px */
:is(h1, h2, h3, h4) + p { margin-top: 1.1rem; }

/* 5: Ankersprung landete unter der klebenden Kopfzeile */
[id] { scroll-margin-top: calc(var(--hdr-h) + 1rem); }

/* 1 + 2: Kopfzeile lief auf Telefonbreiten ueber, der Burger stand ausserhalb des Bildes.
   Der CTA steht ohnehin im mobilen Menue und im Hero. */
@media (max-width: 900px) {
  :root { --hdr-h: 4.25rem; }
  .hdr__in { gap: .75rem; min-height: var(--hdr-h); }
  .hdr__logo img { height: 2rem; }
  .hdr__nav > .hdr__cta { display: none; }
  .hdr__nav .burger {
    flex: none; min-width: 44px; min-height: 44px;
    justify-content: center; padding: .5rem;
  }
}

/* 4: im Querformat ragte das Menue unten heraus und war nicht scrollbar */
.mobile[data-open="true"] {
  max-height: calc(100svh - var(--hdr-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 10 + 13: Hero deckeln, damit der naechste Abschnitt anschneidet und die
   Knoepfe auf kleinen Telefonen im Bild bleiben */
/* Der Hero fuellt genau den ersten Bildschirm - die Akzentlinie unten
   liegt damit auf der Falzkante, nicht mitten im Bild. */
.hero--full { min-height: 100vh; min-height: 100svh; }
@media (max-height: 500px) { .hero--full { min-height: 0; } }
.hero__pause { min-height: 44px; }

/* 7: unter 16px zoomt iOS-Safari bei jedem Feldfokus hinein */
.field input, .field textarea { font-size: 1rem; }

/* 8: bei ungerader Kartenzahl fuellt die letzte Karte die Reihe,
   statt allein auf halber Breite zu stehen */
@media (min-width: 44rem) and (max-width: 65.99rem) {
  .grid--3 > :last-child:nth-child(odd) { grid-column: span 2; }
}

/* 9: Tabelle war ohne Tastatur nicht erreichbar, die erste Spalte scrollte weg */
.tbl-wrap { position: relative; }
.tbl-wrap:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.tbl-wrap th:first-child, .tbl-wrap td:first-child {
  position: sticky; left: 0; background: #fff; z-index: 1;
}
:is(.sec--dark, .sec--deep) .tbl-wrap td:first-child { background: var(--navy); }
:is(.sec--dark, .sec--deep) .tbl-wrap th:first-child { background: var(--navy-lift); }
.tbl-wrap thead th:first-child { background: var(--paper); }

/* 12: Fusszeilen- und Kontaktlinks hatten 16px Trefferhoehe */
.ftr a { display: inline-block; padding-block: .3rem; }
.ftr ul { gap: .15rem; }
.ticks a { display: inline-block; padding-block: .35rem; }

/* 3 (zweiter Teil): 1600px-Screenshots einer Desktop-Oberflaeche sind auf 273px
   unlesbar. Unter 44rem seitlich scrollbar statt geschrumpft. */
@media (max-width: 44rem) {
  .shot picture { display: block; overflow-x: auto; overscroll-behavior-x: contain; }
  .shot picture img { min-width: 46rem; max-width: none; }
  .shot figcaption::after {
    content: " 4 zum Lesen seitlich wischen";
    color: var(--ink-3);
  }
}
/* Zeilenkoepfe der Vergleichstabelle sehen aus wie Zellen, sind aber th */
.tbl-wrap tbody th { font-weight: 400; text-align: left; }

/* Akzentsatz als Klasse statt Inline-Stil: --accent-solid muss mitgesetzt werden,
   sonst loest es weiter gegen den Wert aus :root auf (war der Grund fuer den limefarbenen ECC-Button) */
.accent-fiori   { --accent: var(--lime);   --accent-solid: var(--lime); --accent-on: var(--navy); --accent-ink: #4a5600; --accent-hover: var(--lime-tief); }
.accent-desktop { --accent: var(--orange); --accent-solid: #c24e00;     --accent-on: #ffffff;     --accent-ink: #a63f00; --accent-hover: #a63f00; }

/* Fazitzeile unter einer Tabelle */
/* Laeuft ueber die volle Breite der Tabelle darueber. Die uebliche
   Lesebreite von rund 62 Zeichen wuerde den Satz mitten unter dem Kasten
   umbrechen lassen - hier gehoert er auf eine Linie mit der Tabelle. */
.lu-after {
  margin-top: 1.4rem; font-size: 1.02rem; color: var(--on-dark-2);
  max-width: none;
}

/* ==========================================================================
   Kopfzeile, zweiter Entwurf
   Logo links, Navigation mittig, Aktionen rechts.
   ========================================================================== */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  /* Oben keine Flaeche, nur ein weicher Schleier fuer die Lesbarkeit ueber dem Video.
     Die halbtransparente Fuellung davor wirkte ueber dem Bild grau. */
  background: linear-gradient(to bottom, rgba(8,20,31,.45) 0%, rgba(8,20,31,.12) 70%, rgba(8,20,31,0) 100%);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.hdr.is-scrolled {
  background: var(--navy-deep);
  border-bottom-color: rgba(255,255,255,.12);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.85);
}

.hdr__in { display: flex; align-items: center; gap: 1.5rem; min-height: var(--hdr-h); transition: min-height .25s ease; }
.hdr.is-scrolled .hdr__in { min-height: calc(var(--hdr-h) - .8rem); }

.hdr__logo { flex: none; display: block; }
.hdr__logo img { height: 2.6rem; width: auto; transition: height .25s ease; }
.hdr.is-scrolled .hdr__logo img { height: 2.2rem; }

/* Navigation fuellt die Mitte, statt rechts zu kleben */
.hdr__nav { flex: 1; display: flex; justify-content: center; align-items: center; gap: .1rem; }
.hdr__actions { flex: none; display: flex; align-items: center; gap: .35rem; }

/* Nur echte Navigationslinks - der CTA ist ausgenommen, sonst frisst diese Regel den Knopf */
.hdr__nav > a, .menu > :is(button, a) {
  position: relative; font: inherit; font-size: .94rem; font-weight: 500;
  color: var(--on-dark-2); background: none; border: 0; cursor: pointer;
  padding: .55rem .95rem; border-radius: 6px; text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  transition: color .16s ease;
}
.hdr__nav > a:hover, .menu > :is(button, a):hover { color: #fff; }

/* Feiner Akzentpunkt statt Unterstrich - ruhiger und passt zum Passermarken-Motiv */
.hdr__nav > a::after, .menu > :is(button, a)::after {
  content: ""; position: absolute; left: 50%; translate: -50% 0; bottom: .14rem;
  width: 4px; height: 4px; border-radius: 50%; background: var(--lime);
  opacity: 0; transform: scale(.4); transition: opacity .18s ease, transform .18s ease;
}
.hdr__nav > a:hover::after, .menu > :is(button, a):hover::after,
.menu[data-open="true"] > :is(button, a)::after { opacity: 1; transform: scale(1); }
.hdr__nav > a[aria-current], .menu > :is(button, a)[aria-current] { color: #fff; }
.hdr__nav > a[aria-current]::after,
.menu > :is(button, a)[aria-current]::after { opacity: 1; transform: scale(1); }
.menu__chev { transition: transform .2s ease; opacity: .65; }
.menu[data-open="true"] .menu__chev { transform: rotate(180deg); }

/* Kundenbereich - zurueckhaltend, aber auffindbar */
.hdr__login {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  font-size: .89rem; font-weight: 500; color: var(--on-dark-2); text-decoration: none;
  padding: .6rem .85rem; border-radius: 6px; transition: color .16s ease, background-color .16s ease;
}
.hdr__login:hover { color: #fff; background: rgba(255,255,255,.07); }
.hdr__login svg { opacity: .8; }

/* Sprachwechsel: dieselbe Zurueckhaltung wie der Kundenbereich, aber als
   kurze Marke, damit die Zeile neben dem Knopf nicht zu breit wird. */
.hdr__lang {
  display: inline-flex; align-items: center; font-size: .78rem; font-weight: 700;
  letter-spacing: .05em; color: var(--on-dark-2); text-decoration: none;
  padding: .5rem .55rem; border-radius: 6px;
  transition: color .16s ease, background-color .16s ease;
}
.hdr__lang:hover { color: #fff; background: rgba(255,255,255,.07); }

/* CTA als echter Knopf */
.hdr__cta.btn {
  padding: .68rem 1.2rem; font-size: .89rem; margin-left: .3rem;
  background: var(--lime); color: var(--navy); border-color: var(--lime);
}
.hdr__cta.btn:hover { background: var(--lime-tief); border-color: var(--lime-tief); color: var(--navy); transform: translateY(-1px); }
.hdr__cta.btn::after { display: none; }

/* Trennstrich zwischen Navigation und Aktionen */
.hdr__actions::before {
  content: ""; width: 1px; height: 1.5rem; background: rgba(255,255,255,.14);
  margin-right: .6rem; flex: none;
}

@media (max-width: 1100px) {
  .hdr__login span { display: none; }
  .hdr__login { padding: .6rem; }
}
@media (max-width: 900px) {
  :root { --hdr-h: 4.25rem; }
  .hdr__in { gap: .75rem; }
  .hdr__logo img, .hdr.is-scrolled .hdr__logo img { height: 2rem; }
  .hdr__nav { display: none; }
  .hdr__actions { margin-left: auto; }
  .hdr__actions::before { display: none; }
  .hdr__login { display: none; }
  .hdr__cta.btn { padding: .58rem 1rem; font-size: .84rem; }
  .burger { display: inline-flex; }
}
@media (max-width: 420px) {
  .hdr__cta { display: none; }
}

/* Aufklappmenue */
.menu { position: relative; }
.menu__panel {
  position: absolute; top: calc(100% + .6rem); left: 50%; translate: -50% 0;
  width: min(27rem, calc(100vw - 2rem));
  background: #fff; color: var(--ink);
  border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(6,18,28,.55), 0 2px 8px rgba(6,18,28,.18);
  padding: .8rem; opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.menu[data-open="true"] .menu__panel { opacity: 1; visibility: visible; transform: none; }
.menu__head {
  margin: .5rem .75rem .35rem; font-family: Conthrax, Archivo, sans-serif;
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.menu__item {
  display: flex; gap: .9rem; padding: .8rem .75rem; border-radius: 8px;
  text-decoration: none; align-items: stretch; transition: background-color .15s ease;
}
.menu__item:hover { background: var(--paper); }
.menu__bar { width: 3px; border-radius: 2px; background: var(--accent); flex: none; }
.menu__bar--muted { background: var(--rule-ui); }
.menu__body strong { display: block; font-size: .95rem; font-weight: 700; color: var(--ink); }
.menu__body > span { display: block; font-size: .84rem; color: var(--ink-2); line-height: 1.5; margin-top: .15rem; }

/* Burger, animiert zum Kreuz */
.burger {
  display: none; background: none; border: 0; cursor: pointer; padding: .5rem;
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
}
.burger__box { position: relative; display: block; width: 22px; height: 14px; }
.burger__line, .burger__box::before, .burger__box::after {
  position: absolute; left: 0; width: 100%; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease, top .22s ease;
}
.burger__line { top: 6px; }
.burger__box::before { content: ""; top: 0; }
.burger__box::after  { content: ""; top: 12px; }
.burger[aria-expanded="true"] .burger__line { opacity: 0; }
.burger[aria-expanded="true"] .burger__box::before { top: 6px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__box::after  { top: 6px; transform: rotate(-45deg); }

@media (max-width: 900px) {
  :root { --hdr-h: 4.25rem; }
  .hdr__in { gap: .75rem; }
  .hdr__logo img, .hdr.is-scrolled .hdr__logo img { height: 2rem; }
  .hdr__nav > .menu, .hdr__nav > a { display: none; }
  .burger { display: inline-flex; }
}

/* Mobiles Menue */
.mobile { display: none; background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,.09); }
.mobile[data-open="true"] {
  display: block; max-height: calc(100svh - var(--hdr-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding-block: .5rem 1.5rem;
}
.mobile__head {
  margin: 1.1rem 0 .2rem; font-family: Conthrax, Archivo, sans-serif;
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-3);
}
.mobile a {
  display: flex; align-items: center; gap: .7rem; padding: .85rem 0;
  color: var(--on-dark-2); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.mobile a:last-of-type { border-bottom: 0; }
.mobile__dot { width: .5rem; height: .5rem; border-radius: 2px; flex: none; }
.mobile__dot--fiori { background: var(--lime); }
.mobile__dot--desktop { background: var(--orange); }
.mobile__cta { margin-top: 1.2rem; justify-content: center; border-bottom: 0; }
.mobile a.btn--primary { color: var(--accent-on); }

/* ==========================================================================
   Vor-Fusszeile und Fusszeile
   ========================================================================== */
.preftr { background: var(--navy); color: #fff; padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.preftr__in { display: grid; gap: 1.8rem; align-items: center; }
@media (min-width: 52rem) { .preftr__in { grid-template-columns: 1fr auto; gap: 3rem; } }
.preftr__h { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); margin: 0; }
.preftr__p { color: var(--on-dark-2); margin: .8rem 0 0; max-width: 46ch; }
@media (min-width: 52rem) { .preftr__p { max-width: none; } }

.ftr { background: var(--navy-deep); color: var(--on-dark-2); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 1.75rem; }
.ftr__top { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .ftr__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .ftr__top { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 3rem; } }
/* Die Direktspalte traegt ab hier zwei Bloecke nebeneinander. */
@media (min-width: 68rem) {
  /* Die drei rechten Spalten nehmen genau die Breite ihres Inhalts,
     die Marke links den Rest. Nur so ist die Rinne zwischen ihnen
     auch sichtbar ueberall gleich: bei festen Anteilen bleibt in der
     kurzen Unternehmensspalte Leerraum stehen, der wie eine breitere
     Rinne aussieht. */
  /* Produkt, Unternehmen und Direkt stehen als Gruppe eng beieinander,
     die Anschrift setzt sich mit einer breiten Rinne davon ab. Weil die
     Markenspalte den Rest aufnimmt, rueckt die Gruppe dabei nach links. */
  .ftr__top { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 2rem; }
}
/* Eine Spalte kann zwei Gruppen tragen; die zweite braucht Luft. */
.ftr__top nav h3:not(:first-child) { margin-top: 1.2rem; }
.ftr h3 {
  font-family: Conthrax, Archivo, sans-serif; font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--on-dark-3); margin-bottom: .7rem; font-weight: 600;
}
.ftr ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .15rem; }
.ftr a { text-decoration: none; font-size: .93rem; display: inline-block; padding-block: .3rem; }
.ftr a:hover { color: #fff; }
.ftr__logo { height: 2.6rem; width: auto; margin-bottom: 1.2rem; }
.ftr__brand p { font-size: .92rem; line-height: 1.65; max-width: 38ch; margin: 0 0 1.3rem; }
.ftr ul.ftr__social { display: flex; gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.ftr__social a { font-size: .85rem; }

/* Der Unterstrich laeuft unter jedem Verweis im Fuss auf, nicht nur unter
   den sozialen Netzen. Unten sitzt er hoeher, dort ist weniger Luft. */
.ftr__top a, .ftr__btm a { position: relative; }
.ftr__top a::after, .ftr__btm a::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.ftr__top a::after { bottom: .35rem; }
.ftr__btm a::after { bottom: .18rem; }
.ftr__top a:hover::after, .ftr__btm a:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .ftr__top a::after, .ftr__btm a::after { transition: none; }
}

/* Die Wege zu uns stehen dicht beieinander, jeder mit seinem Zeichen. */
.ftr__wege { gap: 0; }
.ftr__wege a { display: inline-flex; align-items: center; gap: .55rem; padding-block: .3rem; }
.ftr__wege svg { width: 16px; height: 16px; flex: none; opacity: .7; }
.ftr__wege a:hover svg { opacity: 1; }
/* Der Unterstrich gehoert unter den Text, nicht unter das Zeichen. */
.ftr__wege a::after { left: 2.1rem; bottom: .18rem; }
.ftr__contact address { font-style: normal; font-size: .92rem; line-height: 1.6; margin-top: 1rem; color: var(--on-dark-3); }
.ftr__contact address strong { color: var(--on-dark-2); font-weight: 600; }
/* Ab hier ist Platz, die Anschrift neben die Wege zu stellen statt
   darunter. Beide Bloecke sind dann drei Zeilen hoch und beginnen auf
   derselben Linie; schmaler waere jede Spalte fuer sich zu eng. */
@media (min-width: 68rem) {
  /* Zwei Bloecke nebeneinander, jeder mit eigener Ueberschrift.
     minmax(0, max-content): jeder nimmt die Breite, die sein laengster
     Eintrag braucht, kann aber schrumpfen statt ueberzulaufen.
     align-content: start ist wichtig - das aussen liegende Raster zieht
     die Spalte auf die Hoehe der laengsten, und ohne start verteilen die
     beiden Zeilen diesen Ueberschuss unter sich. */
  .ftr__contact {
    display: grid; grid-template-columns: minmax(0, max-content) minmax(0, max-content);
    column-gap: 7rem; align-items: start; align-content: start;
  }
  .ftr__contact > h3 { grid-area: 1 / 1; }
  .ftr__contact > .ftr__wege { grid-area: 2 / 1; }
  .ftr__contact > .ftr__adr-h { grid-area: 1 / 2; }
  /* 2px: die Verweise daneben tragen oben etwas Innenabstand, ihr Text
     beginnt dadurch zwei Pixel tiefer als der der Anschrift. */
  .ftr__contact > address { grid-area: 2 / 2; margin-top: 0; padding-top: 2px; }
}
.ftr__btm {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.09);
  display: flex; flex-wrap: wrap; gap: .4rem 2rem; align-items: center;
  font-size: .85rem; color: var(--on-dark-3);
}
.ftr__btm a { font-size: .85rem; padding-block: .35rem; }
.ftr__claim {
  margin-left: auto; font-family: Conthrax, Archivo, sans-serif;
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lime);
}


/* Die Kopfzeile liegt ueber dem Inhalt - der erste Abschnitt jeder Seite
   braucht deshalb oben Luft, sonst rutscht er darunter. */
.hero__in { padding-top: calc(var(--hdr-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem)); }
main > .sec:first-child { padding-top: calc(var(--hdr-h) + var(--sec-y)); }

/* Mobiles Menue haengt an der festen Leiste und scrollt fuer sich */
.mobile[data-open="true"] { max-height: calc(100svh - var(--hdr-h)); }


/* Kopfzeilentext liegt ueber bewegtem Bild - ein feiner Schatten sichert die
   Lesbarkeit auch dann, wenn das Video an dieser Stelle gerade hell ist.
   Sobald die Leiste beim Scrollen deckend wird, faellt er weg. */
.hdr:not(.is-scrolled) .hdr__nav > a,
.hdr:not(.is-scrolled) .menu > :is(button, a),
.hdr:not(.is-scrolled) .hdr__login,
.hdr:not(.is-scrolled) .hdr__logo img {
  text-shadow: 0 1px 3px rgba(6,16,25,.75);
}
.hdr:not(.is-scrolled) .hdr__logo img {
  filter: drop-shadow(0 1px 3px rgba(6,16,25,.6));
  text-shadow: none;
}

/* ==========================================================================
   Team
   ========================================================================== */
.team { display: grid; gap: clamp(1.8rem, 1rem + 3vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 52rem) { .team { grid-template-columns: 18rem 1fr; } }
.team__card { margin: 0; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: #fff; }
.team__card img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.team__card figcaption { padding: 1.3rem 1.4rem; display: grid; gap: .2rem; }
.team__card strong { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.team__card figcaption > span { font-size: .88rem; color: var(--ink-3); margin-bottom: .6rem; }
.team__card figcaption a { font-size: .9rem; color: var(--ink-2); text-decoration: none; padding-block: .3rem; }
.team__card figcaption a:hover { color: var(--ink); }
.team__text p { color: var(--ink-2); max-width: 58ch; }
.team__text p:first-child { font-size: var(--step-1); line-height: 1.6; }

/* ==========================================================================
   Newsliste
   ========================================================================== */
.newslist { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .newslist { grid-template-columns: repeat(2, 1fr); } }
.newscard { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: #fff; transition: box-shadow .2s ease, transform .2s ease; }
.newscard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.newscard__link { display: block; text-decoration: none; color: inherit; height: 100%; }
.newscard img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.newscard__body { padding: 1.6rem 1.5rem 1.8rem; }
.newscard__meta {
  display: flex; gap: .9rem; align-items: center; margin: 0 0 .8rem;
  font-family: Conthrax, Archivo, sans-serif; font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.newscard__meta span { color: var(--accent-ink); }
.newscard h2 { font-size: var(--step-1); margin: 0 0 .6rem; letter-spacing: -.015em; }
.newscard__body > p { font-size: .95rem; color: var(--ink-2); margin: 0 0 1.2rem; }
.newscard .arrow-link { font-size: .9rem; }

/* ==========================================================================
   Fliesstext: Artikel und Rechtstexte
   ========================================================================== */
.prose { max-width: 44rem; }
.prose h2 { font-size: var(--step-2); margin: 2.6rem 0 .9rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--step-1); margin: 2rem 0 .7rem; font-weight: 700; }
.prose p { color: var(--ink-2); line-height: 1.75; margin: 0 0 1.1rem; }
.prose ul { margin: 0 0 1.3rem; padding-left: 1.3rem; color: var(--ink-2); }
.prose li { margin-bottom: .5rem; line-height: 1.7; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.prose a:hover { color: var(--accent-ink); }
.prose strong { color: var(--ink); }

/* Rechtstexte etwas kompakter, sie sind lang */
.prose--legal { max-width: 46rem; }
.prose--legal p { font-size: .96rem; line-height: 1.7; }
.prose--legal h2 { font-size: var(--step-1); margin-top: 2.4rem; }
.prose--legal h3 { font-size: 1.02rem; margin-top: 1.6rem; }
.prose--legal li { font-size: .96rem; }

/* Rechtstexte enthalten lange, nicht umbrechbare URLs (Google-Datenschutzlinks).
   Ohne Umbruch sprengen sie auf Telefonbreiten die Seite. */
.prose a, .prose p, .prose li { overflow-wrap: anywhere; }

/* Deutsche Komposita werden lang: "Datenschutzerklärung", "Verwendungsnachweis",
   "Produktdatenmanagement". Bei grossen Schriftgraden sprengen sie schmale Schirme.
   lang="de" ist gesetzt, die Silbentrennung greift also mit Wörterbuch. */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  hyphens: auto;
  /* Nur echte Komposita trennen. Ohne diese Grenze trennt der Browser auch
     kurze Woerter wie "Ih-rem", was in grossen Graden auffaellt. */
  -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4;
  hyphenate-limit-chars: 12 5 4;
}

/* ==========================================================================
   Blog: fortlaufendes Journal, Datum links, Text rechts
   ========================================================================== */
.blog { max-width: 62rem; }
.blog__item {
  display: grid; gap: .9rem 3rem; grid-template-columns: 1fr;
  padding: clamp(2rem, 1.4rem + 2vw, 3.2rem) 0;
  border-top: 1px solid var(--rule);
  scroll-margin-top: calc(var(--hdr-h) + 2rem);
}
.blog__item:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 48rem) { .blog__item { grid-template-columns: 11rem 1fr; } }

.blog__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: baseline; }
@media (min-width: 48rem) { .blog__meta { display: block; padding-top: .45rem; } }
.blog__meta time {
  display: block; font-family: "IBM Plex Mono", monospace; font-size: .82rem;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.blog__art {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .5rem;
  font-family: Conthrax, Archivo, sans-serif; font-size: .56rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.blog__dot { width: .45rem; height: .45rem; border-radius: 2px; background: var(--rule-ui); flex: none; }
.blog__dot--fiori { background: var(--lime); }
.blog__dot--desktop { background: var(--orange); }

.blog__body h2 { font-size: var(--step-2); margin: 0 0 1rem; letter-spacing: -.02em; }
.blog__body h2 a { text-decoration: none; color: inherit; }
.blog__body h2 a:hover { color: var(--accent-ink); }
.blog__body p { color: var(--ink-2); line-height: 1.75; max-width: 60ch; margin: 0 0 1rem; }
.blog__body p:last-child { margin-bottom: 0; }
.blog__body code { font-size: .86em; }

/* ==========================================================================
   Kopfbereich: Textur, Akzentschein, weicher Auslauf
   Motiv ist das Datenraster - dasselbe, was LeanUp auf dem Bildschirm zeigt.
   ========================================================================== */

/* Gilt fuer alle flaechigen Kopfbereiche: Produktseiten, Blog, Ueber uns,
   Kontakt und die Rechtstexte. Der Startseiten-Hero hat das Video und
   bleibt davon unberuehrt. */
.hero:not(.hero--full),
main > .sec--dark:first-child {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero:not(.hero--full)::before,
main > .sec--dark:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* weicher Schein in der Produktfarbe, oben rechts */
    radial-gradient(48rem 26rem at 82% 8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 68%),
    /* zweiter, kuehler Schein fuer Tiefe */
    radial-gradient(38rem 24rem at 12% 92%, rgba(90,150,200,.12), transparent 70%),
    /* Datenraster: senkrecht enger, waagrecht weiter - wie Spalten und Zeilen */
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 7.5rem),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.032) 0 1px, transparent 1px 3.25rem);
  /* Raster nach unten ausblenden, damit es nicht an der Kante abreisst */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.35) 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.35) 78%, transparent 100%);
}

/* Rueckfall, falls color-mix nicht unterstuetzt wird */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .hero:not(.hero--full)::before,
  main > .sec--dark:first-child::before {
    background:
      radial-gradient(38rem 24rem at 12% 92%, rgba(90,150,200,.12), transparent 70%),
      repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 7.5rem),
      repeating-linear-gradient(0deg,  rgba(255,255,255,.032) 0 1px, transparent 1px 3.25rem);
  }
}

/* Statt harter Kante: eine bewusste Linie in der Produktfarbe,
   die von links anlaeuft und nach rechts ausblendet. */
.hero::after,
main > .sec--dark:first-child::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--accent) 0,
    var(--accent) 16%,
    color-mix(in srgb, var(--accent) 35%, transparent) 38%,
    transparent 72%);
  z-index: 1;
}

/* Der folgende helle Abschnitt nimmt die Farbe noch kurz mit,
   damit der Wechsel nicht abrupt wirkt. */
.hero + .sec:not(.sec--dark):not(.sec--deep),
main > .sec--dark:first-child + .sec:not(.sec--dark):not(.sec--deep) {
  background-image: linear-gradient(to bottom, rgba(16,42,63,.055) 0, rgba(16,42,63,0) 9rem);
}

/* Passermarken um den Kopftext - greift das Cockpit-Motiv der Seite auf */
.hero__in > .eyebrow { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .hero:not(.hero--full)::before,
  main > .sec--dark:first-child::before {
    animation: heroSchein 26s ease-in-out infinite alternate;
  }
}
@keyframes heroSchein {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-1.5%, 1.2%, 0) scale(1.06); }
}

/* ==========================================================================
   Kopfbereich zweispaltig: Text links, Produkt rechts
   ========================================================================== */
/* Oben ausgerichtet statt mittig: die beiden Produktseiten haben unterschiedlich
   lange Ueberschriften, mittig gesetzt saessen die Aufnahmen dadurch auf
   verschiedenen Hoehen. So beginnen sie auf beiden Seiten gleich. */
.hero--split .hero__in { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  align-items: start; }
@media (min-width: 64rem) {
  .hero--split .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
  .hero--split .hero__text { max-width: 34rem; }
}
.hero--split h1 { max-width: 15ch; }
.hero--split .lead { max-width: 46ch; }

/* Der Rahmen ragt nach rechts aus dem Raster heraus und leicht nach unten -
   das bricht die gerade Kante zum naechsten Abschnitt auf. */
.hero__visual { position: relative; }
@media (min-width: 64rem) {
  .hero__visual { margin-right: calc(-1 * clamp(1.5rem, -2rem + 8vw, 7rem)); margin-bottom: -5rem; }
}
/* ------------------------------------------------------- Aufnahme im Notebook
   Der Rahmen ist gezeichnet, kein Bild: bleibt auf jedem Schirm scharf und
   kostet nichts an Ladezeit. Das Geraet steht im Raum - die Buehne ist leicht
   nach hinten gekippt, sodass wir von schraeg oben darauf sehen. Der Deckel
   haengt am Scharnier und klappt von flach (--offen: 0, Oberseite mit Logo
   sichtbar) auf aufrecht (--offen: 1, Bildschirm sichtbar).

   Ohne Skript steht --offen auf 1, das Geraet ist also offen. Fiele das Skript
   aus, saehe der Besucher trotzdem das Produkt. */
.laptop {
  margin: 0;
  position: relative;
  /* Flache Perspektive: der zugeklappte Deckel kommt der Kamera nahe und
     wuerde bei staerkerer Perspektive das ganze Bild ausfuellen. */
  perspective: 4200px;
  perspective-origin: 50% 34%;
  /* Platz fuer die Tastatureinheit, die perspektivisch nach unten laeuft.
     Prozente beziehen sich auf die Breite, deshalb rechnet das mit. */
  padding-bottom: 10%;
}

.laptop__buehne {
  position: relative;
  transform-style: preserve-3d;
  /* Der Blickwinkel faehrt mit: auf das geschlossene Geraet schauen wir von
     schraeg oben, damit die Deckeloberseite mit dem Logo Flaeche zeigt. Beim
     Aufklappen wandert die Kamera auf Augenhoehe. */
  transform: rotateX(calc(23deg - var(--offen, 1) * 14deg));
}

/* --------------------------------------------------------------- Der Deckel */
.laptop__deckel {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;                       /* Scharnier unten */
  /* offen = 0 Grad, zu = 89 Grad: der Deckel faellt nach vorn auf die
     Tastatureinheit. Das eine Grad Rest verhindert, dass beide exakt in
     derselben Ebene liegen und flackern. */
  transform: rotateX(calc((1 - var(--offen, 1)) * 89deg));
  will-change: transform;
}

/* Vorderseite: Rand, Kamera, Bildschirm */
.laptop__vorne {
  position: relative;
  /* Nicht vertauschen: die Drehung der Flaeche wird von der Deckeldrehung
     wieder aufgehoben, oben bleibt also oben. Runde Kante und breiterer Rand
     fuer die Kamera gehoeren an die Oberkante, die schmale Fase ans
     Scharnier unten. */
  padding: 1.15rem .6rem .95rem;
  border-radius: 16px 16px 3px 3px;
  background: linear-gradient(168deg, #44596d 0%, #223445 44%, #182634 100%);
  /* Die eigene Transformation ist noetig, damit die Rueckseitenverdeckung
     ueberhaupt greift - ohne sie zeigt der Browser die Flaeche von hinten. */
  /* Der Bildschirm sitzt auf der Rueckseite des Deckels und steht dort auf
     dem Kopf - genau wie beim echten Geraet, wenn man den zugeklappten
     Deckel von oben betrachtet. Beim Aufklappen dreht er sich mit und steht
     dann richtig. rotateX statt rotateY, weil das eine echte Drehung ist
     und nicht spiegelt. */
  transform: rotateX(180deg) translateZ(.5px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 1px 0 0 rgba(255,255,255,.09),
    inset -1px 0 0 rgba(255,255,255,.09),
    inset 0 0 0 1px rgba(0,0,0,.3),
    0 34px 64px -24px rgba(0,0,0,.9),
    0 6px 18px rgba(0,0,0,.45);
}

.laptop__schirm {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--navy-deep);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55);
}
.laptop__schirm img { display: block; width: 100%; height: auto; }

/* Lichtreflex schraeg ueber dem Glas */
.laptop__schirm::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg,
    rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 46%);
}

.laptop__kamera {
  position: absolute; left: 50%; top: .5rem; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #59708a 0%, #16232f 72%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55);
}

/* Rueckseite des Deckels: die Aussenschale mit dem Logo. Sichtbar, solange
   das Geraet zu ist - dann schauen wir von oben genau darauf. */
.laptop__ruecken {
  position: absolute; inset: 0;
  transform: translateZ(.5px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 15px 15px 3px 3px;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 30% 12%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(196deg, #3f5468 0%, #1e2e3d 52%, #16222e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.laptop__logo {
  width: 34%; height: auto; opacity: .95;
  /* Sitzt auf einer geraden Flaeche - keine Gegenrechnung noetig. */
}

/* ------------------------------------------------- Die Tastatureinheit unten
   Liegt waagerecht: um die eigene Oberkante nach vorne geklappt. Ihre Tiefe
   entspricht der Deckelhoehe, damit der geschlossene Deckel genau daraufpasst. */
.laptop__deck {
  position: absolute; left: -2.5%; right: -2.5%; top: 100%;
  height: 100%;
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #3d5265 0%, #2a3c4d 30%, #16222e 100%);
  /* Solange das Geraet zu ist, liegt der Deckel darauf - dann wuerde die
     Tastatureinheit daneben auftauchen und das Geraet doppelt so tief
     erscheinen lassen. Sie blendet deshalb mit dem Aufklappen ein. */
  opacity: clamp(0, calc(var(--offen, 1) * 2.2 - .45), 1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 40px rgba(0,0,0,.5);
}
/* Angedeutetes Trackpad - mehr braucht es in dieser Verkuerzung nicht */
.laptop__touchpad {
  position: absolute; left: 50%; top: 34%; transform: translateX(-50%);
  width: 26%; height: 30%;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}


/* ------------------------------------------------------ Zwischenstand: flach
   Nur der geschlossene Deckel, gerade von oben gesehen. Keine Perspektive,
   keine Bewegung - damit sich Form, Material und Logo in Ruhe beurteilen
   lassen. Die 3D-Fassung bleibt daneben liegen und wird spaeter zugeschaltet. */
.laptop--flach { perspective: 2400px; perspective-origin: 50% 50%; padding-bottom: 0; }

/* --kippe steuert den Blickwinkel auf das geschlossene Geraet:
   0 = senkrecht von oben (Draufsicht), 1 = flach von vorn (Horizontale).
   Gedreht wird um die Vorderkante, die dabei stehen bleibt - das Geraet legt
   sich also nach hinten weg, statt zu wandern. Ohne Skript steht --kippe auf 1,
   das Geraet liegt dann gleich in der Endlage. */
.laptop--flach .laptop__buehne {
  transform-style: preserve-3d;
  /* Achse in der Mitte, nicht an der Vorderkante: sonst kippt das Geraet wie
     ein Blatt nach hinten weg. Um die Mitte gedreht bleibt es an Ort und
     Stelle und nur der Blickwinkel aendert sich - eine Kamerafahrt. */
  transform-origin: 50% 50%;
  /* Waehrend der Drehung wandert das Geraet nach unten. Um die Mitte gedreht
     kaeme es sonst auf halber Hoehe zu liegen - so raeumt es den Platz frei,
     in den der Bildschirm spaeter aufklappt. Die Verschiebung steht vorn und
     wirkt damit auf das bereits gedrehte Bild, also senkrecht nach unten.

     Der Weg ist so bemessen, dass die Oberkante des aufgeklappten Geraets
     auf der Zeile "fuer SAP Fiori" landet - das Geraet faehrt also gleich
     an die richtige Stelle, statt hinterher zurechtgerueckt zu werden. */
  transform:
    translateY(calc(var(--kippe, 1) * 48.3%))
    rotateX(calc(var(--kippe, 1) * 90deg));
}

/* Bauhoehe: die Vorderkante steht senkrecht auf der Deckelflaeche. In der
   Draufsicht ist sie deshalb nicht zu sehen, beim Kippen kommt sie hervor -
   und in der Horizontale ist sie das Einzige, was vom Geraet uebrig bleibt.
   Genau das macht den Unterschied zwischen einem Koerper und einer Flaeche. */
/* Der App-Name unter der Nummer: die Nummer traegt die Spalte optisch,
   der Name die Bedeutung. So bleibt die Spalte so schmal und scannbar
   wie die Transaktionscodes auf der Desktop-Seite. */
.app__n {
  display: block; margin-top: .2rem;
  font-size: .84em; line-height: 1.45; color: var(--ink-3);
}
:is(.sec--dark, .sec--deep) .app__n { color: var(--on-dark-2); }

/* Nachsatz unter einer Aufzaehlung - hebt den einen Punkt heraus, der
   nicht in die Reihe gehoert, weil er darueber hinausgeht. */
.lu-nach {
  margin: 1.6rem 0 0; padding-left: 1.1rem;
  border-left: 3px solid var(--accent);
  font-size: .98rem; line-height: 1.65; color: var(--ink-2);
}

/* Herkunftsangabe unter einer Tabelle - klein, aber sie traegt die
   Glaubwuerdigkeit der Zahlen darueber. */
.quelle {
  margin: 1rem 0 0; font-size: .84rem; line-height: 1.6; color: var(--ink-3);
  max-width: none;
}

/* ------------------------------------------------------- Termin direkt buchen
   Steht ueber dem Formular, weil es der kuerzere Weg ist: wer eine Demo will,
   sucht sich einen Termin und ist fertig. Das Formular bleibt darunter fuer
   alles andere. */
.buchen {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 1.5rem 1.6rem 1.6rem;
  background: var(--paper);
  margin-bottom: 2.2rem;
}
.buchen h2 { font-size: var(--step-2); margin: 0 0 .6rem; }
.buchen p { margin: 0 0 1.2rem; color: var(--ink-2); max-width: 46ch; }
.buchen .btn { display: inline-flex; align-items: center; gap: .5rem; }
.btn__ext { flex: none; opacity: .85; }
.buchen__hinweis {
  margin: .9rem 0 0; font-size: .82rem; color: var(--ink-3);
}

/* --------------------------------------------------- Aufnahme gross ansehen
   Die Bildschirmflaeche ist anklickbar und oeffnet die Aufnahme in der
   grossen Anzeige - derselben, die auch das Karussell benutzt. Der Knopf
   liegt unsichtbar ueber dem Bild, damit es eine echte Schaltflaeche ist
   und nicht nur ein Klickbereich: so ist sie auch mit der Tastatur
   erreichbar und wird vorgelesen. */
.laptop__gross {
  position: absolute; inset: 0; z-index: 2;
  border: 0; padding: 0; background: transparent;
  cursor: zoom-in;
}
.laptop__gross:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: -3px;
}
/* Vor dem Ende der Bildfolge ist nichts zu vergroessern */
.laptop:not([data-fertig]) .laptop__gross { display: none; }

/* Weicher Schein unter dem Geraet, damit es nicht auf dem Grund klebt.
   Er muss der Unterkante folgen. Gemessen liegt die bei 0 / -62 / -25 px
   (zu, halb, offen) - also ein Bogen mit einem geraden Anteil. Der lineare
   Term traegt die 25 px Endlage, der Term k*(1-k) den Durchhang dazwischen. */
.laptop::after {
  content: ""; position: absolute; z-index: -1;
  left: 4%; right: 4%; height: 3rem;
  bottom: calc(var(--kippe, 1) * -25px
               - 198px * var(--kippe, 1) * (1 - var(--kippe, 1)));
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 70%);
  filter: blur(8px);
}

.laptop__kante {
  position: absolute; top: 100%;
  /* Seitlich etwas eingerueckt, damit die gerade Kante nicht ueber die
     abgerundeten Deckelecken hinaussteht. */
  left: 5px; right: 5px;
  height: var(--dicke, 13px);
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  /* Die Rundung des Gehaeuses liegt in der Draufsicht, nicht in der Seiten-
     ansicht: an den Enden zieht die Vorderkante nach hinten weg, sie biegt
     nicht nach oben. Deshalb bleibt der Streifen gerade, und die letzten
     Prozent laufen ins Dunkel - dort dreht die Flaeche vom Betrachter fort. */
  border-radius: 2px;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 2.5%, rgba(0,0,0,0) 6%,
      rgba(0,0,0,0) 94%, rgba(0,0,0,.25) 97.5%, rgba(0,0,0,.65) 100%),
    linear-gradient(180deg, #4c6076 0%, #27394a 38%, #0e1922 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 1px 0 0 rgba(255,255,255,.07),
    inset -1px 0 0 rgba(255,255,255,.07);
  /* Senkrecht von oben ist von einer senkrechten Flaeche nichts zu sehen.
     Dass sie dort trotzdem als feiner Strich erscheint, ist ein Artefakt der
     Perspektive - deshalb blendet sie mit den ersten Grad der Drehung ein. */
  opacity: clamp(0, calc(var(--kippe, 1) * 6), 1);
}
/* Griffmulde in der Vorderkante */
.laptop__kante::after {
  content: ""; position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: 12%; height: 52%;
  border-radius: 0 0 5px 5px;
  background: rgba(0,0,0,.4);
}
/* --auf steuert das Aufklappen: 0 = zu, 1 = offen. Gedreht wird um die
   Scharnierkante, also die Oberkante der Flaeche. Genau 90 Grad, damit der
   Bildschirm senkrecht steht und dem Betrachter frontal zugewandt ist -
   jedes Grad daneben verkuerzt die Aufnahme und kostet Lesbarkeit. */
.laptop--flach .laptop__deckel {
  transform-origin: 50% 0;
  transform: rotateX(calc(var(--auf, 1) * 90deg));
}
.laptop--flach .laptop__ruecken {
  transform: none;
  /* Draufsicht: oben liegt das Scharnier, dort ist die Kante gerade. Nach
     vorn - also unten im Bild - laeuft der Deckel rund aus. */
  border-radius: 5px 5px 17px 17px;
}
/* Die Tastatureinheit liegt in derselben Ebene wie der Deckel, nur eine
   Spur darunter. Zugeklappt verdeckt der Deckel sie vollstaendig; geht er
   hoch, kommt sie zum Vorschein. */
.laptop--flach .laptop__deck {
  position: absolute; inset: 0;
  width: auto; height: auto;
  transform: translateZ(-1.5px);
  border-radius: 5px 5px 17px 17px;
  background: linear-gradient(168deg, #2c3e4f 0%, #1b2a38 55%, #16222e 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.laptop--flach .laptop__touchpad {
  position: absolute; left: 50%; top: 52%; transform: translateX(-50%);
  width: 24%; height: 34%;
  border-radius: 7px;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}

/* Wer Bewegung reduziert haben moechte, bekommt das Geraet offen und ohne
   Klappbewegung - der Inhalt bleibt derselbe. */
@media (prefers-reduced-motion: reduce) {
  .laptop__deckel { transform: none; transition: none; }
  .laptop__ruecken { display: none; }
}


/* Auf schmalen Schirmen kein Ueberstand, sonst entsteht Querlauf */
@media (max-width: 63.99rem) {
  .hero__visual { margin: 0; }
  .hero--split .hero__in { padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
}


/* Die H1-Skala war fuer einen Hero ueber die volle Breite gedacht.
   In der halben Spalte muss sie kleiner ansetzen, sonst bricht sie sechszeilig um. */
.hero--split h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); max-width: 17ch; }

/* Zusatzhinweis unter einem CTA */
.cta__note { font-size: .88rem; color: var(--on-dark-3); max-width: 54ch; margin: 1.8rem auto 0; line-height: 1.6; }

/* ==========================================================================
   Phasenliste (DMAIC) und Open-Source-Karten
   ========================================================================== */
.phasen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; max-width: 62rem; }
.phase { display: grid; gap: 1rem 2rem; grid-template-columns: 1fr; padding: clamp(1.8rem,1.2rem+2vw,2.8rem) 0; border-top: 1px solid var(--rule-dark); }
.phase:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 48rem) { .phase { grid-template-columns: 5rem 1fr; } }
.phase__nr { font-family: Conthrax, Archivo, sans-serif; font-size: 1.5rem; color: var(--accent); line-height: 1; padding-top: .2rem; }
.phase__body h3 { font-size: var(--step-1); margin: 0 0 .9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.phase__dmaic { font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .06em; color: var(--on-dark-3); font-weight: 400; text-transform: none; }
.phase__body p { color: var(--on-dark-2); line-height: 1.75; max-width: 58ch; margin: 0 0 .9rem; }
.phase__body p:last-child { margin-bottom: 0; }

.oslist { display: grid; gap: var(--gap); }
.oscard { display: grid; gap: 0; grid-template-columns: 1fr; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: #fff; }
@media (min-width: 52rem) { .oscard { grid-template-columns: 1fr 1.15fr; align-items: stretch; } }
.oscard__media { background: var(--paper); display: grid; }
.oscard__media > * { margin: 1.2rem; }
.oscard__body { padding: clamp(1.5rem,1rem+2vw,2.2rem); }
.oscard__meta { display: flex; gap: .9rem; align-items: center; margin: 0 0 .9rem; font-family: Conthrax, Archivo, sans-serif; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.oscard__tag { color: var(--accent-ink); }
.oscard h3 { font-size: var(--step-1); margin: 0 0 .7rem; }
.oscard h3 a { text-decoration: none; color: inherit; }
.oscard h3 a:hover { color: var(--accent-ink); }
.oscard__body > p { color: var(--ink-2); margin: 0; max-width: 52ch; }

/* ==========================================================================
   Devise: Standard und Clean Core first
   ========================================================================== */
.prinzip__in { display: grid; gap: clamp(2rem,1.2rem+3vw,3.5rem); grid-template-columns: 1fr; }
@media (min-width: 62rem) { .prinzip__in { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: start; } }
.prinzip__h { font-size: clamp(1.6rem,1.2rem+1.8vw,2.4rem); margin: 0; }
.prinzip__kopf .lead { margin-top: 1.1rem; }
.prinzip__schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: none; }
.prinzip__schritte > li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 1.1rem; align-items: start; }
.prinzip__nr {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 2px solid var(--accent); color: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.prinzip__schritte strong { display: block; color: #fff; font-size: 1.05rem; margin-bottom: .35rem; }
.prinzip__schritte p { margin: 0; color: var(--on-dark-2); font-size: .95rem; line-height: 1.7; max-width: 52ch; }
.prinzip__schritte code { font-size: .88em; }

/* Nummer auf einer Karte */
.card__nr {
  display: block; font-family: Conthrax, Archivo, sans-serif; font-size: .62rem;
  letter-spacing: .16em; color: var(--accent-ink); margin-bottom: .8rem;
}
:is(.sec--dark,.sec--deep) .card__nr { color: var(--accent); }

/* Hinweis: keine Bindung */
.freiheit {
  margin-top: var(--gap); border: 2px solid var(--accent); border-radius: 10px;
  padding: clamp(1.6rem,1.1rem+2vw,2.4rem); background: var(--paper);
}
.freiheit__h { font-size: var(--step-1); font-weight: 700; color: var(--ink); margin: 0 0 .8rem; letter-spacing: -.015em; }
.freiheit p { color: var(--ink-2); max-width: 68ch; line-height: 1.75; margin: 0 0 .9rem; }
.freiheit p:last-child { margin-bottom: 0; }

/* ==========================================================================
   BPMN-Diagramm
   ========================================================================== */
.bpmn__scroll {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--rule); border-radius: 10px; background: #fff;
  padding: clamp(.8rem, .4rem + 1.5vw, 1.5rem);
}
.bpmn__scroll:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.bpmn__svg { display: block; width: 100%; min-width: 60rem; height: auto; }

.bpmn-lane rect { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }
.bpmn-lane line { stroke: var(--rule); stroke-width: 1; }
.bpmn-lanelabel text {
  font-family: Conthrax, Archivo, sans-serif; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; fill: var(--ink-3); text-anchor: middle;
}

/* color setzen, damit currentColor in der Pfeilspitze eine Farbe hat */
.bpmn-flow { color: var(--ink-3); }
.bpmn-flow path { fill: none; stroke: var(--ink-3); stroke-width: 1.6; marker-end: url(#bpmnPfeil); }
.bpmn-flowlabel { font-family: Archivo, sans-serif; font-size: 11px; fill: var(--ink-3); text-anchor: middle; }

.bpmn-ev { fill: #fff; stroke: var(--ink-2); stroke-width: 2; }
.bpmn-ev--end { stroke-width: 3.5; }

.bpmn-task rect { fill: #fff; stroke: var(--ink-2); stroke-width: 1.4; }
.bpmn-tasktext text {
  font-family: Archivo, sans-serif; font-size: 12.5px; font-weight: 500;
  fill: var(--ink); text-anchor: middle;
}
.bpmn-gw { fill: #fff; stroke: var(--ink-2); stroke-width: 1.4; }
.bpmn-gwtext { font-family: Archivo, sans-serif; font-size: 14px; font-weight: 700; fill: var(--ink-2); text-anchor: middle; }

.bpmn-fund circle { fill: var(--orange); }
.bpmn-fund text { font-family: Archivo, sans-serif; font-size: 13px; font-weight: 700; fill: #fff; text-anchor: middle; }

.bpmn__funde { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
@media (min-width: 52rem) { .bpmn__funde { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 2.5rem; } }
.bpmn__funde > li { display: grid; grid-template-columns: 1.75rem 1fr; gap: .9rem; align-items: start; }
.bpmn__nr {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--orange); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .82rem; margin-top: .1rem;
}
.bpmn__funde strong { display: block; color: var(--ink); font-size: .98rem; margin-bottom: .25rem; }
.bpmn__funde p { margin: 0; font-size: .92rem; color: var(--ink-2); line-height: 1.65; }
/* ------------------------------------------------------- Karussell Aufnahmen
   SAP-Oberflaechen sind dicht beschriftet. Die Aufnahmen laufen deshalb einzeln
   durch ein Karussell - in Ruhe kleiner als der Fliesstextbereich, und wer
   Einzelheiten sehen will, oeffnet sie ueber die Lupe in voller Groesse.
   Ohne JavaScript bleibt die Spur als Streifen scrollbar und damit bedienbar. */
/* Luft zu den Funktionskacheln darunter haengt an diesem Absatz */
.kar__mehr {
  max-width: 46rem;
  margin: 1.6rem auto clamp(3rem, 2rem + 3.5vw, 5.5rem); text-align: center;
  font-size: .95rem; line-height: 1.65; color: var(--ink-2);
}
.kar__mehr a { color: inherit; text-underline-offset: 3px; }

.kar { max-width: 68rem; margin-inline: auto;
  margin-bottom: 0; }

.kar__spur {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  border-radius: 8px;
}
.kar__spur::-webkit-scrollbar { display: none; }

.kar__blatt { scroll-snap-align: center; margin: 0; }
.kar__bild { position: relative; display: block; }
.kar__bild img { display: block; width: 100%; height: auto; }

/* Lupe unten rechts auf der Aufnahme */
.kar__lupe {
  position: absolute; right: .6rem; bottom: .6rem;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .7rem; border: 0; border-radius: 5px; cursor: pointer;
  background: rgba(11,28,43,.86); color: #fff;
  font: 600 .78rem/1 Archivo, sans-serif; letter-spacing: .01em;
  box-shadow: 0 6px 16px -6px rgba(11,28,43,.7);
  transition: background-color .18s ease;
}
.kar__lupe:is(:hover, :focus-visible) { background: var(--navy); }
.kar__lupe svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Steuerung unter der Spur */
.kar__steuer {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: .55rem;
}
.kar__nav {
  width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 50%; background: #fff; cursor: pointer;
  color: var(--navy); transition: border-color .18s ease, background-color .18s ease;
}
.kar__nav:is(:hover, :focus-visible) { border-color: var(--navy); background: var(--paper); }
.kar__nav[disabled] { opacity: .35; cursor: default; }
.kar__nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }

.kar__punkte { display: flex; gap: .45rem; }
.kar__punkt {
  width: .55rem; height: .55rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--rule); transition: background-color .18s ease, transform .18s ease;
}
.kar__punkt[aria-selected="true"] { background: var(--navy); transform: scale(1.25); }

/* Zaehler, damit man weiss, wie viele Aufnahmen noch kommen */
.kar__stand { margin: .9rem 0 0; text-align: center;
  font: 500 .82rem/1 Archivo, sans-serif; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }

/* Ohne JavaScript gibt es keine Knoepfe - dann fuehrt die Spur selbst */
.kar:not([data-bereit]) .kar__steuer { display: none; }
.kar:not([data-bereit]) .kar__spur { scroll-snap-type: x proximity; }

/* Markierungen auf den Aufnahmen: sagen dem Betrachter, worauf er schauen soll.
   Als Auszeichnung ueber dem Bild, nicht ins Bild gebrannt - bleibt scharf,
   ist vorlesbar und laesst sich fuer die englische Fassung uebersetzen.
   Die Koordinaten stehen in Prozent, skalieren also mit dem Bild mit. */
.mark {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border: 2px solid var(--navy); border-radius: 5px; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 8px 20px -8px rgba(11,28,43,.55);
}
.mark__label {
  position: absolute; left: -2px; top: calc(100% + .4rem); white-space: nowrap;
  background: var(--navy); color: var(--lime);
  font: 600 .74rem/1.1 Archivo, sans-serif; letter-spacing: .01em;
  padding: .3rem .55rem; border-radius: 4px;
  box-shadow: 0 6px 16px -6px rgba(11,28,43,.6);
}
.mark--oben .mark__label { top: auto; bottom: calc(100% + .4rem); }
.mark--rechts .mark__label {
  left: calc(100% + .5rem); top: 50%; bottom: auto; transform: translateY(-50%);
}

/* In der Lupe ist die Aufnahme groesser, dann darf auch die Beschriftung wachsen */
.lupe .mark__label { font-size: .8rem; padding: .34rem .62rem; }

/* Auf schmalen Schirmen ist die Aufnahme ohnehin zu klein zum Lesen. Dann tragen
   die Bildunterschriften die Aussage, und die Markierungen wuerden sich nur
   gegenseitig ueberdecken. */
@media (max-width: 62rem) {
  .kar .mark { display: none; }
}

/* --------------------------------------------------------------------- Lupe */
.lupe {
  border: 0; padding: 0;
  max-width: 100vw; max-height: 100vh; width: 100%; height: 100%;
  /* Der dunkle Grund liegt auf dem Dialog selbst und nicht nur auf ::backdrop -
     letzteres wird nicht in jeder Umgebung gezeichnet. */
  background: rgba(6,16,25,.94);
}
.lupe::backdrop { background: rgba(6,16,25,.88); }
.lupe__in {
  display: grid; grid-template-rows: auto 1fr auto; gap: .55rem;
  width: 100%; height: 100%; padding: clamp(.5rem, .3rem + .8vw, .9rem);
  box-sizing: border-box;
}
.lupe__kopf { display: flex; align-items: center; gap: .9rem; }
.lupe__titel { margin: 0; font-size: .95rem; font-weight: 600; color: #fff; }
.lupe__zu { margin-left: auto; }
.lupe__zu {
  width: 2.4rem; height: 2.4rem; flex: none; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28); border-radius: 50%; cursor: pointer;
  background: transparent; color: #fff;
}
.lupe__zu:is(:hover, :focus-visible) { background: rgba(255,255,255,.14); }
.lupe__zu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* Die Aufnahme fuellt die Buehne so weit aus, wie sie hineinpasst - ohne zu
   scrollen und ohne hochgerechnet zu werden. Weil weder width noch height
   gesetzt sind, bleibt die natuerliche Groesse die Obergrenze: eine 2400 px
   breite Vorlage wird gross gezeigt, eine kleinere nicht kuenstlich aufgeblasen. */
.lupe__buehne { overflow: hidden; display: grid; place-items: center; min-height: 0; position: relative; }
/* Laeuft die Aufnahme unten hinaus, sitzt sie oben buendig und blendet am
   unteren Rand weich aus, damit der Beschnitt gewollt aussieht. */
.lupe__buehne.hat-schnitt { place-items: start center; }
.lupe__buehne.hat-schnitt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4.5rem;
  background: linear-gradient(to bottom, transparent, rgba(6,16,25,.94));
  pointer-events: none;
}
/* Die Groesse dieses Kastens rechnet das Skript aus - Prozentwerte greifen
   hier nicht, weil die Zwischenebene selbst keine feste Hoehe hat. Der Kasten
   umschliesst die Aufnahme punktgenau, damit die Markierungen darauf sitzen. */
.lupe__bild { position: relative; display: block; line-height: 0; }
.lupe__bild img { display: block; width: 100%; height: 100%; border-radius: 6px; }
/* Fuss der Lupe: Pfeile links und rechts, Bildunterschrift dazwischen */
.lupe__fuss {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 1.2rem;
}
.lupe__unterschrift {
  margin: 0; text-align: center; font-size: .88rem; line-height: 1.6;
  color: rgba(255,255,255,.82);
}
.lupe__unterschrift strong { color: #fff; }

/* Die Bildunterschrift darf der Aufnahme keine Hoehe wegnehmen: zwei
   Zeilen, danach wird gekuerzt. */
.lupe__unterschrift {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.lupe__nav {
  width: 2.9rem; height: 2.9rem; flex: none; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.3); border-radius: 50%; cursor: pointer;
  background: transparent; color: #fff;
  transition: background-color .18s ease, border-color .18s ease;
}
.lupe__nav:is(:hover, :focus-visible) {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55);
}
/* display: grid sticht das hidden-Attribut aus - deshalb ausdruecklich */
.lupe__nav[hidden] { display: none; }
.lupe__nav[disabled] { opacity: .3; cursor: default; }
.lupe__nav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; }

.lupe__stand {
  margin: 0 auto 0 0; padding-left: 1rem;
  font: 500 .82rem/1 Archivo, sans-serif; color: rgba(255,255,255,.62);
  font-variant-numeric: tabular-nums;
}

/* Auf schmalen Schirmen wandern die Pfeile unter die Bildunterschrift */
@media (max-width: 40rem) {
  .lupe__fuss { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .lupe__unterschrift { grid-column: 1 / -1; order: -1; }
}



/* Kleingedruckter Zusatz unter Bildern oder Tabellen */
.hinweis { margin: 1.1rem 0 0; font-size: .88rem; color: var(--ink-3); max-width: none; }
:is(.sec--dark,.sec--deep) .hinweis { color: var(--on-dark-2); }

.bpmn__hinweis { margin: 1.6rem 0 0; font-size: .88rem; color: var(--ink-3); max-width: none; }

/* Papiergebundene Schritte hervorheben */
.bpmn-task rect.bpmn-task--papier { fill: #fdf3ec; stroke: var(--orange); stroke-dasharray: 5 3; }
.bpmn-lanesub { font-size: 8px; letter-spacing: .1em; fill: var(--ink-3); text-anchor: middle;
  font-family: Archivo, sans-serif; text-transform: none; }
.bpmn-takt text {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; fill: var(--ink-3); text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.bpmn-liege text {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; fill: var(--orange); text-anchor: middle;
}


/* Diagramm: Beschriftungen sollen nicht heruntersskalieren */
.bpmn__svg { display: block; width: 100%; min-width: 64rem; height: auto; }

/* Bilanz: gleiche Kachelsprache wie sonst auf der Seite, kein Kasten im Kasten */
.bpmn__bilanzkopf {
  margin: clamp(2.2rem, 1.6rem + 2vw, 3.2rem) 0 1.1rem;
  font-size: var(--step-1); font-weight: 700; color: var(--ink); letter-spacing: -.015em;
}
@media (min-width: 62rem) { .stats--vier { grid-template-columns: repeat(4, 1fr); } }
.bpmn__stats dd { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
.bpmn__pointe {
  margin: 1.4rem 0 0; font-size: var(--step-1); color: var(--ink-2);
  line-height: 1.6; max-width: none;          /* eine Zeile, kein Umbruch */
  padding-left: 1.1rem; border-left: 3px solid var(--accent);
  text-wrap: nowrap;
}
@media (max-width: 52rem) { .bpmn__pointe { text-wrap: wrap; } }

/* Rechte Spalte der Vergleichstabelle: die Antwort ist fuer alle Zeilen
   dieselbe. Achtmal dasselbe Wort untereinander liest sich wie eine
   Aufzaehlung - eine Zelle ueber die volle Hoehe sagt, worum es geht. */
.lu-all {
  vertical-align: middle;
  text-align: center;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, #fff);
}
.lu-all strong {
  display: block;
  max-width: 14rem;
  margin-inline: auto;
  font-size: 1.05rem;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--accent-ink);
}
:is(.sec--dark, .sec--deep) .lu-all {
  background: var(--navy-lift);
}
/* Reines Orange traegt auf dunklem Grund nur 3,5:1 - aufgehellt reicht es.
   Lime ist ohnehin hell genug und veraendert sich dadurch kaum. */
:is(.sec--dark, .sec--deep) .lu-all strong {
  color: color-mix(in srgb, var(--accent) 62%, #fff);
}


/* --------------------------------------------- Engerer Ausschnitt im Karussell
   Die Aufnahmen zeigen das ganze Anwendungsfenster - rechts und unten steht
   dabei viel leere Flaeche. Bei gleicher Rahmenbreite erscheint die Oberflaeche
   dadurch kleiner als bei den Aufnahmen des Assistenten. Statt die Dateien zu
   beschneiden, zeigen wir sie vergroessert in einem Rahmen, der den leeren Teil
   abschneidet. In der Vergroesserung liegt weiterhin die vollstaendige Aufnahme
   vor - dort ist Platz genug fuer das ganze Fenster. */
.kar__gross { position: relative; }
.kar--eng .kar__bild { overflow: hidden; aspect-ratio: 16 / 9; }
.kar--eng .kar__bild .kar__gross { width: 138%; }   /* rechts endet der
   Ausschnitt genau an der Kante der Arbeitsflaeche - kein angeschnittenes
   Tabellenfeld, aber auch keine leere Flaeche mehr */

/* Schmale Schirme zeigen die Aufnahme ohnehin seitlich scrollbar und ohne
   Markierungen - dort wuerde ein zweiter Ausschnitt nur stoeren. */
@media (max-width: 62rem) {
  .kar--eng .kar__bild { overflow: visible; aspect-ratio: auto; }
  .kar--eng .kar__bild .kar__gross { width: 100%; }
}

/* ------------------------------------------- Markierungen im Wechsel
   Auf einer Aufnahme steckt mehr als eine Aussage. Alle gleichzeitig zu
   umranden macht das Bild unlesbar - also loesen sie sich ab: eine blendet
   auf, bleibt stehen, blendet ab, die naechste kommt.

   Ohne Skript steht die erste Markierung still da; das Bild bleibt damit
   auch dann verstaendlich. In der Vergroesserung sind alle zu sehen, dort
   ist Platz genug und der Betrachter hat Zeit. */
.kar:not([data-marken]) .mark ~ .mark { display: none; }

[data-marken] .mark {
  opacity: 0;
  transform: scale(.985);
  transition: opacity .5s ease, transform .5s ease;
}
[data-marken] .mark--an { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-marken] .mark { transition: none; }
}

/* Beschriftung im Kasten statt daneben. Fuer Markierungen, die bis an den
   Bildrand laufen - draussen waere kein Platz mehr. Sie sitzt oben links
   und deckt dort die Ueberschrift des Bereichs ab, den sie benennt. */
.mark--innen .mark__label {
  top: .35rem;
  left: .35rem;
  bottom: auto;
  transform: none;
}

/* Im zweispaltigen Aufbau standen die Ziffern 1, 2, 3 unmittelbar an der
   Textspalte daneben - nur fuenf Bildpunkte Luft. Ein Einzug schiebt sie
   weg, ohne die Spaltenbreiten zu aendern. Muss nach .prinzip__schritte
   stehen, dort wird padding auf 0 gesetzt. */
@media (min-width: 62rem) {
  .prinzip__schritte { padding-inline-start: clamp(2rem, 4vw, 4rem); }
}

/* Frei gesetzte Beschriftung. Die drei festen Lagen (darunter, darueber,
   rechts) treffen auf dichten Oberflaechen manchmal keine freie Flaeche -
   dann liegt die Beschriftung auf Daten. --lx und --ly geben stattdessen
   eine Stelle vor, in Prozent des Markierungskastens, damit sie mit dem
   Bild mitskaliert. Die Werte rechnet der Generator aus Bildpunkten aus. */
.mark--frei .mark__label {
  left: var(--lx);
  top: var(--ly);
  bottom: auto;
  transform: none;
}

/* ==================================================== Gezeichnete Motive
   Statt Fotos: die Aussage der jeweiligen Seite als Zeichnung, wie das
   Notebook auf den Produktseiten. Bleibt auf jedem Schirm scharf, wiegt
   nichts an Ladezeit und laesst sich in Text und Farbe aendern, ohne dass
   jemand ein Bildbearbeitungsprogramm oeffnet.

   Jede Bewegung laeuft einmal beim Laden und traegt die Aussage mit; wer
   Bewegung reduziert haben moechte, sieht den Endzustand sofort. */
.mot { position: relative; width: 100%; }
.mot svg { display: block; width: 100%; height: auto; }
@keyframes mot-auf   { to { opacity: 1; } }
@keyframes mot-rein  { from { opacity: 0; transform: translateY(14px); } }
@keyframes mot-ziehen { to { stroke-dashoffset: 0; } }

/* ------------------------------------------- Kontakt: die Antwort mit Namen */
.mot-antwort { display: grid; gap: .85rem; max-width: 30rem; margin-inline: auto; }
.mot-antwort__karte {
  background: var(--navy-lift); border: 1px solid var(--rule-dark); border-radius: 14px;
  padding: 1rem 1.15rem; box-shadow: 0 20px 38px -24px rgba(0,0,0,.85);
}
.mot-antwort__karte--frage { max-width: 76%; border-bottom-left-radius: 3px; }
.mot-antwort__karte--antwort {
  max-width: 88%; margin-left: auto; border-bottom-right-radius: 3px;
  background: var(--navy-deep); border-color: var(--accent);
}
.js .mot-antwort__karte--antwort { animation: mot-rein .7s .5s both cubic-bezier(.2,.8,.3,1); }
.mot-antwort__wer {
  font: 600 .62rem/1 Conthrax, Archivo, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rule-ui-dark); margin: 0 0 .45rem;
}
.mot-antwort__karte--antwort .mot-antwort__wer { color: var(--accent); }
.mot-antwort__txt { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--on-dark); }
.mot-antwort__sig {
  margin: .75rem 0 0; padding-top: .65rem; border-top: 1px solid var(--rule-dark);
  font-size: .82rem; color: var(--on-dark-2); display: flex; gap: .5rem; align-items: center;
}
.mot-antwort__punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }

/* ------------------------- Ueber uns: der Umweg und der direkte Weg
   Beide Wege liegen uebereinander: gleicher Anfang, gleiches Ziel. Erst
   laeuft der gewundene, dann tritt er zurueck und die Gerade zieht sich
   darueber. Die Strichlaengen der Zeichenanimation muessen ueber der
   jeweiligen Pfadlaenge liegen, sonst bleibt das letzte Stueck aus. */
.mot-linie .welle { fill: none; stroke: var(--rule-ui-dark); stroke-width: 2.4;
  stroke-linecap: round; }
.mot-linie .strich { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; }
.mot-linie .andere { fill: var(--rule-ui-dark); font: 600 12.5px Archivo, sans-serif;
  letter-spacing: .06em; }
.mot-linie .wir { fill: var(--accent); font: 600 12.5px Archivo, sans-serif; letter-spacing: .06em; }
.mot-linie .punkt { fill: var(--accent); }
.mot-linie .ziel { fill: #fff; font: 600 12px Archivo, sans-serif; }

.js .mot-linie :is(.punkt, .ziel, .andere, .wir) { opacity: 0; }
.js .mot-linie .welle { stroke-dasharray: 500; stroke-dashoffset: 500; }  /* Pfad ist 480 lang */
.js .mot-linie .strich { stroke-dasharray: 290; stroke-dashoffset: 290; }

.js .mot-linie :is(.punkt, .ziel) { animation: mot-auf .6s .35s both; }
.js .mot-linie .welle { animation: mot-ziehen 2s .8s both ease-out,
  mot-zurueck .7s 3s both; }
.js .mot-linie .andere { animation: mot-auf .6s 1.9s both; }
.js .mot-linie .strich { animation: mot-ziehen 1.5s 3.2s both ease-out; }
.js .mot-linie .wir { animation: mot-auf .6s 4.8s both; }
@keyframes mot-zurueck { to { opacity: .32; } }

/* ------------------------------------- Open Source: was Sie bekommen (Code) */
.mot-code {
  background: var(--navy-deep); border: 1px solid var(--rule-dark); border-radius: 14px;
  overflow: hidden; box-shadow: 0 22px 40px -24px rgba(0,0,0,.85); max-width: 33rem;
  margin-inline: auto;
}
.mot-code__leiste {
  display: flex; align-items: center; gap: .45rem; padding: .75rem .95rem;
  background: var(--navy-lift); border-bottom: 1px solid var(--rule-dark);
}
.mot-code__ampel { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-ui-dark); }
.mot-code__datei { margin-left: .5rem; font: 400 .75rem Archivo, sans-serif; color: var(--on-dark-2); }
.mot-code__lizenz {
  margin-left: auto; font: 600 .6rem/1 Conthrax, Archivo, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy); background: var(--accent);
  padding: .32rem .55rem; border-radius: 3px;
}
.mot-code pre {
  margin: 0; padding: 1rem 1.15rem 1.25rem; overflow-x: auto;
  font: 400 .79rem/1.75 "IBM Plex Mono", ui-monospace, Consolas, monospace; color: #cfe0ec;
}
.mot-code .k { color: var(--accent); }
.mot-code .c { color: var(--rule-ui-dark); }
.mot-code .s { color: #9ad7ff; }
.js .mot-code pre span.zl { display: block; opacity: 0; animation: mot-auf .28s both; }
.js .mot-code pre span.zl:nth-child(1) { animation-delay: .30s; }
.js .mot-code pre span.zl:nth-child(2) { animation-delay: .40s; }
.js .mot-code pre span.zl:nth-child(3) { animation-delay: .50s; }
.js .mot-code pre span.zl:nth-child(4) { animation-delay: .60s; }
.js .mot-code pre span.zl:nth-child(5) { animation-delay: .70s; }
.js .mot-code pre span.zl:nth-child(6) { animation-delay: .80s; }
.js .mot-code pre span.zl:nth-child(7) { animation-delay: .90s; }

/* --------------------------- Mission: was am Ende uebrig bleibt
   Oben die Effizienz, unten ihre Uebersetzung in Kapazitaet. Der kurze
   Balken ist massstabsgetreu und nicht geschoent - gerade seine Kuerze
   ist die Aussage. Die Bewegung startet beim Hineinscrollen, sonst waere
   sie vorbei, bevor jemand hinsieht. */
.mot-bilanz .spur { fill: var(--paper-warm); }
.mot-bilanz .voll,
.mot-bilanz .kurz { fill: var(--navy); transform-origin: left center; }
.mot-bilanz .rest { fill: var(--accent-solid); }
.mot-bilanz .lab { fill: var(--ink-3); font: 600 14px Archivo, sans-serif; }
.mot-bilanz .bleibt { fill: var(--ink); font: 700 17px Archivo, sans-serif; }
.mot-bilanz .folge { fill: var(--ink); font: 700 17px Archivo, sans-serif; }
.mot-bilanz .mann :is(circle, path) { fill: var(--rule); }
.mot-bilanz .frei :is(circle, path) { fill: var(--accent-solid); }

.js .mot-bilanz :is(.voll, .kurz) { transform: scaleX(0); }
.js .mot-bilanz :is(.rest, .bleibt, .folge, .mann) { opacity: 0; }
.js .rise.in .mot-bilanz .voll { animation: mot-wachsen .9s .15s both cubic-bezier(.3,.9,.3,1); }
.js .rise.in .mot-bilanz .rest { animation: mot-auf .5s 1.05s both; }
.js .rise.in .mot-bilanz .kurz { animation: mot-wachsen .45s 1.15s both cubic-bezier(.3,.9,.3,1); }
.js .rise.in .mot-bilanz .bleibt { animation: mot-auf .5s 1.6s both; }
.js .rise.in .mot-bilanz .mann { animation: mot-auf .4s both;
  animation-delay: calc(1.9s + var(--n) * .07s); }
.js .rise.in .mot-bilanz .folge { animation: mot-auf .5s 2.8s both; }
@keyframes mot-wachsen { to { transform: scaleX(1); } }

/* ------------------------------------------- Standort: das Dreilaendereck
   Echte Laenderumrisse (Natural Earth, gemeinfrei). Die Schweiz steht
   dunkel, Deutschland und Oesterreich hell - damit sagt das Bild schon
   ohne Beschriftung, wo wir sitzen. Der Kreis liegt auf den Koordinaten
   von Taegerwilen, nicht nach Augenmass.

   Die Karte ist hoch; ohne Deckel wuerde sie den Abschnitt sprengen. */
.mot-ort { max-width: 26rem; margin-inline: auto; }
.mot-ort svg { max-height: 30rem; margin-inline: auto; }
.mot-ort .nachbar { fill: color-mix(in srgb, var(--navy) 14%, #fff);
  stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.mot-ort .heimat { fill: var(--navy); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.mot-ort .land { fill: var(--ink-3); font: 600 15px Archivo, sans-serif; letter-spacing: .16em; }
.mot-ort .land--hell { fill: rgba(255,255,255,.72); }
.mot-ort .ring { fill: none; stroke: var(--accent-solid); stroke-width: 3.5; }
.mot-ort .ort { fill: var(--accent-solid); stroke: #fff; stroke-width: 2; }
/* Stecknadel mit Schweizer Fahne: die Spitze steckt im gelben Punkt.
   Rot und Weiss sind hier keine Hausfarben, sondern die Fahne. */
.mot-ort .nadel__koerper { fill: #d8232a; stroke: #fff; stroke-width: 2.2;
  stroke-linejoin: round; }
.mot-ort .nadel__kreuz { fill: #fff; }
.mot-ort .nadel { transform-box: fill-box; transform-origin: 50% 100%;
  filter: drop-shadow(0 3px 4px rgba(16,42,63,.35)); }
.mot-ort .hier { fill: var(--ink); font: 700 21px Archivo, sans-serif; }
.mot-ort .dazu { fill: var(--ink-2); font: 400 15px Archivo, sans-serif; }

.js .mot-ort :is(.nachbar, .heimat, .land, .ring, .ort, .hier, .dazu, .nadel) { opacity: 0; }
.js .rise.in .mot-ort .nachbar { animation: mot-auf .7s .1s both; }
.js .rise.in .mot-ort .heimat  { animation: mot-auf .7s .5s both; }
.js .rise.in .mot-ort .land    { animation: mot-auf .6s .9s both; }
.js .rise.in .mot-ort :is(.ring, .ort, .hier, .dazu) { animation: mot-auf .5s 1.2s both; }
/* Die Nadel faellt einmal ein und wippt danach ruhig weiter - das ist die
   Bewegung an der Stelle, ein auslaufender Ring braucht es nicht. */
.js .rise.in .mot-ort .nadel { animation: mot-nadel .55s 1.35s both cubic-bezier(.3,1.5,.5,1),
  mot-wippen 3s 2.2s ease-in-out infinite; }
@keyframes mot-nadel { from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); } }
@keyframes mot-wippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5px); } }

@media (prefers-reduced-motion: reduce) {
  .js .mot-antwort__karte--antwort,
  .js .mot-linie .knaeuel,
  .js .mot-linie :is(.punkt, .ziel),
  .js .mot-code pre span.zl { animation: none; opacity: 1; }
  .js .mot-linie :is(.punkt, .ziel, .andere, .wir) { opacity: 1; animation: none; }
  .js .mot-linie .welle { opacity: .32; animation: none; stroke-dashoffset: 0; }
  .js .mot-linie .strich { animation: none; stroke-dashoffset: 0; }
  .js .mot-linie .strich { animation: none; stroke-dashoffset: 0; }
  .js .mot-bilanz :is(.voll, .kurz) { animation: none; transform: none; }
  .js .mot-bilanz :is(.rest, .bleibt, .folge, .mann),
  .js .mot-ort :is(.nachbar, .heimat, .land, .ring, .ort, .hier, .dazu, .nadel)
    { animation: none; opacity: 1; transform: none; }
}

/* ------------------------------------------------ Blog: die Zeitachse
   Zeichnet, was die Seite ist: ein fortlaufendes Journal, neuester
   Eintrag oben, nach oben offen. Die Punkte entstehen aus derselben
   Liste wie die Beitraege darunter, das Bild kann also nicht veralten.
   Farben wie die Punkte in der Liste: Lime fuer Fiori, Orange fuer
   Desktop, neutral fuer Unternehmensthemen. */
.mot-achse { max-width: 22rem; margin-inline: auto; }
.mot-achse svg { max-height: 30rem; margin-inline: auto; }
.mot-achse .achse__strang { fill: none; stroke: var(--rule-dark); stroke-width: 2.5; }
.mot-achse .achse__weiter { fill: none; stroke: var(--rule-ui-dark); stroke-width: 2.5;
  stroke-dasharray: 6 7; stroke-linecap: round; }
.mot-achse .achse__kommt { fill: var(--rule-ui-dark); font: 600 12.5px Archivo, sans-serif; }
.mot-achse .achse__punkt { fill: var(--navy); stroke: var(--rule-ui-dark); stroke-width: 2.5; }
.mot-achse .achse__punkt--fiori { stroke: var(--lime); }
.mot-achse .achse__punkt--desktop { stroke: var(--orange); }
.mot-achse .achse__punkt--neu { fill: var(--lime); stroke: var(--lime); }
.mot-achse .achse__datum { fill: #fff; font: 600 14px Archivo, sans-serif; }
.mot-achse .achse__art { fill: var(--on-dark-2); font: 400 12px Archivo, sans-serif; }

.js .mot-achse :is(.achse__weiter, .achse__kommt, .achse__eintrag) { opacity: 0; }
.js .mot-achse .achse__strang { stroke-dasharray: 300; stroke-dashoffset: 300; }
.js .mot-achse .achse__strang { animation: mot-ziehen 1.1s .3s both ease-out; }
.js .mot-achse .achse__eintrag { animation: mot-achse-rein .45s both;
  animation-delay: calc(.55s + var(--n) * .16s); }
@keyframes mot-achse-rein { from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; } }
.js .mot-achse :is(.achse__weiter, .achse__kommt) { animation: mot-auf .6s 1.6s both; }

@media (prefers-reduced-motion: reduce) {
  .js .mot-achse :is(.achse__weiter, .achse__kommt, .achse__eintrag)
    { animation: none; opacity: 1; transform: none; }
  .js .mot-achse .achse__strang { animation: none; stroke-dashoffset: 0; }
}

/* ------------------------- Flexible Workflow: der Weg findet sein Ziel
   Der direkte Weg ist gestrichelt und durchgestrichen, der Pruefer ist
   nicht da. Die durchgezogene Linie nimmt den Umweg ueber die Vertretung
   und kommt trotzdem an. Die Knoten leuchten in dem Moment auf, in dem die
   Linie sie erreicht; die Verzoegerungen sind aus der gemessenen Pfadlaenge
   (460,9) gerechnet: Pruefung bei 30 Prozent, Vertretung bei 65. */
.mot-fluss .fluss__aus {
  fill: none; stroke: var(--rule-ui-dark); stroke-width: 2; stroke-dasharray: 6 7;
}
.mot-fluss .fluss__kreuz line {
  stroke: var(--rule-ui-dark); stroke-width: 2.2; stroke-linecap: round;
}
.mot-fluss .fluss__weg {
  fill: none; stroke: var(--accent); stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.mot-fluss .fluss__kn circle { fill: var(--rule-ui-dark); }
.mot-fluss .fluss__kn text {
  fill: var(--on-dark-2); font: 600 12.5px Archivo, sans-serif; letter-spacing: .02em;
}
.mot-fluss .fluss__weg-txt {
  fill: var(--rule-ui-dark); font: 600 11.5px Archivo, sans-serif; letter-spacing: .04em;
}
.mot-fluss .fluss__haken {
  fill: none; stroke: var(--navy); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

.js .mot-fluss :is(.fluss__aus, .fluss__kreuz, .fluss__weg-txt) { opacity: 0; }
.js .mot-fluss .fluss__kn { opacity: 0; }
.js .mot-fluss .fluss__weg { stroke-dasharray: 480; stroke-dashoffset: 480; }
.js .mot-fluss .fluss__haken { opacity: 0; }

.js .mot-fluss .fluss__aus     { animation: mot-auf .6s .2s both; }
.js .mot-fluss .fluss__kn      { animation: mot-auf .5s .35s both; }
.js .mot-fluss .fluss__kreuz   { animation: mot-auf .5s 1.7s both; }
.js .mot-fluss .fluss__weg-txt { animation: mot-auf .5s 1.9s both; }
.js .mot-fluss .fluss__weg     { animation: mot-ziehen 3.2s .8s both ease-in-out; }
.js .mot-fluss .fluss__kn--1 circle { animation: mot-knoten .45s .8s both; }
.js .mot-fluss .fluss__kn--2 circle { animation: mot-knoten .45s 1.76s both; }
.js .mot-fluss .fluss__kn--3 circle { animation: mot-knoten .45s 2.88s both; }
.js .mot-fluss .fluss__kn--4 circle { animation: mot-knoten .45s 4s both; }
.js .mot-fluss .fluss__haken   { animation: mot-auf .4s 4.25s both; }
@keyframes mot-knoten { to { fill: var(--accent); } }

/* ----------------- Business Process Management: die Wertstromaufnahme
   Oben der Prozess mit den Bestaenden dazwischen, unten die Zeitlinie.
   Der Saegezahn liegt oben, solange der Vorgang wartet, und faellt nur
   fuer die kurzen Abschnitte, in denen wirklich gearbeitet wird. Farbig
   sind nur diese Abschnitte; das Verhaeltnis erzaehlt den Rest.

   Erst laufen die Schritte von links nach rechts ein, dann zieht sich die
   Zeitlinie darunter, und zuletzt leuchten die Zacken auf. In dieser
   Reihenfolge liest man auch eine echte Aufnahme. */
.mot-strom .strom__kasten rect { fill: var(--navy-lift); stroke: var(--rule-dark); stroke-width: 1; }
.mot-strom .strom__kasten text {
  fill: var(--on-dark); font: 600 11px Archivo, sans-serif; letter-spacing: .02em;
}
.mot-strom .strom__pfeil { stroke: var(--rule-ui-dark); stroke-width: 1.4; }
.mot-strom .strom__dreieck {
  fill: none; stroke: var(--rule-ui-dark); stroke-width: 1.4; stroke-linejoin: round;
}
.mot-strom .strom__band {
  fill: var(--rule-ui-dark); font: 600 10.5px Archivo, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
}
.mot-strom .strom__saege {
  fill: none; stroke: var(--rule-ui-dark); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.mot-strom .strom__zacke {
  fill: none; stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round;
}
.mot-strom .strom__liege {
  fill: var(--on-dark-2); font: 600 12.5px Archivo, sans-serif; letter-spacing: .03em;
}
.mot-strom .strom__arbeit {
  fill: var(--accent); font: 600 12.5px Archivo, sans-serif; letter-spacing: .03em;
}
.mot-strom .strom__zeiger { stroke: var(--accent); stroke-width: 1.6; }
.mot-strom .strom__fuss {
  fill: var(--rule-ui-dark); font: 500 10.5px Archivo, sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
}

/* .strom__kasten fehlt hier mit Absicht: sein Ausgangszustand steht im
   from von mot-rein. Stuende er auch hier, liefe die Einblendung von
   unsichtbar nach unsichtbar, denn das to uebernimmt den aktuellen Wert. */
.js .mot-strom :is(.strom__lager, .strom__band, .strom__liege,
                   .strom__arbeit, .strom__zeiger, .strom__fuss) { opacity: 0; }
.js .mot-strom .strom__saege { stroke-dasharray: 490; stroke-dashoffset: 490; }
.js .mot-strom .strom__zacke { stroke-dasharray: 20; stroke-dashoffset: 20; }

.js .mot-strom .strom__band { animation: mot-auf .5s .2s both; }
.js .mot-strom .strom__kasten {
  animation: mot-rein .55s both cubic-bezier(.2,.8,.3,1);
  animation-delay: calc(.4s + var(--n) * .18s);
}
.js .mot-strom .strom__lager {
  animation: mot-auf .45s both;
  animation-delay: calc(.62s + var(--n) * .18s);
}
.js .mot-strom .strom__saege { animation: mot-ziehen 1.9s 1.5s both ease-in-out; }
.js .mot-strom .strom__liege { animation: mot-auf .5s 2.6s both; }
.js .mot-strom .strom__zacke {
  animation: mot-ziehen .4s both ease-out;
  animation-delay: calc(3.3s + var(--n) * .12s);
}
.js .mot-strom :is(.strom__arbeit, .strom__zeiger) { animation: mot-auf .5s 3.9s both; }
.js .mot-strom .strom__fuss { animation: mot-auf .6s 4.2s both; }

@media (prefers-reduced-motion: reduce) {
  .js .mot-fluss :is(.fluss__aus, .fluss__kreuz, .fluss__weg-txt, .fluss__kn, .fluss__haken),
  .js .mot-strom :is(.strom__kasten, .strom__lager, .strom__band, .strom__liege,
                     .strom__arbeit, .strom__zeiger, .strom__fuss) {
    opacity: 1; animation: none;
  }
  .js .mot-fluss .fluss__weg { stroke-dashoffset: 0; animation: none; }
  .js .mot-fluss .fluss__kn circle { fill: var(--accent); animation: none; }
  .js .mot-strom :is(.strom__saege, .strom__zacke) { stroke-dashoffset: 0; animation: none; }
}

/* ---- Nutzen: Merkmale und Zahlentafel ------------------------------------
   Die Tafel ist der vorhandene Kachelbaustein, nur ruhiger: groessere
   Zahlen, weicherer Radius, derselbe Schatten wie bei den uebrigen Karten.
   Die Haarlinien dazwischen entstehen weiter aus dem 1px-Raster. */
.stats--tafel { border-radius: 14px; box-shadow: var(--shadow-1); }
.stats--tafel > div { padding: clamp(1.4rem, 1rem + 1.6vw, 2.1rem); }
.stats--tafel dd { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem); }
.stats--tafel .u { margin-top: .7rem; }

.merkmale { list-style: none; margin: 1.8rem 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
/* Eng genug, dass die drei nebeneinander in die Spalte passen. */
.merkmale li {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  background: var(--navy); border: 1px solid var(--navy); border-radius: 10px;
  padding: .6rem .8rem; font-size: .88rem; font-weight: 600; color: #fff;
  box-shadow: var(--shadow-1);
}
/* Limette auf Weiss traegt kaum; auf Navy ist sie die hellste Farbe. */
.merkmale svg { width: 19px; height: 19px; flex: none; color: var(--accent); stroke-width: 1.9; }
.js .merkmale.in li { animation: mot-rein .55s both cubic-bezier(.2,.8,.3,1); animation-delay: calc(var(--n) * .11s); }
@media (prefers-reduced-motion: reduce) {
  .js .merkmale.in li { animation: none; }
}

/* Die Kacheln laufen nacheinander ein. Bewusst keine hochzaehlenden Zahlen:
   sobald ein Browser die Seite drosselt, bliebe ein Zwischenwert stehen,
   und eine falsche Zahl ist schlimmer als keine Animation. */
.js .stats--tafel.in > div { animation: mot-rein .6s both cubic-bezier(.2,.8,.3,1); animation-delay: calc(var(--n) * .1s); }
@media (prefers-reduced-motion: reduce) {
  .js .stats--tafel.in > div { animation: none; }
}

/* ----------------- SAP-Entwicklung: der Kern und seine Anschluesse
   In der Mitte der SAP-Standard, darum sechs Erweiterungen, jede ueber
   einen definierten Anschlusspunkt angebunden. Erst steht der Kern, dann
   ziehen sich die Wege, dann erscheinen die Erweiterungen, und zuletzt
   leuchten die Anschluesse auf. Der Kern selbst aendert sich nie, das ist
   die Aussage. */
.mot-kern .kern__core rect { fill: var(--navy-lift); stroke: var(--accent); stroke-width: 2; }
.mot-kern .kern__core text {
  fill: var(--on-dark); font: 700 14px Archivo, sans-serif; letter-spacing: .03em;
}
.mot-kern .kern__weg {
  fill: none; stroke: var(--rule-ui-dark); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.mot-kern .kern__knoten rect { fill: none; stroke: var(--rule-dark); stroke-width: 1.4; }
.mot-kern .kern__knoten text {
  fill: var(--on-dark-2); font: 600 11.5px Archivo, sans-serif; letter-spacing: .02em;
}
.mot-kern .kern__port { fill: var(--rule-ui-dark); }

.js .mot-kern .kern__core   { opacity: 0; animation: mot-auf .6s .2s both; }
.js .mot-kern .kern__weg    { stroke-dasharray: 220; stroke-dashoffset: 220; }
.js .mot-kern .kern__knoten { opacity: 0; }
.js .mot-kern .kern__weg--1 { animation: mot-ziehen 1s .7s both ease-out; }
.js .mot-kern .kern__weg--2 { animation: mot-ziehen 1s .9s both ease-out; }
.js .mot-kern .kern__weg--3 { animation: mot-ziehen 1s 1.1s both ease-out; }
.js .mot-kern .kern__weg--4 { animation: mot-ziehen 1s 1.3s both ease-out; }
.js .mot-kern .kern__weg--5 { animation: mot-ziehen 1s 1.5s both ease-out; }
.js .mot-kern .kern__weg--6 { animation: mot-ziehen 1s 1.7s both ease-out; }
.js .mot-kern .kern__knoten--1 { animation: mot-auf .5s 1.3s both; }
.js .mot-kern .kern__knoten--2 { animation: mot-auf .5s 1.5s both; }
.js .mot-kern .kern__knoten--3 { animation: mot-auf .5s 1.7s both; }
.js .mot-kern .kern__knoten--4 { animation: mot-auf .5s 1.9s both; }
.js .mot-kern .kern__knoten--5 { animation: mot-auf .5s 2.1s both; }
.js .mot-kern .kern__knoten--6 { animation: mot-auf .5s 2.3s both; }
.js .mot-kern .kern__port--1 { animation: mot-knoten .45s 2.4s both; }
.js .mot-kern .kern__port--2 { animation: mot-knoten .45s 2.55s both; }
.js .mot-kern .kern__port--3 { animation: mot-knoten .45s 2.7s both; }
.js .mot-kern .kern__port--4 { animation: mot-knoten .45s 2.85s both; }
.js .mot-kern .kern__port--5 { animation: mot-knoten .45s 3s both; }
.js .mot-kern .kern__port--6 { animation: mot-knoten .45s 3.15s both; }
@media (prefers-reduced-motion: reduce) {
  .js .mot-kern :is(.kern__core, .kern__knoten) { opacity: 1; animation: none; }
  .js .mot-kern .kern__weg { stroke-dashoffset: 0; animation: none; }
  .js .mot-kern .kern__port { fill: var(--accent); animation: none; }
}