/* ==========================================================================
   LIVE-DEMO — Nachbau von app.freightpanel.de als laufende Aufnahme
   ==========================================================================

   Farben, Schrift und Masse stammen aus der Anwendung selbst
   (src/app/globals.css im App-Projekt) und aus einer Bildschirmaufnahme der
   echten Oberflaeche vom 9.10.2026. Alle Daten sind erfunden; Schiffsnamen
   sind oeffentliche AIS-Daten.

   AUFBAU

     .ld-buehne    sichtbarer Ausschnitt, feste Seitenverhaeltnisse
     .ld-kamera    skaliert und verschiebt — auf dem Telefon zoomt sie auf
                   den Teil, um den es gerade geht
     .ld-lw        die "Leinwand": 1280 x 820 logische Pixel, darin
                   Browserfenster, App, Mauszeiger

   Alles in der Leinwand ist in festen Pixeln gesetzt und wird als Ganzes
   skaliert. So sieht die App bei jeder Breite gleich aus — wie ein Video,
   nicht wie eine Seite, die umbricht.

   Die Variablen tragen das Praefix --l-, weil die Website eigene --ink,
   --brand und --line hat. Gleichnamige Variablen in .ld wuerden die Knoepfe
   der Website INNERHALB der Demo umfaerben (Endkarte).
   ========================================================================== */

.ld {
  --l-b: #2f6bff;
  --l-bi: #1e54e8;
  --l-bs: #eaf0ff;
  --l-ink: #12172b;
  --l-ink2: #272d45;
  --l-sl: #464c63;
  --l-sl2: #6b7288;
  --l-ln: #e7eaf3;
  --l-ps: #f1f4fb;
  --l-em: #0fb981;
  --l-emi: #07684a;
  --l-ems: #e7f8f1;
  --l-am: #f5a623;
  --l-ams: #fff6e6;
  --l-co: #ff7a45;
  --l-rot: #d92d20;
  --l-rots: #fdecec;
  --l-roti: #b42318;
  --l-idle: #f1f2f7;
  --l-sys: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --l-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --l-ease: cubic-bezier(.22, .9, .25, 1);
  position: relative;
}

/* ─── Buehne und Kamera ───────────────────────────────────────────────── */

.ld-buehne {
  position: relative;
  aspect-ratio: 1280 / 820;
  border-radius: 16px;
  overflow: hidden;
  background: #dfe5f2;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 50px 100px -40px rgba(18, 23, 43, .45),
    0 24px 50px -30px rgba(47, 107, 255, .35);
  isolation: isolate;
}

/* Der Schimmer dahinter: Ohne ihn steht ein grosses weisses Rechteck auf
   weissem Grund und die Kanten verschwinden.

   Seitlich NICHT ueber den Rand hinaus. Die erste Fassung stand 60 Pixel
   links und rechts ueber — auf dem Telefon machte das die ganze Seite 40
   Pixel breiter als den Bildschirm: Das Menue-Symbol war halb abgeschnitten,
   der Knopf in der unteren Leiste auch, und die Seite liess sich seitwaerts
   schieben. Die Breite des Scheins kommt jetzt aus dem Verlauf, nicht aus
   einem uebergrossen Kasten. */
.ld::before {
  content: "";
  position: absolute;
  inset: -40px 0 60px;
  background: radial-gradient(75% 60% at 50% 40%, rgba(47, 107, 255, .14), transparent 72%);
  z-index: -1;
  pointer-events: none;
}

.ld-kamera {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 820px;
  transform-origin: 0 0;
  transition: transform 1.1s var(--l-ease);
  will-change: transform;
}

.ld-lw {
  position: absolute;
  inset: 0;
  font-family: var(--l-sys);
  color: var(--l-ink);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  letter-spacing: normal;
  user-select: none;
}

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

/* Kein Uebergang im Standbild: Bei "Bewegung reduzieren" und beim Springen
   zwischen Kapiteln soll der Endzustand sofort stehen. */
.ld.ld-still .ld-lw *,
.ld.ld-still .ld-kamera { transition: none !important; animation: none !important; }

/* ─── Browserfenster ──────────────────────────────────────────────────── */

.ld-chrome {
  height: 40px;
  background: #e9edf5;
  border-bottom: 1px solid #d6dce8;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
}
.ld-ampel { display: flex; gap: 7px; }
.ld-ampel i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.ld-ampel i:nth-child(1) { background: #ff5f57; }
.ld-ampel i:nth-child(2) { background: #febc2e; }
.ld-ampel i:nth-child(3) { background: #28c840; }
.ld-tab {
  height: 30px;
  margin-top: 10px;
  align-self: flex-start;
  background: #fff;
  border-radius: 9px 9px 0 0;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--l-ink2);
  min-width: 200px;
}
.ld-tab b { width: 14px; height: 14px; border-radius: 4px; background: var(--l-b); display: grid; place-items: center; }
.ld-url {
  flex: 1;
  max-width: 560px;
  margin: 0 auto;
  height: 26px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #d6dce8;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-size: 12px;
  color: var(--l-sl2);
}
.ld-url svg { flex: none; }
.ld-url span { white-space: nowrap; overflow: hidden; }
.ld-url em { font-style: normal; color: var(--l-ink); }

/* ─── App-Rahmen ──────────────────────────────────────────────────────── */

.ld-app {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--l-ps);
  overflow: hidden;
}

.ld-kopf {
  height: 58px;
  background: #fff;
  border-bottom: 1px solid var(--l-ln);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 18px;
  position: relative;
  z-index: 3;
}
.ld-logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.ld-logo i { width: 26px; height: 26px; border-radius: 7px; background: var(--l-b); display: grid; place-items: center; }
.ld-mandant { padding-left: 16px; border-left: 1px solid var(--l-ln); color: var(--l-sl); font-size: 13px; }
.ld-nav { display: flex; gap: 2px; margin-left: auto; }
.ld-nav a {
  padding: 7px 11px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--l-sl);
  transition: background .25s, color .25s;
}
.ld-nav a.an { background: var(--l-bs); color: var(--l-bi); font-weight: 600; }
.ld-glocke { position: relative; color: var(--l-sl); display: grid; place-items: center; width: 32px; height: 32px; }
.ld-glocke b {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  border-radius: 99px;
  background: var(--l-b);
  color: #fff;
  font-size: 9px;
  display: grid;
  place-items: center;
  padding: 0 3px;
  transform: scale(0);
  transition: transform .35s var(--l-ease);
}
.ld-glocke b.an { transform: scale(1); }
.ld-ich { display: flex; align-items: center; gap: 9px; }
.ld-ich i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--l-bs);
  color: var(--l-bi);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.ld-ich div { line-height: 1.2; }
.ld-ich strong { display: block; font-size: 12.5px; }
.ld-ich small { font-size: 11px; color: var(--l-sl2); }

.ld-fenster {
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.ld-seite {
  padding: 22px 24px 40px;
  transition: transform 1s var(--l-ease), opacity .3s;
}
.ld-seite.weg { opacity: 0; }

/* ─── Bausteine der App ───────────────────────────────────────────────── */

.ld-h1 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin: 0; }
.ld-unter { color: var(--l-sl); font-size: 13px; margin-top: 2px; }
.ld-zeile { display: flex; align-items: center; gap: 10px; }
.ld-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.ld-knopf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--l-ln);
  background: #fff;
  color: var(--l-ink);
  white-space: nowrap;
  transition: transform .15s, background .25s, box-shadow .25s, border-color .25s;
}
.ld-knopf.p { background: var(--l-b); border-color: var(--l-b); color: #fff; }
.ld-knopf.d { background: var(--l-ink); border-color: var(--l-ink); color: #fff; }
.ld-knopf.g { border-color: transparent; background: transparent; color: var(--l-sl); }
.ld-knopf.druck { transform: scale(.95); }
.ld-suche {
  width: 260px;
  height: 34px;
  border: 1px solid var(--l-ln);
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--l-sl2);
  font-size: 12.5px;
}

.ld-karte {
  background: #fff;
  border: 1px solid var(--l-ln);
  border-radius: 14px;
}
.ld-kk { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px 0; }
.ld-kk h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
.ld-kk p { margin: 1px 0 0; font-size: 11.5px; color: var(--l-sl2); }
.ld-kk .ld-rechts { margin-top: -2px; }

.ld-mono { font-family: var(--l-mono); font-variant-numeric: tabular-nums; }

.ld-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ld-pill.b { background: var(--l-bs); color: var(--l-bi); }
.ld-pill.e { background: var(--l-ems); color: var(--l-emi); }
.ld-pill.r { background: var(--l-rots); color: var(--l-roti); }
.ld-pill.c { background: #fff0e8; color: #b2481a; }
.ld-pill.n { background: var(--l-idle); color: var(--l-sl); }
.ld-pill.a { background: var(--l-ams); color: #8a5a05; }

/* Kennzahlen */
.ld-kpis { display: grid; grid-template-columns: repeat(6, 1fr) 1.7fr; gap: 12px; margin-top: 18px; }
.ld-kpi { background: #fff; border: 1px solid var(--l-ln); border-radius: 14px; padding: 13px 14px; }
.ld-kpi svg { color: var(--l-b); }
.ld-kpi.c svg { color: var(--l-co); }
.ld-kpi strong { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; line-height: 1.1; }
.ld-kpi strong small { font-size: 12px; font-weight: 600; color: var(--l-sl2); margin-left: 4px; letter-spacing: 0; }
.ld-kpi span { font-size: 11.5px; color: var(--l-sl); }
.ld-kpi em { display: block; font-style: normal; font-family: var(--l-mono); font-size: 10px; color: var(--l-sl2); margin-top: 1px; }

/* Karte */
.ld-weltkarte { position: relative; margin: 14px 0 0; height: 300px; border-radius: 0 0 14px 14px; overflow: hidden; background: #cfdcec; }
.ld-weltkarte > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-schiff {
  position: absolute;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--l-b);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(18, 23, 43, .35);
  transition: left 1.2s linear, top 1.2s linear, transform .3s;
}
.ld-schiff.grau { background: #9aa3b8; }
.ld-schiff.ziel { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(47, 107, 255, .22), 0 2px 6px rgba(18, 23, 43, .35); }
.ld-zoom { position: absolute; left: 12px; top: 12px; display: grid; background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.ld-zoom b { width: 26px; height: 24px; display: grid; place-items: center; font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--l-ln); }
.ld-zoom b:last-child { border: 0; }
.ld-attr { position: absolute; right: 0; bottom: 0; background: rgba(255,255,255,.75); font-size: 9px; padding: 1px 6px; color: var(--l-sl2); }
.ld-schild {
  position: absolute;
  transform: translate(-50%, calc(-100% - 14px));
  background: #fff;
  border-radius: 10px;
  padding: 8px 11px;
  box-shadow: 0 10px 30px -10px rgba(18,23,43,.4);
  white-space: nowrap;
  font-size: 11.5px;
  opacity: 0;
  transition: opacity .3s, transform .3s var(--l-ease);
}
.ld-schild.an { opacity: 1; transform: translate(-50%, calc(-100% - 18px)); }
.ld-schild strong { display: block; font-size: 12px; }
.ld-schild span { color: var(--l-sl2); }

/* Sendungskarten nach Kunde */
.ld-gruppe { margin-top: 22px; }
.ld-gruppe-k { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.ld-gruppe-k strong { font-size: 14px; }
.ld-gruppe-k span { font-size: 11.5px; color: var(--l-sl2); }
.ld-gruppe-k a { margin-left: auto; font-size: 11.5px; color: var(--l-bi); text-decoration: underline; }
.ld-sk-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ld-sk { background: #fff; border: 1px solid var(--l-ln); border-radius: 14px; padding: 14px 16px; position: relative; overflow: hidden; }
.ld-sk.rot { background: #fffafa; border-color: #f4c6c2; }
.ld-sk.rot.puls { animation: ld-puls 1.6s ease-in-out infinite; }
@keyframes ld-puls { 50% { box-shadow: 0 0 0 5px rgba(217, 45, 32, .14); } }
.ld-sk-k { display: flex; gap: 6px; align-items: center; }
.ld-sk-k .ld-mono { margin-left: auto; font-size: 10.5px; color: var(--l-sl2); }
.ld-sk h4 { margin: 9px 0 1px; font-size: 14px; }
.ld-sk p { margin: 0; font-size: 11.5px; color: var(--l-sl2); display: flex; align-items: center; gap: 5px; }
.ld-sk-f { display: flex; gap: 22px; margin-top: 10px; }
.ld-sk-f div { font-size: 10px; color: var(--l-sl2); text-transform: uppercase; letter-spacing: .05em; }
.ld-sk-f b { display: block; font-size: 12px; color: var(--l-ink); font-family: var(--l-mono); text-transform: none; letter-spacing: 0; font-weight: 500; }
.ld-sk-eta { margin-top: 10px; font-size: 11px; color: var(--l-sl2); font-family: var(--l-mono); }
.ld-sk > svg.wm { position: absolute; right: 14px; bottom: 12px; color: #dfe4ef; }

/* Tabelle */
.ld-filter { display: flex; gap: 8px; margin-top: 16px; }
.ld-seg { display: flex; background: #fff; border: 1px solid var(--l-ln); border-radius: 10px; padding: 3px; gap: 2px; }
.ld-seg b { font-weight: 500; font-size: 12.5px; padding: 5px 10px; border-radius: 7px; color: var(--l-sl); }
.ld-seg b.an { background: var(--l-bs); color: var(--l-bi); font-weight: 600; }
.ld-tab-k { margin-top: 14px; background: #fff; border: 1px solid var(--l-ln); border-radius: 14px; overflow: hidden; }
.ld-tabelle { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ld-tabelle th { text-align: left; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--l-sl2); font-weight: 600; padding: 10px 12px; background: #fafbfe; border-bottom: 1px solid var(--l-ln); }
.ld-tabelle td { padding: 11px 12px; border-bottom: 1px solid var(--l-ln); white-space: nowrap; vertical-align: middle; }
.ld-tabelle tr:last-child td { border-bottom: 0; }
.ld-tabelle tr { transition: background .25s; }
.ld-tabelle tr.rot td { background: #fff6f5; }
.ld-tabelle tr.hover td { background: var(--l-bs); }
.ld-tabelle .r { text-align: right; }
.ld-tabelle a { color: var(--l-bi); font-weight: 600; }
.ld-tabelle small { display: block; font-family: var(--l-mono); font-size: 10.5px; color: var(--l-sl2); font-weight: 400; }
.ld-modus { display: inline-flex; align-items: center; gap: 5px; color: var(--l-sl); }
.ld-modus b { color: var(--l-ink); }

/* Skelett beim Seitenwechsel */
.ld-skelett { display: grid; gap: 12px; margin-top: 18px; }
.ld-skelett i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, #e6eaf3 0%, #f3f5fa 50%, #e6eaf3 100%); background-size: 200% 100%; animation: ld-schimmer 1s linear infinite; }
@keyframes ld-schimmer { to { background-position: -200% 0; } }

/* Sendungsseite */
.ld-zurueck { font-size: 12.5px; color: var(--l-sl); display: flex; align-items: center; gap: 6px; }
.ld-badges { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.ld-badges .ld-mono { font-size: 12px; color: var(--l-sl2); }
.ld-titel { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 0; }
.ld-fortschritt { margin-top: 16px; padding: 16px 18px; }
.ld-fs-k { display: flex; font-size: 13px; font-weight: 600; }
.ld-fs-k .ld-mono { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--l-sl2); }
.ld-balken { height: 7px; border-radius: 99px; background: #edf0f6; margin-top: 10px; overflow: hidden; position: relative; }
.ld-balken i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--l-bi), var(--l-b) 70%, #7aa0ff); transition: width 1.6s var(--l-ease); }
.ld-stufen { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 8px; font-size: 11px; color: var(--l-sl2); }
.ld-stufen b { color: var(--l-ink); }
.ld-reiter { display: flex; gap: 6px; margin-top: 16px; }
.ld-reiter b { font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 10px; color: var(--l-sl); transition: background .25s, color .25s; }
.ld-reiter b.an { background: var(--l-ink); color: #fff; }
.ld-zwei { display: grid; grid-template-columns: 1fr 330px; gap: 16px; margin-top: 12px; align-items: start; }
.ld-felder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 18px; padding: 14px 18px 16px; border-top: 1px solid var(--l-ln); margin-top: 14px; }
.ld-feld small { display: block; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--l-sl2); font-weight: 600; }
.ld-feld b { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; }
.ld-route { position: relative; height: 210px; border-top: 1px solid var(--l-ln); overflow: hidden; background: #cfdcec; border-radius: 0 0 14px 14px; }
.ld-route > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-route .weg { fill: none; stroke: var(--l-b); stroke-width: 1.6; stroke-dasharray: 4 3.5; opacity: .75; }
.ld-route .gefahren { fill: none; stroke: var(--l-b); stroke-width: 2; }
.ld-route .hafen { fill: #fff; stroke: var(--l-b); stroke-width: 1.4; }
.ld-route text { font-size: 7.5px; font-weight: 700; fill: var(--l-ink2); paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 2.5px; }

.ld-status { padding: 16px 18px; }
.ld-status h3 { margin: 0 0 12px; font-size: 14.5px; }
.ld-etikett { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--l-sl2); font-weight: 600; }
.ld-wahl { margin-top: 5px; height: 34px; border: 1px solid var(--l-ln); border-radius: 9px; display: flex; align-items: center; padding: 0 11px; font-size: 12.5px; }
.ld-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ld-chips b { font-size: 12px; font-weight: 500; padding: 6px 10px; border: 1px solid var(--l-ln); border-radius: 9px; }
.ld-chips b.an { border-color: var(--l-b); background: var(--l-bs); color: var(--l-bi); font-weight: 600; }

/* Nachrichten */
.ld-chat { display: flex; flex-direction: column; min-height: 380px; }
.ld-chat-k { padding: 14px 16px; border-bottom: 1px solid var(--l-ln); }
.ld-chat-k h3 { margin: 0; font-size: 14.5px; }
.ld-chat-k p { margin: 1px 0 0; font-size: 11.5px; color: var(--l-sl2); }
.ld-verlauf { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.ld-tag { text-align: center; font-size: 10.5px; color: var(--l-sl2); font-weight: 600; }
.ld-bl { max-width: 84%; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .45s var(--l-ease); }
.ld-bl.an { opacity: 1; transform: none; }
.ld-bl small { display: block; font-size: 10.5px; color: var(--l-sl2); margin-bottom: 3px; font-weight: 600; }
.ld-bl div { padding: 8px 12px; border-radius: 13px; font-size: 12.5px; line-height: 1.4; }
.ld-bl em { display: block; font-style: normal; font-family: var(--l-mono); font-size: 9.5px; color: var(--l-sl2); margin-top: 3px; }
.ld-bl.kunde div { background: var(--l-idle); border-top-left-radius: 4px; }
.ld-bl.wir { align-self: flex-end; text-align: right; }
.ld-bl.wir div { background: var(--l-b); color: #fff; text-align: left; border-top-right-radius: 4px; }
.ld-eingabe { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--l-ln); align-items: center; }
.ld-eingabe span { flex: 1; min-height: 34px; border: 1px solid var(--l-ln); border-radius: 99px; padding: 8px 14px; font-size: 12.5px; color: var(--l-sl2); }
.ld-eingabe span.voll { color: var(--l-ink); border-color: var(--l-b); }
.ld-eingabe i { width: 34px; height: 34px; border-radius: 50%; background: #b9ccff; display: grid; place-items: center; color: #fff; transition: background .25s; }
.ld-eingabe i.an { background: var(--l-b); }

/* Avis */
.ld-leer { margin: 14px 18px 16px; border: 1px dashed var(--l-ln); border-radius: 12px; padding: 16px; text-align: center; font-size: 12px; color: var(--l-sl2); }
.ld-avis { margin: 14px 18px 16px; border: 1px solid rgba(47,107,255,.3); background: rgba(234,240,255,.45); border-radius: 12px; padding: 13px 15px; display: flex; gap: 12px; }
.ld-avis > i { width: 32px; height: 32px; border-radius: 9px; background: var(--l-b); display: grid; place-items: center; color: #fff; flex: none; }
.ld-avis strong { font-size: 13.5px; display: block; }
.ld-avis p { margin: 3px 0 0; font-size: 12px; color: var(--l-sl); }
.ld-avis .lkw { display: inline-flex; gap: 6px; align-items: center; margin-top: 7px; background: #fff; border-radius: 8px; padding: 4px 9px; font-weight: 600; font-size: 12px; }
.ld-avis em { display: block; font-style: normal; font-family: var(--l-mono); font-size: 10.5px; color: var(--l-sl2); margin-top: 6px; }
.ld-formular { margin: 14px 18px 16px; border-top: 1px solid var(--l-ln); padding-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.ld-fz small { display: block; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--l-sl2); font-weight: 600; margin-bottom: 4px; }
.ld-fz span { display: block; height: 34px; border: 1px solid var(--l-ln); border-radius: 9px; padding: 8px 11px; font-size: 12.5px; transition: border-color .2s, box-shadow .2s; }
.ld-fz span.fokus { border-color: var(--l-b); box-shadow: 0 0 0 3px rgba(47,107,255,.15); }
.ld-fz.breit { grid-column: 1 / -1; }

/* Zoll */
.ld-hinweis-a { display: flex; gap: 9px; align-items: center; border-radius: 11px; padding: 10px 13px; font-size: 12px; background: var(--l-ams); border: 1px solid #f6dca8; color: #7a5404; margin: 12px 18px 0; transition: background .4s, border-color .4s, color .4s; }
.ld-hinweis-a.gut { background: var(--l-ems); border-color: #b8ead5; color: var(--l-emi); }
.ld-hs { margin: 12px 18px 16px; border: 1px solid var(--l-ln); background: #fafbfe; border-radius: 12px; padding: 14px; }
.ld-hs-z { display: grid; grid-template-columns: 170px 1fr; gap: 12px; }
.ld-geprueft { margin-top: 12px; border: 1px solid var(--l-ln); background: #fff; border-radius: 10px; padding: 10px 12px; font-size: 12px; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s var(--l-ease); }
.ld-geprueft.an { opacity: 1; transform: none; }
.ld-geprueft div { display: flex; gap: 7px; align-items: center; color: var(--l-sl2); font-size: 11px; }
.ld-geprueft div svg { color: var(--l-em); }
.ld-geprueft p { margin: 4px 0 0; font-size: 12.5px; }
.ld-suchfeld { margin-top: 12px; border: 1px solid var(--l-ln); background: #fff; border-radius: 10px; overflow: hidden; }
.ld-suchfeld > div:first-child { padding: 9px 12px; font-size: 12px; color: var(--l-sl); display: flex; gap: 7px; align-items: center; border-bottom: 1px solid var(--l-ln); }
.ld-suchfeld .ld-fz { padding: 10px 12px 4px; }
.ld-treffer { padding: 0 6px 6px; }
.ld-treffer div { padding: 7px 8px; border-radius: 8px; font-size: 12px; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .35s var(--l-ease), background .2s; }
.ld-treffer div.an { opacity: 1; transform: none; }
.ld-treffer div.hover { background: var(--l-bs); }
.ld-treffer b { font-family: var(--l-mono); font-size: 12px; display: block; }
.ld-treffer span { color: var(--l-sl); }
.ld-position { display: flex; gap: 14px; align-items: center; margin: 12px 18px 16px; padding: 12px 14px; border: 1px solid #b8ead5; background: var(--l-ems); border-radius: 12px; font-size: 12.5px; }
.ld-position b { font-family: var(--l-mono); font-size: 13px; }

/* Dokumente */
.ld-doks { padding: 4px 18px 16px; }
.ld-dok { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--l-ln); border-radius: 11px; margin-top: 9px; font-size: 13px; transition: background .4s, border-color .4s; position: relative; overflow: hidden; }
.ld-dok > svg { color: var(--l-sl2); flex: none; }
.ld-dok strong { font-weight: 600; }
.ld-dok .fehlt { font-size: 10.5px; color: #b2481a; background: #fff0e8; border-radius: 99px; padding: 2px 7px; font-weight: 600; }
.ld-dok .ld-rechts { color: var(--l-sl); font-size: 12px; font-weight: 600; gap: 6px; }
.ld-dok.ziel { border-color: var(--l-b); background: var(--l-bs); }
.ld-dok.da { border-color: #b8ead5; background: #f6fdf9; }
.ld-dok .datei { display: block; font-size: 11px; color: var(--l-sl2); font-weight: 400; }
.ld-dok .lade { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--l-b); transition: width 1.1s var(--l-ease); }
.ld-pdf {
  position: absolute;
  width: 150px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 40px -14px rgba(18,23,43,.45);
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  z-index: 8;
  transition: left 1s var(--l-ease), top 1s var(--l-ease), opacity .3s, transform .3s;
  transform: rotate(-4deg);
}
.ld-pdf i { width: 26px; height: 32px; border-radius: 4px; background: #e5484d; color: #fff; font-style: normal; font-size: 8px; font-weight: 800; display: grid; place-items: end center; padding-bottom: 4px; flex: none; }
.ld-pdf small { display: block; font-weight: 400; color: var(--l-sl2); font-size: 10px; }
.ld-popover { position: absolute; width: 260px; background: #fff; border: 1px solid var(--l-ln); border-radius: 12px; box-shadow: 0 24px 50px -20px rgba(18,23,43,.4); padding: 12px; z-index: 7; opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .35s var(--l-ease); }
.ld-popover.an { opacity: 1; transform: none; }
.ld-popover h5 { margin: 0 0 8px; font-size: 12.5px; }
.ld-popover label { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 5px 2px; }
.ld-popover label i { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--l-b); background: var(--l-b); display: grid; place-items: center; }
.ld-popover .ld-knopf { margin-top: 8px; width: 100%; justify-content: center; }

/* Marge */
.ld-summen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px 18px 0; }
.ld-summe { border: 1px solid var(--l-ln); background: var(--l-ps); border-radius: 12px; padding: 12px 14px; }
.ld-summe small { display: block; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--l-sl2); font-weight: 600; }
.ld-summe strong { display: block; font-family: var(--l-mono); font-size: 19px; margin-top: 4px; letter-spacing: -.02em; }
.ld-summe strong em { font-style: normal; font-size: 12px; color: var(--l-sl); font-weight: 500; margin-left: 6px; }
.ld-summe > span { font-size: 11px; color: var(--l-sl2); }
.ld-summe.gut { background: var(--l-ems); border-color: #b8ead5; }
.ld-erfasst { margin: 12px 18px 0; display: flex; gap: 9px; align-items: center; border: 1px solid #b8ead5; background: var(--l-ems); color: var(--l-emi); border-radius: 11px; padding: 10px 13px; font-size: 12.5px; font-weight: 600; opacity: 0; transition: opacity .4s; }
.ld-erfasst.an { opacity: 1; }
.ld-erfasst span { color: var(--l-sl); font-weight: 400; font-size: 11.5px; }
.ld-geheim { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; font-weight: 600; color: var(--l-sl); background: var(--l-idle); border-radius: 99px; padding: 4px 10px; }
.ld-einkauf td { opacity: 0; transition: opacity .35s; }
.ld-einkauf tr.an td { opacity: 1; }

/* Kunden */
.ld-kunden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.ld-kunde { background: #fff; border: 1px solid var(--l-ln); border-radius: 14px; padding: 16px 18px; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--l-ease); }
.ld-kunde.an { opacity: 1; transform: none; }
.ld-kunde-k { display: flex; gap: 10px; align-items: center; }
.ld-kunde-k i { width: 34px; height: 34px; border-radius: 9px; background: var(--l-bs); display: grid; place-items: center; color: var(--l-b); flex: none; font-style: normal; font-weight: 700; font-size: 12px; }
.ld-kunde-k strong { font-size: 13.5px; display: block; }
.ld-kunde-k span { font-size: 11px; color: var(--l-sl2); }
.ld-kunde-f { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ld-kunde a { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--l-bi); text-decoration: underline; }
.ld-portal { color: var(--l-emi) !important; }

/* In der App: Meldungen unten rechts */
.ld-toasts { position: absolute; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 9; }
.ld-toast {
  background: var(--l-ink);
  color: #fff;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 12.5px;
  display: flex;
  gap: 10px;
  align-items: center;
  box-shadow: 0 20px 40px -18px rgba(18,23,43,.6);
  transform: translateY(14px);
  opacity: 0;
  transition: transform .45s var(--l-ease), opacity .3s;
}
.ld-toast.an { transform: none; opacity: 1; }
.ld-toast i { width: 22px; height: 22px; border-radius: 50%; background: var(--l-em); display: grid; place-items: center; flex: none; }
.ld-toast small { display: block; opacity: .7; font-size: 11px; }

/* ─── Sendungsdaten, Container, Notiz, Aufgaben, Link ─────────────────── */

.ld-felder-3 { grid-template-columns: repeat(3, 1fr); border-top: 0; margin-top: 4px; }
.ld-feld { border-radius: 8px; transition: background .4s, box-shadow .4s; }
.ld-feld.hell { background: var(--l-bs); box-shadow: 0 0 0 6px var(--l-bs); }
.ld-cont { margin: 12px 18px 16px; border: 1px solid var(--l-ln); border-radius: 12px; padding: 12px 14px; }
.ld-cont-k { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.ld-cont-f { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 14px; margin-top: 10px; }
.ld-chip-hilfe { margin: 8px 0 0; font-size: 10.5px; line-height: 1.45; color: var(--l-sl2); }

.ld-editor { margin: 12px 18px 0; border: 1px solid var(--l-ln); border-radius: 11px; overflow: hidden; }
.ld-leiste { display: flex; gap: 4px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--l-ln); background: var(--l-ps); font-size: 11.5px; color: var(--l-sl); }
.ld-leiste > * { padding: 3px 7px; border-radius: 6px; font-style: normal; }
.ld-leiste i { font-style: italic; font-family: Georgia, serif; }
.ld-leiste .farbe { display: flex; gap: 4px; margin-left: auto; }
.ld-leiste .farbe u { width: 11px; height: 11px; border-radius: 50%; background: var(--l-rot); }
.ld-leiste .farbe u + u { background: var(--l-b); }
.ld-leiste .farbe u + u + u { background: var(--l-em); }
.ld-notiz-text { min-height: 66px; padding: 11px 13px; font-size: 12.5px; line-height: 1.55; transition: box-shadow .2s; }
.ld-notiz-text.fokus { box-shadow: inset 0 0 0 2px rgba(47,107,255,.35); }
.ld-notiz-text .ph { color: var(--l-sl2); }
.ld-notiz-f { padding: 12px 18px 16px; display: flex; align-items: center; gap: 10px; }
.ld-gespeichert { font-size: 11px; color: var(--l-emi); font-family: var(--l-mono); }

.ld-kk-linie { padding-bottom: 14px; border-bottom: 1px solid var(--l-ln); align-items: center; }
.ld-kk-linie > svg { color: var(--l-b); }
.ld-aufg-leer { margin: 0; padding: 22px 30px; text-align: center; font-size: 12px; color: var(--l-sl2); line-height: 1.5; }
.ld-aufg-form { padding: 14px 18px 16px; background: rgba(241,244,251,.6); }
.ld-aufg-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ld-select { position: relative; background: #fff; }
.ld-select::after { content: ''; position: absolute; right: 12px; top: 13px; width: 6px; height: 6px; border-right: 1.5px solid var(--l-sl2); border-bottom: 1.5px solid var(--l-sl2); transform: rotate(45deg); }
.ld-fz span.ld-select { background: #fff; }
.ld-optionen { position: absolute; left: -1px; right: -1px; top: 36px; background: #fff; border: 1px solid var(--l-ln); border-radius: 10px; box-shadow: 0 18px 36px -16px rgba(18,23,43,.35); padding: 4px; z-index: 4; }
.ld-optionen b { display: block; font-weight: 500; padding: 7px 9px; border-radius: 7px; font-size: 12.5px; }
.ld-optionen b.hover { background: var(--l-b); color: #fff; }
.ld-aufg { display: flex; align-items: center; gap: 12px; padding: 13px 18px; font-size: 13px; animation: ld-rein .45s var(--l-ease); }
.ld-aufg > i.box { width: 17px; height: 17px; padding: 0; margin: 0; background: #fff; border-radius: 5px; border: 1.6px solid #c4cad8; flex: none; }
.ld-aufg strong { display: block; font-weight: 600; }
.ld-aufg span:not(.ld-pill) { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--l-sl2); margin-top: 2px; }
.ld-aufg .ld-pill { margin-left: auto; }
@keyframes ld-rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ld-link { margin-top: 14px; border: 1px solid var(--l-ln); background: rgba(241,244,251,.6); border-radius: 11px; padding: 13px 16px; }
.ld-link .t { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.ld-link .t svg { color: var(--l-b); }
.ld-link .s { margin: 5px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--l-sl2); }
.ld-link .s strong { color: var(--l-sl); }
.ld-link .ld-knopf { margin-top: 10px; background: #fff; }
.ld-link-z { display: flex; gap: 8px; align-items: center; margin-top: 9px; animation: ld-rein .45s var(--l-ease); }
.ld-link-z code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #fff; border: 1px solid var(--l-ln); border-radius: 8px; padding: 8px 11px; font-size: 11.5px; }
.ld-link-z .ld-knopf { margin-top: 0; }
.ld-link-a { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--l-sl); }
.ld-link-a span { display: flex; align-items: center; gap: 5px; }

/* ─── Glocke und Meldungen ────────────────────────────────────────────── */

.ld-glocke.klingel svg { animation: ld-klingel .9s ease-in-out 2; transform-origin: 50% 10%; }
@keyframes ld-klingel { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
.ld-meldungen { position: absolute; width: 340px; background: #fff; border: 1px solid var(--l-ln); border-radius: 14px; box-shadow: 0 30px 60px -24px rgba(18,23,43,.45); z-index: 8; overflow: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .35s var(--l-ease); }
.ld-meldungen.an { opacity: 1; transform: none; }
.ld-meld-k { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px 10px; border-bottom: 1px solid var(--l-ln); }
.ld-meld-k b { font-size: 13.5px; }
.ld-meld-k span { font-size: 11px; color: var(--l-bi); }
.ld-meld { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--l-ln); transition: background .2s; }
.ld-meld:last-child { border-bottom: 0; }
.ld-meld > i { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex: none; }
.ld-meld.neu { background: #f7f9ff; }
.ld-meld.neu > i { background: var(--l-b); }
.ld-meld.hover { background: var(--l-bs); }
.ld-meld strong { display: block; font-size: 12.5px; }
.ld-meld span { display: block; font-size: 11.5px; color: var(--l-sl); margin-top: 1px; }
.ld-meld em { display: block; font-style: normal; font-size: 10.5px; color: var(--l-sl2); margin-top: 3px; font-family: var(--l-mono); }

/* ─── Dialoge der App ─────────────────────────────────────────────────── */

.ld-dialog-bg { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; background: rgba(18,23,43,.32); display: grid; place-items: center; z-index: 8; opacity: 0; transition: opacity .3s; }
.ld-dialog-bg.an { opacity: 1; }
.ld-dialog { width: 520px; background: #fff; border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(18,23,43,.5); transform: translateY(10px) scale(.98); transition: transform .4s var(--l-ease); }
.ld-dialog-bg.an .ld-dialog { transform: none; }
.ld-dialog-k { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 15px; border-bottom: 1px solid var(--l-ln); }
.ld-dialog-k h4 { margin: 0; font-size: 15.5px; }
.ld-dialog-k i { color: var(--l-sl); display: grid; }
.ld-dialog-i { padding: 16px 22px 20px; }
.ld-dialog-i > p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--l-sl); }
.ld-dialog-warn { margin: 0 0 10px; border-radius: 10px; border: 1px solid #f6dca8; background: var(--l-ams); color: #8a5a05; font-size: 12.5px; line-height: 1.5; padding: 10px 12px; }
.ld-dialog-f { display: flex; gap: 8px; margin-top: 16px; }
.ld-cbs { margin-top: 6px; }
.ld-cb { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 0; }
.ld-cb i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #b9c0d0; display: grid; place-items: center; color: transparent; transition: background .2s, border-color .2s, color .2s; }
.ld-cb.an i { background: var(--l-b); border-color: var(--l-b); color: #fff; }
.ld-textfeld { margin-top: 6px; border: 1px solid var(--l-ln); border-radius: 10px; min-height: 58px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5; transition: border-color .2s, box-shadow .2s; }
.ld-textfeld.fokus { border-color: var(--l-b); box-shadow: 0 0 0 3px rgba(47,107,255,.15); }
.ld-textfeld .ph { color: var(--l-sl2); }

/* ─── Zeitsprung und Kundenmail ───────────────────────────────────────── */

.ld-sprung { position: absolute; left: 50%; top: 470px; transform: translate(-50%, 10px); z-index: 8; background: var(--l-ink); color: #fff; border-radius: 16px; padding: 16px 26px; text-align: center; box-shadow: 0 30px 60px -20px rgba(18,23,43,.6); opacity: 0; transition: opacity .35s, transform .45s var(--l-ease); }
.ld-sprung.an { opacity: 1; transform: translate(-50%, 0); }
.ld-sprung small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9db7ff; font-weight: 700; }
.ld-sprung strong { display: block; font-size: 16px; margin-top: 4px; }

.ld-mail { position: absolute; right: 40px; top: 150px; width: 430px; background: #fff; border: 1px solid var(--l-ln); border-radius: 16px; box-shadow: 0 40px 80px -28px rgba(18,23,43,.5); z-index: 8; overflow: hidden; opacity: 0; transform: translateX(30px); transition: opacity .35s, transform .5s var(--l-ease); }
.ld-mail.an { opacity: 1; transform: none; }
.ld-mail-k { display: flex; gap: 10px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--l-ln); }
.ld-mail-k > i { width: 30px; height: 30px; border-radius: 50%; background: var(--l-bs); color: var(--l-b); display: grid; place-items: center; flex: none; }
.ld-mail-k b { display: block; font-size: 13px; }
.ld-mail-k small { font-size: 11px; color: var(--l-sl2); }
.ld-mail-b { padding: 11px 16px 0; font-size: 14px; font-weight: 700; }
.ld-mail-i { margin: 12px 16px 16px; border: 1px solid var(--l-ln); border-radius: 12px; padding: 16px 18px; background: var(--l-ps); }
.ld-mail-i h4 { margin: 0 0 8px; font-size: 15px; }
.ld-mail-i p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.55; color: var(--l-sl); }
.ld-mail-i span { display: inline-block; margin-top: 4px; background: var(--l-b); color: #fff; border-radius: 9px; padding: 8px 14px; font-size: 12px; font-weight: 600; }

/* Mauszeiger */
.ld-maus {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  z-index: 20;
  pointer-events: none;
  transition: transform .75s cubic-bezier(.45, .05, .2, 1), opacity .3s;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.28));
}
.ld-maus .welle { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--l-b); opacity: 0; }
.ld-maus.klick .welle { animation: ld-welle .5s ease-out; }
.ld-maus.klick svg { transform: scale(.86); }
.ld-maus svg { transition: transform .12s; transform-origin: 2px 2px; }
@keyframes ld-welle { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(2.2); } }

/* ─── Hinweise ueber der Buehne (in Bildschirmgroesse, nicht skaliert) ─── */

.ld-hinweise { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.ld-hw {
  position: absolute;
  max-width: 290px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(47, 107, 255, .18);
  border-radius: 14px;
  padding: 12px 14px 12px 12px;
  display: flex;
  gap: 11px;
  box-shadow: 0 24px 50px -22px rgba(18, 23, 43, .5), 0 2px 6px rgba(18,23,43,.06);
  font-family: var(--font-body, var(--l-sys));
  opacity: 0;
  transform: translateY(8px) scale(.97);
  transition: opacity .35s, transform .5s var(--l-ease);
}
.ld-hw.an { opacity: 1; transform: none; }
.ld-hw > i { width: 30px; height: 30px; border-radius: 9px; background: var(--l-b); color: #fff; display: grid; place-items: center; flex: none; }
.ld-hw strong { display: block; font-size: 14px; color: var(--l-ink); line-height: 1.25; letter-spacing: -.005em; }
.ld-hw span { display: block; font-size: 12.5px; color: var(--l-sl); line-height: 1.4; margin-top: 3px; }

/* ─── Endkarte ────────────────────────────────────────────────────────── */

.ld-ende {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(241, 244, 251, .74);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s, visibility 0s .6s;
}
.ld-ende.an { opacity: 1; visibility: visible; transition: opacity .6s; }
.ld-ende-k {
  max-width: 560px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line, #e7eaf3);
  border-radius: 20px;
  padding: 30px 32px 26px;
  box-shadow: 0 40px 80px -40px rgba(18, 23, 43, .55);
  transform: translateY(14px) scale(.98);
  transition: transform .7s var(--l-ease);
}
.ld-ende.an .ld-ende-k { transform: none; }
.ld-ende img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 12px; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line, #e7eaf3); }
.ld-ende h3 { font-family: var(--font-display, var(--l-sys)); font-size: 25px; line-height: 1.2; letter-spacing: -.02em; margin: 0; color: var(--ink, #12172b); }
.ld-ende p { margin: 10px auto 0; max-width: 430px; color: var(--slate, #464c63); font-size: 15px; line-height: 1.5; }
.ld-ende-knoepfe { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.ld-ende small { display: block; margin-top: 14px; font-size: 12.5px; color: var(--slate, #464c63); }

/* ─── Unter der Buehne: Kapitel und Text ──────────────────────────────── */

.ld-unten { margin-top: 22px; }
.ld-kapitel { display: grid; grid-template-columns: repeat(9, 1fr) auto; gap: 8px; align-items: end; }
.ld-kap {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--slate, #464c63);
}
.ld-kap span { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.ld-kap i { display: block; height: 4px; border-radius: 99px; background: var(--line, #e7eaf3); overflow: hidden; position: relative; }
.ld-kap i b { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brand, #2f6bff); border-radius: 99px; }
.ld-kap.fertig i b { width: 100%; }
.ld-kap.an span { color: var(--ink, #12172b); }
.ld-kap:hover span { color: var(--brand, #2f6bff); }
.ld-kap:focus-visible { outline: 2px solid var(--brand, #2f6bff); outline-offset: 4px; border-radius: 4px; }
.ld-pp {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line, #e7eaf3);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink, #12172b);
  margin-left: 6px;
}
.ld-pp:hover { border-color: var(--brand, #2f6bff); color: var(--brand, #2f6bff); }
.ld-text { margin-top: 18px; min-height: 76px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.ld-text b.nr { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--brand, #2f6bff); background: var(--brand-soft, #eaf0ff); border-radius: 8px; padding: 6px 9px; }
.ld-text h3 { font-family: var(--font-display, inherit); font-size: 21px; letter-spacing: -.015em; margin: 0; color: var(--ink, #12172b); line-height: 1.25; }
.ld-text p { margin: 5px 0 0; font-size: 15px; color: var(--slate, #464c63); line-height: 1.55; max-width: 720px; }
.ld-text > div { transition: opacity .35s, transform .45s var(--l-ease); }
.ld-text.wechsel > div { opacity: 0; transform: translateY(6px); }

/* ─── Telefon ─────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* Quadratischer Ausschnitt: Die Kamera zoomt auf den Teil, um den es geht.
     Die ganze App auf 350 Pixel Breite waere eine Briefmarke. */
  .ld-buehne { aspect-ratio: 3 / 4; border-radius: 14px; }
  .ld-kapitel { grid-template-columns: repeat(9, 1fr) auto; gap: 5px; }
  .ld-kap span { display: none; }
  .ld-text h3 { font-size: 18px; }
  .ld-text p { font-size: 14px; }
  .ld-ende-k { padding: 22px 18px 18px; }
  .ld-ende h3 { font-size: 20px; }
  .ld-ende p { font-size: 13.5px; }
  .ld-ende img { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .ld .ld-kamera, .ld .ld-lw * { transition: none !important; animation: none !important; }
}

/* ─── Aufforderung unter der Demo ─────────────────────────────────────── */

/* Nicht erst am Ende der Demo: Wer nach dem dritten Kapitel ueberzeugt ist,
   soll nicht vier weitere abwarten muessen, um einen Termin zu buchen. */
.ld-cta {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  padding: 20px 24px;
  border-radius: 16px;
  background: linear-gradient(120deg, var(--brand-soft, #eaf0ff), #fff 70%);
  border: 1px solid rgba(47, 107, 255, .16);
}
.ld-cta p { margin: 0; font-size: 15.5px; color: var(--slate, #464c63); line-height: 1.5; max-width: 640px; }
.ld-cta p b { color: var(--ink, #12172b); }
.ld-cta .btn { flex: none; }
.ld-ohne-js { padding: 30px; text-align: center; background: var(--paper-soft, #f4f6fb); border-radius: 16px; }

@media (max-width: 760px) {
  .ld-cta { flex-direction: column; align-items: stretch; text-align: left; padding: 18px; }
  .ld-cta .btn { justify-content: center; }
}
.ld-cta p a { color: var(--brand, #2f6bff); text-decoration: underline; text-underline-offset: 2px; }

/* "Noch einmal ansehen" als leiser Link unter den zwei Knoepfen — drei gleich
   grosse Knoepfe nebeneinander nehmen dem wichtigsten die Wirkung. */
.ld-nochmal { display: block; margin: 12px auto 0; background: none; border: 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--l-sl, #464c63); cursor: pointer; }
.ld-nochmal:hover { color: var(--l-b, #2f6bff); }


/* ══════════════════════════════════════════════════════════════════════════
   TELEFON: die App als Telefon-App (.ld-mobil, gesetzt von live-demo.js)

   Leinwand 420 Pixel breit, alles einspaltig — wie die echte Anwendung auf
   dem Telefon. Nichts wird abgeschnitten; was nicht ins Bild passt, scrollt
   die Demo hinein. Die Klasse kommt aus dem Skript und nicht aus einer
   Medienabfrage, weil Skript und Gestaltung sich auf DIESELBE Entscheidung
   verlassen muessen: Misst das Skript 420 Pixel Leinwand, muss die App auch
   einspaltig stehen.
   ══════════════════════════════════════════════════════════════════════════ */
.ld-mobil .ld-chrome { display: none; }
.ld-mobil .ld-app { top: 0; }
.ld-mobil .ld-dialog-bg { top: 0; }
.ld-mobil .ld-kopf { padding: 0 12px; gap: 10px; height: 54px; }
.ld-mobil .ld-fenster { top: 54px; }
.ld-mobil .ld-logo { font-size: 0; gap: 0; }
.ld-mobil .ld-mandant, .ld-mobil .ld-ich div { display: none; }
.ld-mobil .ld-nav { margin-left: 4px; gap: 0; }
.ld-mobil .ld-nav a { display: none; padding: 6px 8px; font-size: 12.5px; }
.ld-mobil .ld-nav a[data-nav="Übersicht"], .ld-mobil .ld-nav a[data-nav="Sendungen"], .ld-mobil .ld-nav a[data-nav="Kunden"] { display: block; }
.ld-mobil .ld-glocke { margin-left: auto; }
.ld-mobil .ld-seite { padding: 14px 12px 30px; }

/* Kopfzeilen der Seiten: Ueberschrift ueber den Knoepfen */
.ld-mobil .ld-zeile { flex-wrap: wrap; row-gap: 10px; }
.ld-mobil .ld-zeile .ld-suche, .ld-mobil .ld-zeile .ld-knopf:not(.p) { display: none; }
.ld-mobil .ld-zeile .ld-rechts .ld-knopf.g { display: inline-flex; }
.ld-mobil .ld-h1 { font-size: 20px; }
.ld-mobil .ld-titel { font-size: 23px; }

/* Uebersicht */
.ld-mobil .ld-kpis { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ld-mobil .ld-kpis > :last-child { grid-column: 1 / -1; }
.ld-mobil .ld-kpi { padding: 10px 11px; }
.ld-mobil .ld-kpi strong { font-size: 20px; }
.ld-mobil .ld-weltkarte { height: auto !important; aspect-ratio: 520 / 205; }
.ld-mobil .ld-sk-raster { grid-template-columns: 1fr; }
.ld-mobil .ld-kk { padding: 14px 14px 0; }
.ld-mobil .ld-kk p { font-size: 11px; }

/* Sendungsliste: Sendung, ETA, Status */
.ld-mobil .ld-filter { flex-wrap: wrap; }
.ld-mobil .ld-filter .ld-seg:nth-child(n+3) { display: none; }
.ld-mobil .ld-tabelle th:nth-child(n+2):nth-child(-n+7),
.ld-mobil .ld-tabelle td:nth-child(n+2):nth-child(-n+7) { display: none; }

/* Sendung */
.ld-mobil .ld-stufen { font-size: 8.5px; }
.ld-mobil .ld-reiter { flex-wrap: wrap; gap: 4px; }
.ld-mobil .ld-reiter b { font-size: 12px; padding: 6px 10px; }
/* minmax(0, 1fr) statt 1fr: Sonst drueckt der laengste Text (die AIS-Zeile)
   die Spalte auf 485 Pixel, und rechts wird auf dem Telefon abgeschnitten. */
.ld-mobil .ld-zwei { grid-template-columns: minmax(0, 1fr); }
.ld-mobil .ld-zwei > * { min-width: 0; }
.ld-mobil .ld-felder, .ld-mobil .ld-felder-3 { grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 12px 14px 14px; }
.ld-mobil .ld-felder .ld-feld[style*="span 2"] { grid-column: span 2; }
.ld-mobil .ld-route { height: auto !important; aspect-ratio: 480 / 210; }
.ld-mobil .ld-cont { margin: 12px 14px 14px; }
.ld-mobil .ld-cont-f { grid-template-columns: 1fr 1fr; }
.ld-mobil .ld-formular { margin: 12px 14px 14px; grid-template-columns: 1fr 1fr; }
.ld-mobil .ld-editor { margin: 12px 14px 0; }
.ld-mobil .ld-notiz-f { padding: 12px 14px 14px; }
.ld-mobil .ld-aufg-leer { padding: 18px 16px; }
.ld-mobil .ld-hs-z { grid-template-columns: 1fr; }
.ld-mobil .ld-summen { grid-template-columns: 1fr; padding: 12px 14px 0; gap: 8px; }
.ld-mobil .ld-einkauf th:nth-child(2), .ld-mobil .ld-einkauf td:nth-child(2),
.ld-mobil .ld-einkauf th:nth-child(3), .ld-mobil .ld-einkauf td:nth-child(3) { display: none; }
.ld-mobil .ld-kunden { grid-template-columns: 1fr; }
.ld-mobil .ld-doks { padding: 4px 14px 14px; }
.ld-mobil .ld-geheim { display: none; }

/* Einblendungen */
.ld-mobil .ld-dialog { width: calc(100% - 20px); }
.ld-mobil .ld-dialog-k { padding: 14px 16px 12px; }
.ld-mobil .ld-dialog-i { padding: 12px 16px 16px; }
.ld-mobil .ld-cb { padding: 4px 0; }
/* Unter der Bestaetigung oben, ueber dem Untertitel unten. */
.ld-mobil .ld-mail { left: 10px; right: 10px; width: auto; top: 118px; }
.ld-mobil .ld-sprung { top: 38%; width: calc(100% - 30px); padding: 14px 16px; }
.ld-mobil .ld-sprung strong { font-size: 14px; }
.ld-mobil .ld-meldungen { width: 340px; }
/* Oben, weil unten der Untertitel steht. */
.ld-mobil .ld-toasts { right: 10px; left: 10px; top: 64px; bottom: auto; }

/* Finger statt Mauszeiger */
.ld-mobil .ld-maus svg { display: none; }
.ld-mobil .ld-maus::before { content: ""; position: absolute; left: -11px; top: -11px; width: 30px; height: 30px; border-radius: 50%; background: rgba(47, 107, 255, .22); border: 2px solid rgba(47, 107, 255, .55); }

/* Erklaerungen als Untertitel unten */
.ld-hw.ld-hw-unten { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 10px 12px; border-radius: 12px; }
.ld-hw.ld-hw-unten > i { width: 26px; height: 26px; border-radius: 8px; }
.ld-hw.ld-hw-unten strong { font-size: 13px; }
.ld-hw.ld-hw-unten span { font-size: 12px; }

/* ─── Kurier: zur Seefracht und als eigene Sendung ────────────────────── */
.ld-kurier-z { display: flex; align-items: center; gap: 12px; padding: 13px 18px; animation: ld-rein .45s var(--l-ease); }
.ld-kurier-z .art { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--l-bi); width: 128px; flex: none; }
.ld-kurier-z .was { flex: 1; min-width: 0; font-size: 13px; }
.ld-kurier-z .was span { color: var(--l-sl2); }
.ld-kurier-z .was small { display: block; font-size: 11px; color: var(--l-sl2); margin-top: 1px; }
.ld-verfolgen { background: var(--l-bs); border-color: transparent; color: var(--l-bi); flex: none; }
.ld-verfolgen.druck { background: var(--l-b); color: #fff; transform: none; }
.ld-chips[data-ns-modus] b { cursor: default; }
.ld-ns-pakete { margin: 0 18px 14px; border: 1px dashed var(--l-ln); border-radius: 12px; padding: 12px 14px; display: none; }
.ld-ns-pakete.an { display: block; animation: ld-rein .45s var(--l-ease); }
.ld-ns-paket { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 10px; align-items: end; margin-top: 10px; }
.ld-ns-paket .nr { font-size: 11.5px; font-weight: 600; color: var(--l-sl2); padding-bottom: 9px; }
.ld-tabelle tr.neu td { background: var(--l-ems); }

.ld-mobil .ld-kurier-z { flex-wrap: wrap; padding: 12px 14px; }
.ld-mobil .ld-kurier-z .art { width: auto; }
.ld-mobil .ld-kurier-z .was { flex-basis: 100%; }
.ld-mobil .ld-ns-pakete { margin: 0 14px 12px; }
.ld-mobil .ld-ns-paket { grid-template-columns: 1fr 1fr; }
.ld-mobil .ld-ns-paket .nr { grid-column: 1 / -1; padding-bottom: 0; }