/*
 * pilanda_theme_app.css — der angewandte Reskin-Layer des Pilanda-Themes.
 *
 * Wohnt jetzt in pilanda_theme (Theme = SSOT fuer alles Visuelle).
 * Wird via app_include_css + web_include_css ueber Desk und Web
 * gestuelpt, NACH pilanda_theme_tokens.css/_fonts.css — die --pp-*-
 * Tokens sind also bereits da, wenn diese Datei sie referenziert.
 * Frueher: pilanda/public/css/pilanda.css (verschoben 15.06.2026).
 *
 * Used by every Pilanda app that needs the shell (umbrella public
 * landing /pilanda, the Desk page /app/pilanda-home, the PLS landing
 * /pls, and any future module landing). Sub-apps point at this
 * stylesheet directly via /assets/pilanda_theme/css/pilanda_theme_app.css
 * — there is no per-app CSS anymore.
 *
 * Sections:
 *   1. Tokens + base
 *   2. App shell (sidebar / topbar / main)
 *   3. Sidebar
 *   4. Topbar
 *   5. Hero
 *   6. Zone + card grid
 *   7. PLS extensions (KPI cards + tables + status pills)
 *   8. Footer + states
 *   9. Responsive
 */

/* ============================================================== *
 * 1. Tokens + base                                                *
 * ============================================================== */
:root {
  /* ── HEX→OKLCH-Migration (16.06.2026) ───────────────────────────
   * Die frueheren --pilanda-Farb-Aliase (accent/success/warning/
   * danger/purple, nackte HEX) wurden ENTFERNT. Ihre Usages zeigen
   * jetzt direkt auf die OKLCH-SSOT-Tokens (--pp-accent-*/--pp-state-*)
   * → eine Farbquelle, Dark-Mode automatisch korrekt. Mapping:
   *   accent  → --pp-accent-amber   · success → --pp-state-success
   *   warning → --pp-state-warning  · danger  → --pp-state-danger
   *   purple  → --pp-accent-violet  (minimaler Farb-Shift akzeptiert). */

  /* ── Layout (keine Theme-Tokens) ────────────────────────────────*/
  --pilanda-sidebar-w:  264px; /* 07.07.: 210px schnitt deutsche Modul-Labels ab */
  --pilanda-topbar-h:   60px;
  /* Sidebar-Wordmark/Active-Blau — OKLCH-Wert von #1F8EF1 (kein HEX
   * mehr) -> 18.06.2026 entfernt; alle Usages = --pp-brand-primary. */
}

/* App-weit KEINE sichtbaren Scrollbalken (Scroll-Funktion bleibt) —
 * Klickdummy-Handoff Master §6/N1 (13.07.2026). */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Schrift (Noto Sans) wird self-hosted aus pilanda_theme geladen
 * (pilanda_theme_fonts.css, --pp-font-*) — kein externer CDN-@import
 * mehr (Ladezeit/Datenschutz). Hier KEIN harter Schrift-Stack mehr,
 * sonst weicht die Landing von der SSOT-Schrift ab (A2). */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body.pilanda-page {
  font-family: var(--pp-font-body);
  font-size: 14px;
  line-height: var(--pp-lh-normal);
  letter-spacing: var(--pp-tracking-snug);
  color: var(--pp-text-primary);
  background: var(--pp-bg-base);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.pilanda-page a { color: inherit; }

/* ============================================================== *
 * 2. App shell                                                    *
 * ============================================================== */
.pilanda-shell {
  display: grid;
  grid-template-columns: var(--pilanda-sidebar-w) 1fr;
  grid-template-rows: var(--pilanda-topbar-h) 1fr;
  grid-template-areas:
    "side  top"
    "side  main";
  height: 100vh;
  width: 100vw;
  position: relative;
}

/* Draggable sidebar width handle (landing only) — sits on the column
   boundary; dragging updates --pilanda-sidebar-w (persisted in JS). */
.pilanda-side-resize {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--pilanda-sidebar-w) - 3px);
  width: 6px;
  cursor: col-resize;
  z-index: 50;
}
.pilanda-side-resize:hover,
.pilanda-side-resize.is-dragging { background: color-mix(in oklab, var(--pp-brand-primary) 30%, transparent); }
body.pilanda-resizing { cursor: col-resize; user-select: none; }

/* ============================================================== *
 * 3. Sidebar                                                      *
 * ============================================================== */
.pilanda-side {
  grid-area: side;
  background: var(--pp-bg-surface);
  border-right: 1px solid var(--pp-border-subtle);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.pilanda-side-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: var(--pilanda-topbar-h);
  border-bottom: 1px solid var(--pp-border-subtle);
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.pilanda-mark {
  display: inline-block;
  width: 32px;
  height: 32px;
  color: var(--pp-brand-primary);
  flex-shrink: 0;
}
.pilanda-mark svg { width: 100%; height: 100%; display: block; }
.pilanda-wordmark {
  font-weight: var(--pp-weight-semibold);
  letter-spacing: 0.14em;
  color: var(--pp-brand-primary);
  font-size: 14px;
}

.pilanda-side-nav {
  padding: var(--pp-space-2) var(--pp-space-2) var(--pp-space-8);
}
.pilanda-side-zone {
  margin-top: var(--pp-space-3);
  padding-left: var(--pp-space-1);
}
.pilanda-side-zone:first-child { margin-top: 2px; }
/* No left bar on the first ("Übersicht") block — that one is
   intentionally singled out as the intranet root. */
.pilanda-side-zone--home { padding-left: 0; }
.pilanda-side-zone--a,
.pilanda-side-zone--b,
.pilanda-side-zone--c,
.pilanda-side-zone--d {
  border-left: 2px solid transparent;
  margin-left: var(--pp-space-1);
  padding-left: var(--pp-space-2);
}
.pilanda-side-zone--a    { border-left-color: rgb(var(--pp-brand-primary-rgb) / 0.18); }
.pilanda-side-zone--b    { border-left-color: color-mix(in oklab, var(--pp-brand-secondary) 22%, transparent); }
.pilanda-side-zone--c    { border-left-color: color-mix(in oklab, var(--pp-accent-violet) 24%, transparent); }
.pilanda-side-zone--d    { border-left-color: color-mix(in oklab, var(--pp-state-success) 24%, transparent); }

.pilanda-side-zone-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px var(--pp-space-1);
  font-size: 11px;
  font-weight: var(--pp-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pp-text-tertiary);
}
/* dot is now redundant with the left border, but kept for the legend cohesion */
.pilanda-side-zone-head .dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: var(--pp-radius-full);
  background: currentColor;
  opacity: 0.45;
}

.pilanda-side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--pp-space-2);
  padding: var(--pp-space-2) var(--pp-space-2);
  border-radius: var(--pp-radius-ui);
  font-size: 13.5px;
  color: var(--pp-text-secondary);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.pilanda-side-link:hover {
  background: var(--pp-bg-base);
  color: var(--pp-brand-primary);
}
.pilanda-side-link.is-active {
  background: rgb(var(--pp-brand-primary-rgb) / 0.08);
  color: var(--pp-brand-primary);
  font-weight: var(--pp-weight-semibold);
}
/* Active stripe: shown on every active entry. For the "Übersicht"
   block (which has no left bar) the stripe sits flush against the
   sidebar edge; for the zone blocks it sits in their bar gutter. */
.pilanda-side-link.is-active::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: var(--pp-radius-ui);
  background: var(--pp-brand-primary);
}
.pilanda-side-zone--home .pilanda-side-link.is-active::before { left: -6px; }
.pilanda-side-zone--a .pilanda-side-link.is-active::before,
.pilanda-side-zone--b .pilanda-side-link.is-active::before,
.pilanda-side-zone--c .pilanda-side-link.is-active::before,
.pilanda-side-zone--d .pilanda-side-link.is-active::before { left: -12px; }
.pilanda-side-link-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--pp-text-tertiary);
}
.pilanda-side-link-icon svg { width: 17px; height: 17px; }
.pilanda-side-link:hover .pilanda-side-link-icon,
.pilanda-side-link.is-active .pilanda-side-link-icon { color: var(--pp-brand-primary); }
.pilanda-side-link-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Status-/Phase-Badges in der Nav sind VERBOTEN (Marco 15.07.2026) —
   Status gehört als Pille in die Canvas. Markup + CSS entfernt. */

/* -----------------------------------------------------------------
 * 3b. Mini-app sidebar variant (per-module workspace view).
 *
 * Rendered by pilanda_desk.js when the user is inside a specific
 * Pilanda module (/desk/<slug>). The sidebar shows ONLY this
 * module's sub-navigation — Lead/Opportunity/… for Vertrieb,
 * Project/Task/… for Projektmanagement — and a back link to the
 * intranet overview.
 * --------------------------------------------------------------- */
.pilanda-side--app .pilanda-side-back {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 4px;
  color: var(--pp-text-tertiary);
  font-size: 12px;
  font-weight: var(--pp-weight-semibold);
  text-decoration: none;
  transition: color 0.12s;
}
.pilanda-side--app .pilanda-side-back:hover { color: var(--pp-brand-primary); }
.pilanda-side--app .pilanda-side-back svg { stroke-width: 2; }

.pilanda-app-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 20px 16px;
  border-bottom: 1px solid var(--pp-border-subtle);
  margin-bottom: var(--pp-space-1);
}
.pilanda-app-head-icon {
  width: 36px; height: 36px;
  border-radius: var(--pp-radius-ui);
  background: rgb(var(--pp-brand-primary-rgb) / 0.10);
  display: grid; place-items: center;
  color: var(--pp-brand-primary);
  flex-shrink: 0;
}
.pilanda-app-head-icon svg { width: 20px; height: 20px; }
.pilanda-app-head-title {
  font-size: 16px;
  font-weight: var(--pp-weight-semibold);
  color: var(--pp-brand-primary);
  letter-spacing: -0.01em;
}

.pilanda-side-nav--app { padding-top: 4px; }
.pilanda-side-zone--app {
  margin-top: var(--pp-space-2);
  padding-left: var(--pp-space-1);
}
.pilanda-side-zone--app:first-child { margin-top: 0; }
.pilanda-side-zone--app .pilanda-side-zone-head {
  padding: var(--pp-space-1) 8px 4px;
}

/* Sub-nav links inside a module look a tiny notch quieter than
   the top-level zone links — same hover/active treatment though. */
.pilanda-side-link--sub {
  font-size: 13px;
  padding: var(--pp-space-1) var(--pp-space-2);
}
.pilanda-side-link-icon--dot {
  position: relative;
}
.pilanda-side-link-icon--dot::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: var(--pp-radius-full);
  background: var(--pp-text-tertiary);
  opacity: 0.6;
  display: block;
}
.pilanda-side-link--sub:hover .pilanda-side-link-icon--dot::before,
.pilanda-side-link--sub.is-active .pilanda-side-link-icon--dot::before {
  background: var(--pp-brand-primary);
  opacity: 1;
}

.pilanda-app-empty {
  padding: var(--pp-space-4) 20px;
  font-size: 12px;
  color: var(--pp-text-tertiary);
  text-align: center;
}

/* ============================================================== *
 * 4. Topbar                                                       *
 * ============================================================== */
.pilanda-top {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pp-space-8);
  background: var(--pp-bg-surface);
  border-bottom: 1px solid var(--pp-border-subtle);
  position: sticky;
  top: 0;
  z-index: 10;
}
.pilanda-top-title {
  font-size: 14px;
  font-weight: var(--pp-weight-semibold);
  color: var(--pp-text-secondary);
}
.pilanda-top-nav { display: flex; align-items: center; gap: var(--pp-space-2); }
.pilanda-user {
  color: var(--pp-text-tertiary);
  font-size: 13px;
  padding-right: 4px;
}
.pilanda-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--pp-space-2) var(--pp-space-3);
  border-radius: var(--pp-radius-ui);
  border: 1px solid var(--pp-border-subtle);
  font-size: 13px;
  text-decoration: none;
  color: var(--pp-text-secondary);
  background: var(--pp-bg-surface);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
  font-weight: var(--pp-weight-medium);
  cursor: pointer;
}
.pilanda-btn:hover { background: var(--pp-bg-base); color: var(--pp-brand-primary); border-color: rgb(var(--pp-brand-primary-rgb) / 0.2); }
.pilanda-btn--solid {
  background: var(--pp-brand-primary);
  border-color: var(--pp-brand-primary);
  color: var(--pp-text-on-accent);
}
.pilanda-btn--solid:hover {
  background: var(--pp-brand-primary-d);
  border-color: var(--pp-brand-primary-d);
  color: var(--pp-text-on-accent);
}
.pilanda-btn--ghost { border-color: transparent; color: var(--pp-text-tertiary); }

.pilanda-side-toggle {
  display: none;
  border: 1px solid var(--pp-border-subtle);
  background: var(--pp-bg-surface);
  border-radius: var(--pp-radius-ui);
  width: 36px; height: 36px;
  padding: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--pp-text-secondary);
}

/* ============================================================== *
 * 5. Main + Hero                                                  *
 * ============================================================== */
.pilanda-main {
  grid-area: main;
  overflow-y: auto;
  padding: 40px var(--pp-space-8) 56px;
  background: radial-gradient(1200px 600px at 100% -200px, rgb(var(--pp-brand-primary-rgb) / 0.06), transparent 60%),
              linear-gradient(180deg, var(--pp-bg-surface) 0%, var(--pp-bg-sunken) 100%);
}
/* 19.07.: Voller Canvas (Marco-Direktive „ERP, kein zentrierter Blog").
 * Die frühere zentrierte 1320-px-Spalte (07.07., gegen randloses Ausufern
 * auf 4K) wird aufgehoben — Inhalt nutzt die volle Breite; die seitlichen
 * Ränder liefert das Padding von .pilanda-main. Lese-Spalten mit bewusster
 * max-width (z. B. .news-detail) definieren ihre Breite weiter selbst. */
.pilanda-main > * {
  max-width: none;
}

.pilanda-hero {
  margin-bottom: 32px;
}
.pilanda-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 2.2vw, 36px);
  font-weight: var(--pp-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--pp-text-primary);
}
.pilanda-hero h1 span {
  background: linear-gradient(90deg, var(--pp-brand-primary), var(--pp-brand-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pilanda-sub {
  margin: 0;
  color: var(--pp-text-tertiary);
  font-size: 15px;
  max-width: 720px;
  line-height: 1.6;
}

/* ============================================================== *
 * 6. Zones + Card grid                                            *
 * ============================================================== */
.pilanda-zone {
  margin-bottom: 40px;
  scroll-margin-top: 80px;
}
.pilanda-zone-head { margin-bottom: var(--pp-space-3); }
.pilanda-zone-head h2 {
  margin: 0;
  font-size: 12.5px;
  font-weight: var(--pp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pp-text-secondary);
}
.pilanda-zone-head p {
  margin: 3px 0 0;
  color: var(--pp-text-tertiary);
  font-size: 12.5px;
}
/* Unified header colour — one brand colour for every zone instead of
   the multi-colour mix (Start/A–D). */
.pilanda-zone--home .pilanda-zone-head h2,
.pilanda-zone--a    .pilanda-zone-head h2,
.pilanda-zone--b    .pilanda-zone-head h2,
.pilanda-zone--c    .pilanda-zone-head h2,
.pilanda-zone--d    .pilanda-zone-head h2 { color: var(--pp-brand-primary); }

.pilanda-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
  gap: var(--pp-space-3);
}
.pilanda-card {
  display: flex;
  gap: var(--pp-space-3);
  align-items: center;
  padding: 16px var(--pp-space-4);
  background: var(--pp-bg-surface);
  border: 1px solid var(--pp-border-subtle);
  border-radius: var(--pp-radius-ui);
  box-shadow: var(--pp-shadow-xs);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.pilanda-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pp-shadow-lg);
  border-color: transparent;
}
.pilanda-card-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: var(--pp-radius-ui);
  background: var(--pp-bg-sunken);
  color: var(--pp-brand-primary);
  transition: background 0.15s ease;
}
.pilanda-card:hover .pilanda-card-icon {
  background: linear-gradient(135deg, var(--pp-brand-primary), var(--pp-brand-secondary));
  color: var(--pp-text-on-accent);
}
.pilanda-card-icon svg { width: 20px; height: 20px; }

.pilanda-card-body { min-width: 0; flex: 1; }
.pilanda-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--pp-weight-semibold);
  font-size: 14px;
  color: var(--pp-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pilanda-card-path {
  margin-top: 3px;
  font-family: var(--pp-font-mono);
  font-size: 11.5px;
  color: var(--pp-text-tertiary);
}

.pilanda-phase {
  display: inline-block;
  padding: 1px var(--pp-space-2);
  border-radius: var(--pp-radius-full);
  font-size: 10px;
  font-weight: var(--pp-weight-bold);
  letter-spacing: 0.04em;
  background: var(--pp-bg-sunken);
  color: var(--pp-text-tertiary);
}
.pilanda-phase--live    { display: none; }   /* P1 = default → no badge */
.pilanda-phase--soon    { background: color-mix(in oklab, var(--pp-accent-amber) 20%, transparent); color: var(--pp-state-warning); }
.pilanda-phase--planned { background: color-mix(in oklab, var(--pp-text-tertiary) 18%, transparent); color: var(--pp-text-tertiary); }

/* ============================================================== *
 * 6.5  News block                                                 *
 *                                                                 *
 * Lives between hero and module zones on /pilanda. Pinned cards   *
 * get a subtle accent ring so they stand out without dominating.  *
 * ============================================================== */
.news {
  margin-bottom: var(--pp-space-8);
}
.news-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--pp-space-3);
}
.news-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: var(--pp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-brand-secondary);
}
.news-more {
  font-size: 12.5px;
  text-decoration: none;
  font-weight: var(--pp-weight-medium);
  color: var(--pp-brand-secondary);
}
.news-more:hover { text-decoration: underline; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--pp-space-4);
}
.news-card {
  display: flex;
  flex-direction: column;
  background: var(--pp-bg-surface);
  border: 1px solid var(--pp-border-subtle);
  border-radius: var(--pp-radius-ui);
  box-shadow: var(--pp-shadow-xs);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.news-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pp-shadow-lg);
  border-color: rgb(var(--pp-brand-primary-rgb) / 0.18);
}
.news-card--pinned {
  border-color: var(--pp-accent-amber);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--pp-accent-amber) 38%, transparent), var(--pp-shadow-xs);
}
.news-card-media {
  height: 132px;
  background-size: cover;
  background-position: center;
  background-color: var(--pp-bg-sunken);
}
.news-card-body {
  padding: var(--pp-space-3) 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-1);
}
.news-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--pp-text-tertiary);
  flex-wrap: wrap;
}
.news-pin {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: var(--pp-radius-ui);
  background: color-mix(in oklab, var(--pp-accent-amber) 20%, transparent);
  color: var(--pp-state-warning);
}
.news-cat {
  display: inline-block;
  padding: 1px var(--pp-space-2);
  border-radius: var(--pp-radius-full);
  font-size: 10px;
  font-weight: var(--pp-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--pp-bg-sunken);
  color: var(--pp-text-secondary);
}
.news-cat--release       { background: color-mix(in oklab, var(--pp-state-success) 18%, transparent);  color: var(--pp-state-success); }
.news-cat--unternehmen   { background: rgb(var(--pp-brand-primary-rgb) / 0.10);  color: var(--pp-brand-primary); }
.news-cat--produkt       { background: color-mix(in oklab, var(--pp-brand-secondary) 16%, transparent); color: var(--pp-brand-secondary); }
.news-cat--veranstaltung { background: color-mix(in oklab, var(--pp-accent-amber) 20%, transparent); color: var(--pp-state-warning); }
.news-cat--personal      { background: color-mix(in oklab, var(--pp-accent-violet) 18%, transparent); color: var(--pp-accent-violet); }
.news-date {
  font-family: var(--pp-font-mono);
  font-size: 11px;
}
.news-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: var(--pp-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--pp-text-primary);
  line-height: 1.35;
}
.news-card-summary {
  margin: 2px 0 0;
  color: var(--pp-text-tertiary);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news--empty .news-empty {
  background: var(--pp-bg-surface);
  border: 1px dashed var(--pp-border-subtle);
  border-radius: var(--pp-radius-ui);
  padding: var(--pp-space-5);
  text-align: center;
  color: var(--pp-text-tertiary);
  font-size: 13px;
}

/* News detail page reuses .pilanda-main typography. */
.news-detail {
  max-width: 760px;
}
.news-detail-meta {
  display: flex;
  gap: var(--pp-space-2);
  align-items: center;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--pp-text-tertiary);
}
.news-detail h1 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: var(--pp-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--pp-text-primary);
}
.news-detail-image {
  width: 100%;
  border-radius: var(--pp-radius-ui);
  margin: var(--pp-space-4) 0 24px;
  display: block;
}
.news-detail-body {
  color: var(--pp-text-primary);
  font-size: 15px;
  line-height: 1.7;
}
.news-detail-body h2 { font-size: 18px; margin-top: 24px; }
.news-detail-body p  { margin: 0 0 var(--pp-space-3); }

/* ============================================================== *
 * 7. PLS extensions                                               *
 * ============================================================== */
.pls-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--pp-space-3);
  margin-bottom: 32px;
}
.pls-kpi {
  position: relative;
  background: var(--pp-bg-surface);
  border: 1px solid var(--pp-border-subtle);
  border-radius: var(--pp-radius-ui);
  padding: var(--pp-space-4) 20px;
  box-shadow: var(--pp-shadow-xs);
}
.pls-kpi::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  border-radius: var(--pp-radius-ui) 0 0 var(--pp-radius-ui);
  background: var(--pp-brand-primary);
}
.pls-kpi--warn::before   { background: var(--pp-state-warning); }
.pls-kpi--accent::before { background: var(--pp-accent-amber); }

.pls-kpi-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pp-text-tertiary);
  font-weight: var(--pp-weight-semibold);
}
.pls-kpi-value {
  font-size: 30px;
  font-weight: var(--pp-weight-semibold);
  letter-spacing: -0.025em;
  color: var(--pp-text-primary);
  margin-top: 4px;
  line-height: 1.1;
}
.pls-kpi-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--pp-brand-secondary);
  text-decoration: none;
  font-weight: var(--pp-weight-medium);
}
.pls-kpi-link:hover { text-decoration: underline; }

.pls-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--pp-bg-surface);
  border: 1px solid var(--pp-border-subtle);
  border-radius: var(--pp-radius-ui);
  overflow: hidden;
  box-shadow: var(--pp-shadow-xs);
}
.pls-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: var(--pp-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-text-tertiary);
  background: var(--pp-bg-base);
  padding: var(--pp-space-3) var(--pp-space-3);
  border-bottom: 1px solid var(--pp-border-subtle);
}
.pls-table tbody td {
  padding: var(--pp-space-3) var(--pp-space-3);
  border-bottom: 1px solid var(--pp-border-subtle);
  font-size: 13px;
}
.pls-table tbody tr:last-child td { border-bottom: none; }
.pls-table tbody tr:hover { background: var(--pp-bg-base); }
.pls-table a { color: var(--pp-brand-secondary); text-decoration: none; font-weight: var(--pp-weight-medium); }
.pls-table a:hover { text-decoration: underline; }

.pls-pill {
  display: inline-block;
  padding: 2px var(--pp-space-2);
  border-radius: var(--pp-radius-full);
  font-size: 11px;
  font-weight: var(--pp-weight-bold);
  background: color-mix(in oklab, var(--pp-text-tertiary) 16%, transparent);
  color: var(--pp-text-tertiary);
  letter-spacing: 0.02em;
}
.pls-pill--gelb   { background: color-mix(in oklab, var(--pp-accent-amber) 22%, transparent); color: var(--pp-state-warning); }
.pls-pill--orange { background: color-mix(in oklab, var(--pp-state-warning) 22%, transparent);  color: var(--pp-state-warning); }
.pls-pill--rot    { background: color-mix(in oklab, var(--pp-state-danger) 18%, transparent);  color: var(--pp-state-danger); }

.pls-empty {
  background: var(--pp-bg-surface);
  border: 1px dashed var(--pp-border-subtle);
  border-radius: var(--pp-radius-ui);
  padding: var(--pp-space-5);
  text-align: center;
  color: var(--pp-text-tertiary);
  font-size: 13px;
}

/* ============================================================== *
 * 8. Footer + states                                              *
 * ============================================================== */
.pilanda-foot {
  margin-top: var(--pp-space-8);
  padding-top: 20px;
  border-top: 1px solid var(--pp-border-subtle);
  color: var(--pp-text-tertiary);
  font-size: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.pilanda-foot a { color: var(--pp-brand-secondary); text-decoration: none; font-weight: var(--pp-weight-medium); }
.pilanda-foot a:hover { text-decoration: underline; }
.pilanda-sep { opacity: 0.4; }

.pilanda-loader,
.pilanda-error {
  padding: var(--pp-space-8);
  text-align: center;
  color: var(--pp-text-tertiary);
  font-size: 14px;
}
.pilanda-error { color: var(--pp-state-danger); }

/* ============================================================== *
 * 9. Responsive — collapse sidebar below 900 px                   *
 * ============================================================== */
@media (max-width: 900px) {
  .pilanda-shell { grid-template-columns: 0 1fr; }
  .pilanda-side {
    position: fixed;
    left: 0; top: 0;
    width: var(--pilanda-sidebar-w);
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 30;
    box-shadow: 4px 0 18px rgba(0,0,0,0.14);
  }
  .pilanda-side.is-open { transform: translateX(0); }
  .pilanda-side-toggle { display: inline-flex; }
  .pilanda-top  { padding: 0 16px; }
  .pilanda-main { padding: 24px 16px 48px; }
  .pilanda-backdrop {
    position: fixed; inset: 0;
    background: color-mix(in oklab, var(--pp-slate-950) 45%, transparent);
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .pilanda-backdrop.is-open { opacity: 1; pointer-events: auto; }
}

/* ============================================================== *
 * 10. Desk reskin                                                 *
 *                                                                 *
 * Loaded via hooks.py app_include_css. Targets Frappe's stock     *
 * desk classes only — keeps the desk fully functional but lets    *
 * /app/<workspace> feel like a direct continuation of /pilanda:   *
 * same font, same topbar height, same sidebar grouping, same      *
 * card shadows, same buttons + pills.                             *
 *                                                                 *
 *   10.1 base typography on the desk body                         *
 *   10.2 top navbar (height + brand + actions)                    *
 *   10.3 left sidebar (workspace tree)                            *
 *   10.4 page-head + workspace title                              *
 *   10.5 widgets / cards / shortcuts                              *
 *   10.6 buttons + form controls                                  *
 *   10.7 status indicators                                        *
 * ============================================================== */

/* 10.1 base ------------------------------------------------------ */
/*
 * app_include_css already scopes this stylesheet to desk pages
 * only. Frappe v16 uses both /app/<slug> and /desk/<slug> routes
 * and the body data-attributes differ between v15/v16, so we do
 * not filter — every page that loads this file is a desk page.
 *
 * The public landing has its own .pilanda-page body class and is
 * unaffected because the .pilanda-page rules in section 1 are
 * more specific.
 */
/* font-family kommt aus pilanda_theme_fonts.css (--pp-font-body,
 * SSOT/ADR-006) — hier KEIN eigener Inter-Stack mehr, sonst
 * gewänne je nach Ladereihenfolge eine andere Desk-Schrift (P6). */
body {
  letter-spacing: -0.005em;
  color: var(--pp-text-primary);
}
body.desk-page-rendered,
body .desk-page,
body .main-section {
  background: var(--pp-bg-base);
}

/* 10.2 navbar --------------------------------------------------- */
.navbar.navbar-expand,
header .navbar {
  height: var(--pilanda-topbar-h);
  min-height: var(--pilanda-topbar-h);
  background: var(--pp-bg-surface) !important;
  border-bottom: 1px solid var(--pp-border-subtle);
  box-shadow: none;
  padding: 0 22px;
}
.navbar .container,
.navbar .container-fluid {
  padding: 0;
}
/* Doppel-Logo behoben: die rohe Frappe-Navbar-Brand ("PILANDA",
 * runde Ecken, falsches Logo, Quelle = Navbar Settings/DB) wird
 * ausgeblendet — aber NUR solange die Pilanda-Chrome aktiv ist
 * (body.pilanda-desk-on). In der Admin-Rohansicht (Toggle 07.07.,
 * Chrome nicht gemountet) bleibt die Frappe-Navbar vollständig. */
body.pilanda-desk-on .navbar-brand,
body.pilanda-desk-on .navbar .navbar-brand,
body.pilanda-desk-on .navbar .app-logo,
body.pilanda-desk-on .brand-text {
  display: none !important;
}
/* Tiny "Übersicht" badge injected by desk_navigation.js */
.pilanda-desk-link {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-space-1);
  padding: var(--pp-space-1) 12px;
  margin-right: var(--pp-space-2);
  border-radius: var(--pp-radius-full);
  font-size: 12px;
  font-weight: var(--pp-weight-semibold);
  color: var(--pp-brand-primary);
  background: rgb(var(--pp-brand-primary-rgb) / 0.08);
  text-decoration: none;
  transition: background 0.15s ease;
}
.pilanda-desk-link:hover {
  background: rgb(var(--pp-brand-primary-rgb) / 0.16);
  text-decoration: none;
}
.pilanda-desk-link::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--pp-radius-full);
  background: var(--pp-accent-amber);
}
/* search bar */
.navbar .search-bar input,
.navbar .awesomplete input {
  background: var(--pp-bg-sunken) !important;
  border: 1px solid transparent !important;
  border-radius: var(--pp-radius-ui);
  height: 34px;
  font-size: 13px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.navbar .search-bar input:focus,
.navbar .awesomplete input:focus {
  background: var(--pp-bg-surface) !important;
  border-color: var(--pp-brand-primary) !important;
  box-shadow: var(--pp-shadow-focus-ring);
  outline: none;
}

/* 10.4 page-head + workspace title ------------------------------ */
.page-head {
  background: var(--pp-bg-surface) !important;
  border-bottom: 1px solid var(--pp-border-subtle);
  box-shadow: none;
}
.page-head .page-title h1,
.page-head .page-title .title-text,
.workspace-title {
  color: var(--pp-brand-primary);
  font-weight: var(--pp-weight-semibold);
  letter-spacing: -0.01em;
}
.workspace-title::after,
.page-head .page-title h1::after {
  content: "";
  display: block;
  margin-top: var(--pp-space-1);
  width: 36px; height: 3px;
  background: var(--pp-accent-amber);
  border-radius: var(--pp-radius-ui);
}
.page-head .page-title h1::after {
  width: 28px; height: 2px;
}

/* 10.5 widgets / shortcut cards --------------------------------- */
.widget,
.shortcut-widget-box,
.dashboard-section-link,
.number-widget-box,
.chart-widget-box,
.onboarding-step,
.section-body .section-card {
  background: var(--pp-bg-surface) !important;
  border: 1px solid var(--pp-border-subtle) !important;
  border-radius: var(--pp-radius-ui) !important;
  box-shadow: var(--pp-shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.widget:hover,
.shortcut-widget-box:hover,
.dashboard-section-link:hover {
  box-shadow: var(--pp-shadow-lg);
  border-color: rgb(var(--pp-brand-primary-rgb) / 0.18) !important;
  transform: translateY(-1px);
}
.widget .widget-head .widget-title,
.shortcut-widget-box .widget-title {
  color: var(--pp-text-primary);
  font-weight: var(--pp-weight-semibold);
  font-size: 13px;
}
.widget .widget-subtitle,
.shortcut-widget-box .widget-subtitle {
  color: var(--pp-text-tertiary);
  font-size: 11px;
}

/* 10.6 buttons + form controls ---------------------------------- */
.btn,
button.btn {
  border-radius: var(--pp-radius-ui);
  font-weight: var(--pp-weight-semibold);
  font-size: 13px;
  padding: 6px 14px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary,
button.btn-primary {
  background-color: var(--pp-brand-primary) !important;
  border-color: var(--pp-brand-primary) !important;
  color: var(--pp-text-on-accent) !important;
}
.btn-primary:hover,
button.btn-primary:hover,
.btn-primary:focus,
button.btn-primary:focus {
  background-color: var(--pp-brand-primary-d) !important;
  border-color: var(--pp-brand-primary-d) !important;
  box-shadow: var(--pp-shadow-focus-ring) !important;
}
.btn-secondary,
.btn-default {
  background: var(--pp-bg-surface);
  border-color: var(--pp-border-subtle);
  color: var(--pp-text-secondary);
}
.btn-secondary:hover,
.btn-default:hover {
  border-color: var(--pp-brand-primary);
  color: var(--pp-brand-primary);
}
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
  border-radius: var(--pp-radius-ui);
  border-color: var(--pp-border-subtle);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
  border-color: var(--pp-brand-primary);
  box-shadow: var(--pp-shadow-focus-ring);
}

/* 10.7 status indicators (list views, kanban) ------------------- */
.indicator-pill,
.indicator-pill-round {
  border-radius: var(--pp-radius-full);
  font-weight: var(--pp-weight-semibold);
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px var(--pp-space-2);
}
.indicator-pill.green,    .indicator-pill-round.green   { background: color-mix(in oklab, var(--pp-state-success) 16%, transparent);  color: var(--pp-state-success); }
.indicator-pill.orange,   .indicator-pill-round.orange  { background: color-mix(in oklab, var(--pp-state-warning) 18%, transparent);  color: var(--pp-state-warning); }
.indicator-pill.yellow,   .indicator-pill-round.yellow  { background: color-mix(in oklab, var(--pp-accent-amber) 20%, transparent); color: var(--pp-state-warning); }
.indicator-pill.red,      .indicator-pill-round.red     { background: color-mix(in oklab, var(--pp-state-danger) 16%, transparent);  color: var(--pp-state-danger);  }
.indicator-pill.blue,     .indicator-pill-round.blue    { background: rgb(var(--pp-brand-primary-rgb) / 0.12);  color: var(--pp-brand-primary); }
.indicator-pill.gray,     .indicator-pill-round.gray    { background: color-mix(in oklab, var(--pp-text-tertiary) 18%, transparent); color: var(--pp-text-tertiary);  }
.indicator-pill.purple,   .indicator-pill-round.purple  { background: color-mix(in oklab, var(--pp-accent-violet) 18%, transparent); color: var(--pp-accent-violet);  }

/* =================================================================
 * Landing — favourite card, dashboard row, dropdown zones
 * =================================================================
 * Layout (top→bottom of <main>):
 *   .pilanda-hero        — welcome copy
 *   .pilanda-fav         — role-based hero card
 *   .pilanda-dashboards  — two-tile dashboard row
 *   .pilanda-zones       — <details> dropdowns per zone
 */

/* ---- Favourite hero card ---------------------------------------- */
.pilanda-fav {
  margin: 24px 0 var(--pp-space-4);
}
.pilanda-fav-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 var(--pp-space-2);
}
.pilanda-fav-eyebrow {
  font-size: 11.5px;
  font-weight: var(--pp-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pp-brand-primary);
}
.pilanda-fav-hint {
  font-size: 12px;
  color: var(--pp-text-tertiary);
}
.pilanda-card--fav {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--pp-space-4);
  align-items: center;
  padding: 20px 24px;
  border-radius: var(--pp-radius-ui);
  background: linear-gradient(135deg,
    rgb(var(--pp-brand-primary-rgb) / 0.06) 0%,
    color-mix(in oklab, var(--pp-accent-emerald) 8%, transparent) 100%);
  border: 1px solid var(--pp-border-subtle);
  box-shadow: var(--pp-shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  text-decoration: none;
}
.pilanda-card--fav:hover {
  transform: translateY(-1px);
  box-shadow: var(--pp-shadow-md, 0 4px 12px rgba(0,0,0,0.10));
  border-color: var(--pp-brand-primary);
}
.pilanda-card--fav .pilanda-card-icon {
  width: 56px;
  height: 56px;
  background: var(--pp-brand-primary);
  color: var(--pp-text-on-accent);
  border-radius: var(--pp-radius-ui);
  display: inline-grid;
  place-items: center;
}
.pilanda-card--fav .pilanda-card-icon svg {
  width: 28px;
  height: 28px;
}
.pilanda-card--fav .pilanda-card-title {
  font-size: 19px;
  font-weight: var(--pp-weight-semibold);
  color: var(--pp-brand-primary);
  margin-bottom: 4px;
}
.pilanda-card--fav .pilanda-card-path {
  color: var(--pp-text-tertiary);
  font-size: 13px;
}

/* ---- Dashboard row --------------------------------------------- */
.pilanda-dashboards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 var(--pp-space-8);
}
@media (max-width: 720px) {
  .pilanda-dashboards { grid-template-columns: 1fr; }
}
.pilanda-card--dashboard {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--pp-space-3);
  padding: var(--pp-space-4) var(--pp-space-4);
  border-radius: var(--pp-radius-ui);
  background: var(--pp-bg-surface);
  border: 1px solid var(--pp-border-subtle);
  text-decoration: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.pilanda-card--dashboard:hover {
  transform: translateY(-1px);
  box-shadow: var(--pp-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
  border-color: var(--pp-brand-primary);
}
.pilanda-card--dashboard .pilanda-card-icon {
  width: 44px;
  height: 44px;
  background: rgb(var(--pp-brand-primary-rgb) / 0.08);
  color: var(--pp-brand-primary);
  border-radius: var(--pp-radius-ui);
  display: inline-grid;
  place-items: center;
}
.pilanda-card--dashboard .pilanda-card-icon svg {
  width: 22px;
  height: 22px;
}
.pilanda-card--dashboard .pilanda-card-title {
  font-size: 15px;
  font-weight: var(--pp-weight-semibold);
  color: var(--pp-text-primary);
}
.pilanda-card--dashboard .pilanda-card-sub {
  color: var(--pp-text-tertiary);
  font-size: 12.5px;
  margin-top: 2px;
}
.pilanda-card--dashboard .pilanda-card-path {
  color: var(--pp-text-tertiary);
  font-size: 12px;
  margin-top: 2px;
}
.pilanda-card--company {
  background: linear-gradient(180deg, var(--pp-bg-surface) 0%, rgb(var(--pp-brand-primary-rgb) / 0.03) 100%);
}
.pilanda-card--company .pilanda-card-icon {
  background: var(--pp-brand-primary);
  color: var(--pp-text-on-accent);
}

/* News mini-feed inside the Unternehmens-Dashboard card */
.pilanda-card-news {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  border-top: 1px solid var(--pp-border-subtle);
  padding-top: var(--pp-space-2);
}
.pilanda-card-news li {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 4px 0;
  color: var(--pp-text-primary);
}
.pilanda-card-news-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--pp-radius-full);
  background: var(--pp-accent-amber);
}
.pilanda-card-news-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pilanda-card-news-date {
  color: var(--pp-text-tertiary);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* ---- Zone dropdowns (<details> + <summary>) -------------------- */
.pilanda-zone--collapse {
  border: 1px solid var(--pp-border-subtle);
  border-radius: var(--pp-radius-ui);
  background: var(--pp-bg-surface);
  margin-bottom: 12px;
  padding: 0;
}
.pilanda-zone--collapse > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--pp-space-3) var(--pp-space-4);
  user-select: none;
  border-radius: var(--pp-radius-ui);
}
.pilanda-zone--collapse > summary::-webkit-details-marker { display: none; }
.pilanda-zone--collapse > summary:hover {
  background: rgb(var(--pp-brand-primary-rgb) / 0.03);
}
.pilanda-zone--collapse .pilanda-zone-head-text h2 {
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: var(--pp-weight-semibold);
  color: var(--pp-text-primary);
  margin: 0;
}
.pilanda-zone--collapse .pilanda-zone-head-text p {
  margin: 2px 0 0;
  color: var(--pp-text-tertiary);
  font-size: 12.5px;
}
.pilanda-zone-caret {
  color: var(--pp-text-tertiary);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.pilanda-zone--collapse[open] .pilanda-zone-caret {
  transform: rotate(180deg);
}
.pilanda-zone--collapse[open] > summary {
  border-bottom: 1px solid var(--pp-border-subtle);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.pilanda-zone--collapse .pilanda-grid {
  padding: var(--pp-space-4);
}

/* Zone-tint on the caret to keep the colour cue from the old design */
.pilanda-zone--a    .pilanda-zone-caret,
.pilanda-zone--b    .pilanda-zone-caret,
.pilanda-zone--c    .pilanda-zone-caret,
.pilanda-zone--d    .pilanda-zone-caret { color: var(--pp-brand-primary); }

/* =================================================================
 * Sidebar — favourite-app, dashboard row, zone dropdowns
 * =================================================================
 * Mirrors the landing-page restructure inside the side rail so the
 * same affordance is present in /pilanda, /pls and every /app/<x>
 * page that shows the Pilanda sidebar.
 */

/* Favourite ------------------------------------------------------ */
.pilanda-side-fav {
  margin: 0 8px var(--pp-space-3);
}
.pilanda-side-fav-eyebrow {
  font-size: 10.5px;
  font-weight: var(--pp-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pp-brand-primary);
  margin: 0 var(--pp-space-1) var(--pp-space-1);
}
.pilanda-side-link--fav {
  background: linear-gradient(135deg,
    rgb(var(--pp-brand-primary-rgb) / 0.10) 0%,
    color-mix(in oklab, var(--pp-accent-emerald) 12%, transparent) 100%);
  border: 1px solid var(--pp-border-subtle);
  border-radius: var(--pp-radius-ui);
  padding: var(--pp-space-2) 12px !important;
  font-weight: var(--pp-weight-semibold);
  color: var(--pp-brand-primary) !important;
}
.pilanda-side-link--fav:hover {
  background: linear-gradient(135deg,
    rgb(var(--pp-brand-primary-rgb) / 0.14) 0%,
    color-mix(in oklab, var(--pp-accent-emerald) 16%, transparent) 100%);
  border-color: var(--pp-brand-primary);
}
.pilanda-side-link--fav.is-active {
  background: var(--pp-brand-primary);
  color: var(--pp-text-on-accent) !important;
  border-color: var(--pp-brand-primary);
}
.pilanda-side-link--fav .pilanda-side-link-icon svg {
  color: inherit;
}

/* Dashboards ----------------------------------------------------- */
.pilanda-side-dashboards {
  margin: 0 8px var(--pp-space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid var(--pp-border-subtle);
  padding-bottom: 12px;
}
.pilanda-side-link--dash {
  font-weight: var(--pp-weight-medium);
}
/* The Unternehmens-Dashboard is a <details> wrapping the news. */
.pilanda-side-dash {
  border-radius: var(--pp-radius-ui);
}
.pilanda-side-dash > summary {
  list-style: none;
  cursor: pointer;
}
.pilanda-side-dash > summary::-webkit-details-marker { display: none; }
.pilanda-side-dash[open] > summary { font-weight: var(--pp-weight-semibold); }

/* News mini-feed inside the Unternehmens-Dashboard details */
.pilanda-side-news {
  list-style: none;
  padding: var(--pp-space-1) 0 8px;
  margin: 0 4px 0 var(--pp-space-8);
  border-left: 1px solid var(--pp-border-subtle);
}
.pilanda-side-news li a {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: var(--pp-space-1);
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--pp-radius-ui);
  text-decoration: none;
  color: var(--pp-text-primary);
  font-size: 12px;
}
.pilanda-side-news li a:hover { background: rgb(var(--pp-brand-primary-rgb) / 0.06); }
.pilanda-side-news-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--pp-radius-full);
  background: var(--pp-accent-amber);
}
.pilanda-side-news-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pilanda-side-news-date {
  color: var(--pp-text-tertiary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.pilanda-side-news-more a {
  display: block;
  padding: 4px 8px;
  font-size: 11.5px;
  color: var(--pp-text-tertiary);
  text-decoration: none;
}
.pilanda-side-news-more a:hover { color: var(--pp-brand-primary); }

/* Caret rotation for dropdowns inside the sidebar ---------------- */
.pilanda-side-caret {
  margin-left: auto;
  color: var(--pp-text-tertiary);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.pilanda-side-dash[open]      > summary .pilanda-side-caret,
.pilanda-side-zone--collapse[open] > summary .pilanda-side-caret {
  transform: rotate(180deg);
}

/* User-Dashboard block on /pilanda landing ---------------------- */
.pilanda-userdash {
  margin: var(--pp-space-4) 0 var(--pp-space-5);
  border: 1px solid var(--pp-border-subtle);
  border-radius: var(--pp-radius-ui);
  background: var(--pp-bg-surface);
  overflow: hidden;
}
.pilanda-userdash-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 8px;
}
.pilanda-userdash-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: var(--pp-weight-semibold);
  color: var(--pp-text-primary);
}
.pilanda-userdash-more {
  font-size: 12.5px;
  color: var(--pp-text-tertiary);
  text-decoration: none;
}
.pilanda-userdash-more:hover {
  color: var(--pp-brand-primary);
  text-decoration: none;
}
.pilanda-userdash-body { padding: 0 20px 16px; }
.pilanda-userdash-greeting {
  font-size: 13px;
  color: var(--pp-text-tertiary);
  margin-bottom: 12px;
}
.pilanda-userdash-greeting strong { color: var(--pp-text-primary); }

/* Notification list inside the dashboard */
.pilanda-noti {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pilanda-noti-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: var(--pp-space-2);
  padding: 8px var(--pp-space-2);
  border-radius: var(--pp-radius-ui);
  align-items: center;
  font-size: 13px;
  background: rgb(var(--pp-brand-primary-rgb) / 0.03);
  transition: background-color 0.12s ease;
}
.pilanda-noti-item:hover { background: rgb(var(--pp-brand-primary-rgb) / 0.06); }
.pilanda-noti-item.is-read { opacity: 0.55; }
.pilanda-noti-dot {
  width: 8px; height: 8px;
  border-radius: var(--pp-radius-full);
  background: var(--pp-brand-primary);
}
.pilanda-noti-item--warn .pilanda-noti-dot { background: var(--pp-state-warning); }
.pilanda-noti-item--alert .pilanda-noti-dot { background: var(--pp-state-danger); }
.pilanda-noti-item--mention .pilanda-noti-dot { background: var(--pp-accent-violet); }
.pilanda-noti-body { min-width: 0; }
.pilanda-noti-title {
  display: block;
  color: var(--pp-text-primary);
  text-decoration: none;
  font-weight: var(--pp-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pilanda-noti-title:hover {
  color: var(--pp-brand-primary);
  text-decoration: none;
}
.pilanda-noti-meta {
  display: flex;
  gap: 8px;
  font-size: 11.5px;
  color: var(--pp-text-tertiary);
  margin-top: 2px;
}
.pilanda-noti-severity {
  font-weight: var(--pp-weight-semibold);
  font-size: 10.5px;
  padding: 1px var(--pp-space-1);
  border-radius: var(--pp-radius-full);
}
.pilanda-noti-severity--gelb,
.pilanda-noti-severity--yellow { background: color-mix(in oklab, var(--pp-state-warning) 20%, transparent); color: var(--pp-state-warning); }
.pilanda-noti-severity--orange  { background: color-mix(in oklab, var(--pp-state-warning) 20%, transparent); color: var(--pp-state-warning); }
.pilanda-noti-severity--rot,
.pilanda-noti-severity--red    { background: color-mix(in oklab, var(--pp-state-danger) 18%, transparent); color: var(--pp-state-danger); }
.pilanda-noti-when {
  font-size: 11.5px;
  color: var(--pp-text-tertiary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.pilanda-noti-empty {
  padding: var(--pp-space-4) 0;
  text-align: center;
  color: var(--pp-text-tertiary);
  font-size: 13px;
}

/* Zone dropdowns in the sidebar --------------------------------- */
.pilanda-side-zone--collapse {
  margin: 0 8px;
}
.pilanda-side-zone--collapse > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--pp-space-1);
  padding: 8px var(--pp-space-2);
  border-radius: var(--pp-radius-ui);
  user-select: none;
}
.pilanda-side-zone--collapse > summary::-webkit-details-marker { display: none; }
.pilanda-side-zone--collapse > summary > span {
  font-size: 11.5px;
  font-weight: var(--pp-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-text-secondary);
}
.pilanda-side-zone--collapse > summary:hover {
  background: rgb(var(--pp-brand-primary-rgb) / 0.04);
}
.pilanda-side-zone--collapse[open] > summary > span {
  color: var(--pp-brand-primary);
}
.pilanda-side-zone-body {
  padding: 4px 0 8px;
}

/* =================================================================
 *  Sidebar v2 — Flat / minimalist redesign (UI spec 2026-06-04)
 * =================================================================
 *  Specs:
 *    width 158px, bg #fff, border-right #e5e7eb
 *    brand wordmark #1F8EF1 18px/700
 *    section headers 10px/700 uppercase ls 0.1em color #9ca3af
 *    nav items 13px/400 color #374151, icon 16x16 color #6b7280
 *    hover bg #f9fafb color #111827
 *    active bg #eff6ff color #1F8EF1 (icon too)
 *    radius 6px, item margin 1px 8px
 *    NO border-left accent — flat background highlight only
 *  This block lives at the very end so it wins by cascade order;
 *  the earlier .pilanda-side-* rules act as the structural
 *  base, this block re-skins the surface.
 */

.pilanda-side {
  width: 158px !important;
  background: var(--pp-bg-elevated) !important;
  border-right: 1px solid var(--pp-border-subtle) !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
}

/* Brand */
.pilanda-side-brand {
  padding: 4px 16px var(--pp-space-3) !important;
  font-size: 18px;
  font-weight: var(--pp-weight-semibold);
  color: var(--pp-brand-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.pilanda-side-brand:hover { color: var(--pp-brand-primary); text-decoration: none; }
.pilanda-side-brand .pilanda-mark {
  width: 16px;
  height: 16px;
  color: var(--pp-brand-primary);
  flex-shrink: 0;
}
.pilanda-side-brand .pilanda-mark svg { width: 16px; height: 16px; display: block; }
.pilanda-side-brand .pilanda-wordmark {
  font-size: 16px;
  font-weight: var(--pp-weight-bold);
  letter-spacing: -0.01em;
  color: var(--pp-brand-primary);
}

/* Eyebrow labels ("DEIN FAVORIT") */
.pilanda-side-fav-eyebrow {
  font-size: 10.5px;
  font-weight: var(--pp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-text-disabled);
  padding: 16px 16px 4px;
  margin: 0;
}

/* Favourite item — same shape as a nav item, just with the
 * blue tint by default (no large gradient hero card any more) */
.pilanda-side-link--fav {
  background: rgb(var(--pp-brand-primary-rgb) / 0.08) !important;
  color: var(--pp-brand-primary) !important;
  font-weight: var(--pp-weight-medium);
  font-size: 13px !important;
  border: 0 !important;
  margin: 0 8px 4px !important;
  padding: var(--pp-space-2) 12px !important;
  border-radius: var(--pp-radius-ui) !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.pilanda-side-link--fav:hover {
  background: rgb(var(--pp-brand-primary-rgb) / 0.16) !important;
  color: var(--pp-brand-primary) !important;
}
.pilanda-side-link--fav .pilanda-side-link-icon,
.pilanda-side-link--fav .pilanda-side-link-icon svg {
  width: 14px; height: 14px;
  color: var(--pp-brand-primary);
}

/* Dashboard row (Mein Dashboard + Unternehmens-Dashboard) */
.pilanda-side-dashboards {
  margin: var(--pp-space-1) 0 4px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid var(--pp-bg-sunken) !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pilanda-side-link--dash {
  font-size: 13px !important;
  color: var(--pp-text-secondary) !important;
  font-weight: var(--pp-weight-regular) !important;
  margin: 0 8px !important;
  padding: var(--pp-space-2) 12px !important;
  border-radius: var(--pp-radius-ui) !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.pilanda-side-link--dash:hover {
  background: var(--pp-bg-base) !important;
  color: var(--pp-text-primary) !important;
}
.pilanda-side-link--dash.is-active {
  background: rgb(var(--pp-brand-primary-rgb) / 0.08) !important;
  color: var(--pp-brand-primary) !important;
}
/* Unternehmens-Dashboard wrapper */
.pilanda-side-dash > summary {
  font-size: 13px !important;
  color: var(--pp-text-secondary) !important;
  font-weight: var(--pp-weight-regular) !important;
  padding: var(--pp-space-2) 12px !important;
  margin: 0 8px !important;
  border-radius: var(--pp-radius-ui) !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.pilanda-side-dash > summary:hover {
  background: var(--pp-bg-base) !important;
  color: var(--pp-text-primary) !important;
}
.pilanda-side-dash[open] > summary { font-weight: var(--pp-weight-medium) !important; }
.pilanda-side-dash > summary > .pilanda-side-caret {
  margin-left: auto;
  color: var(--pp-text-disabled);
  width: 12px; height: 12px;
}
/* Sub-item news entries: indented to 28px */
.pilanda-side-news {
  list-style: none;
  margin: 2px 8px var(--pp-space-1);
  padding: 0;
  border-left: 0;
}
.pilanda-side-news li a {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: var(--pp-space-1);
  padding: 4px 8px 4px var(--pp-space-8);
  font-size: 12px;
  color: var(--pp-text-tertiary);
  text-decoration: none;
  border-radius: var(--pp-radius-ui);
}
.pilanda-side-news li a:hover { background: var(--pp-bg-base); color: var(--pp-text-secondary); }
.pilanda-side-news-dot { width: 5px; height: 5px; background: var(--pp-border-default); border-radius: var(--pp-radius-full); }
.pilanda-side-news-more a { padding-left: var(--pp-space-8); font-size: 11.5px; color: var(--pp-text-disabled); }

/* Zone (section) headers */
.pilanda-side-zone--collapse {
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.pilanda-side-zone--collapse > summary {
  padding: 20px 16px var(--pp-space-1) !important;
  background: transparent !important;
  border-radius: 0 !important;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--pp-space-1);
}
.pilanda-side-zone--collapse > summary:hover { background: transparent !important; }
.pilanda-side-zone--collapse > summary > span {
  font-size: 10px !important;
  font-weight: var(--pp-weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: var(--pp-text-disabled) !important;
}
.pilanda-side-zone--collapse > summary > .pilanda-side-caret {
  margin-left: auto;
  color: var(--pp-border-default) !important;
  width: 12px; height: 12px;
}
.pilanda-side-zone--collapse[open] > summary > .pilanda-side-caret { transform: rotate(180deg); }
.pilanda-side-zone-body {
  padding: 2px 0 2px !important;
}

/* Nav items (all entries inside a zone, plus the dashboard
 * row default style) */
.pilanda-side-nav .pilanda-side-link {
  font-size: 13px;
  font-weight: var(--pp-weight-regular);
  color: var(--pp-text-secondary);
  padding: var(--pp-space-2) 12px;
  margin: 1px 8px;
  border-radius: var(--pp-radius-ui);
  border: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.pilanda-side-nav .pilanda-side-link:hover {
  background: var(--pp-bg-base);
  color: var(--pp-text-primary);
  text-decoration: none;
}
.pilanda-side-nav .pilanda-side-link:hover .pilanda-side-link-icon,
.pilanda-side-nav .pilanda-side-link:hover .pilanda-side-link-icon svg {
  color: var(--pp-text-secondary);
}
.pilanda-side-nav .pilanda-side-link.is-active {
  background: rgb(var(--pp-brand-primary-rgb) / 0.08);
  color: var(--pp-brand-primary);
  font-weight: var(--pp-weight-medium);
}
.pilanda-side-nav .pilanda-side-link.is-active .pilanda-side-link-icon,
.pilanda-side-nav .pilanda-side-link.is-active .pilanda-side-link-icon svg {
  color: var(--pp-brand-primary);
}

.pilanda-side-nav .pilanda-side-link-icon {
  width: 16px;
  height: 16px;
  color: var(--pp-text-tertiary);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.pilanda-side-nav .pilanda-side-link-icon svg {
  width: 16px; height: 16px; color: inherit;
}
.pilanda-side-nav .pilanda-side-link-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================================
 * Per-App Highlight / Accent  (Pilanda Apps)
 * =============================================================
 * Purely additive — only elements carrying data-pp-module="<slug>"
 * are touched, so layout and the default look are unchanged.
 * --highlight-current / --accent-current are resolved from the
 * [data-pp-module] rule injected by pilanda_theme (admin pick),
 * falling back to the module's default hue (tokens.css) and finally
 * to the brand primary, so the rules are safe even if the design
 * tokens are not loaded.
 * ============================================================= */

/* Landing cards — icon tint at rest, brand-gradient on hover, and
   a left highlight edge so each app is recognisable at a glance. */
.pilanda-card[data-pp-module] {
  box-shadow: inset 3px 0 0 var(--highlight-current, var(--pp-brand-primary)),
              var(--pp-shadow-xs);
}
.pilanda-card[data-pp-module] .pilanda-card-icon {
  color: var(--accent-current, var(--pp-brand-primary));
}
.pilanda-card[data-pp-module]:hover .pilanda-card-icon {
  background: linear-gradient(135deg,
              var(--highlight-current, var(--pp-brand-primary)),
              var(--accent-current, var(--pp-brand-secondary)));
  color: var(--pp-text-on-accent);
}

/* Sidebar links — active entry adopts its app's highlight, the
   icon adopts the accent; hover previews the accent on the icon. */
.pilanda-side-link[data-pp-module].is-active {
  color: var(--highlight-current, var(--pp-brand-primary));
}
.pilanda-side-link[data-pp-module].is-active::before {
  background: var(--highlight-current, var(--pp-brand-primary));
}
.pilanda-side-link[data-pp-module].is-active .pilanda-side-link-icon,
.pilanda-side-link[data-pp-module]:hover .pilanda-side-link-icon {
  color: var(--accent-current, var(--pp-brand-primary));
}

/* =================================================================
 * Desk — persönliches Dashboard (/app/pilanda-home)
 * =================================================================
 * Das Desk-Layout hat keine eigene Shell-Klasse (.pilanda-page),
 * daher braucht .pilanda-home--dashboard einen eigenen Kontext-Block.
 * Alle Karten-Klassen (.pilanda-userdash*, .pilanda-noti*, .news-*)
 * existieren bereits oben und greifen hier automatisch.
 * 19.07.: Voller Canvas (Marco-Direktive) — die frühere 900-px-Grenze ist
 * aufgehoben; das Home-Dashboard nutzt die volle Breite (das aktive
 * /app/pilanda-home rendert ohnehin über PpDashboard@2).
 * ================================================================= */
.pilanda-home--dashboard {
  max-width: none;
}
.pilanda-home--dashboard .pilanda-hero {
  margin-bottom: 24px;
}
/* Greeting-Zeile unter H1 — leichter Text analog zur www-Seite */
.pilanda-home-greeting {
  font-size: 14px;
  color: var(--pp-text-tertiary);
  margin: 0;
}
.pilanda-home-greeting strong {
  color: var(--pp-text-primary);
}

/* =================================================================
   Login-Reskin (ENTWICKLUNGSPLAN.md §6 · E-Login, N4 13.07.2026)
   Optik wie der Klickdummy: Vollbild-Radial im Marken-Cyan, zentrierte
   Karte, Logo mittig (Theme-SSOT app_logo_url), pill-Credentials, runder
   Cyan-Login-Button, 2000-px-Variante. UPDATE-SICHER: reines CSS auf die
   Frappe-Login-Seite (body[data-path="login"]) — KEIN Core-/Template-Edit.
   Der LCS-SSO-Knopf (.btn-lcs_sso) bleibt sichtbar & funktional.
   Grenze (ehrlich): Frappe nutzt getrennte E-Mail-/Passwort-Felder; die
   „einzeilige" Optik ist als gestapeltes Pill-Paar mit Pfeil-Button
   angenähert — echtes Ein-Feld-Layout bräuchte einen Template-Override
   (bewusst NICHT, Update-Sicherheit). Optische Feinabnahme → N6/Marco.
   ================================================================= */
body[data-path="login"] {
  min-height: 100vh;
  background: var(--pp-login-grad) !important;
}
body[data-path="login"] main.container {
  min-height: 100vh;
  max-width: none;
}
/* Logo bleibt oben, das Eingabe-Fenster (Karte) sitzt mittig UNTEN am Screen. */
body[data-path="login"] section.for-login,
body[data-path="login"] section.for-signup,
body[data-path="login"] section.for-forgot,
body[data-path="login"] section.for-login-with-email-link {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 100vh;
  padding: 7vh 16px 7vh;
  box-sizing: border-box;
}
body[data-path="login"] .login-content.page-card {
  width: min(400px, 92vw);
  margin: 0;
  padding: 36px 32px 30px;
  background: rgb(255 255 255 / 0.97);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 26px 64px rgb(var(--pp-shadow-ink-rgb) / 0.34);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body[data-path="login"] .page-card-head { text-align: center; }
body[data-path="login"] .page-card-head .app-logo {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
}
body[data-path="login"] .page-card-head h4 {
  text-align: center;
  font-weight: 700;
  color: var(--pp-text-primary);
}
/* Credential-Felder als Pillen mit Innen-Icon */
body[data-path="login"] .email-field,
body[data-path="login"] .password-field { position: relative; }
body[data-path="login"] .login-content input.form-control {
  height: 46px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--pp-login-field);
  padding-left: 42px;
  font-size: 14px;
  color: var(--pp-text-primary);
}
body[data-path="login"] .login-content input.form-control::placeholder { color: var(--pp-login-ph); }
body[data-path="login"] .login-content input.form-control:focus {
  border-color: var(--pp-brand-primary);
  box-shadow: 0 0 0 3px var(--pp-accent-soft);
  background: #fff;
  outline: none;
}
body[data-path="login"] .field-icon { color: var(--pp-login-ph); z-index: 2; }
/* Primär-Login als runder Cyan-Pfeil-Button */
body[data-path="login"] .btn-login,
body[data-path="login"] .btn-forgot,
body[data-path="login"] .btn-login-with-email-link {
  height: 46px;
  border-radius: 999px;
  border: 0;
  background: var(--pp-brand-primary);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
}
body[data-path="login"] .btn-login::after { content: "  \2192"; font-weight: 700; }
body[data-path="login"] .btn-login:hover,
body[data-path="login"] .btn-forgot:hover { background: var(--pp-brand-700, #075c5c); }
/* SSO-/Optionsknöpfe (LCS SSO!) — nur restylen, immer sichtbar */
body[data-path="login"] .btn-login-option {
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--pp-border-default);
  background: #fff;
  color: var(--pp-text-primary);
  font-weight: 600;
}
body[data-path="login"] .btn-lcs_sso {
  border-color: var(--pp-brand-primary);
  color: var(--pp-brand-700, #075c5c);
}
body[data-path="login"] .btn-lcs_sso:hover { background: var(--pp-accent-soft); }
body[data-path="login"] .login-divider { color: var(--pp-text-tertiary); }
/* 2000 px+ (4K) — größere Variante */
@media (min-width: 2000px) {
  body[data-path="login"] .login-content.page-card {
    width: min(560px, 40vw);
    padding: 56px 50px 46px;
    border-radius: 22px;
  }
  body[data-path="login"] .page-card-head .app-logo { width: 96px; height: 96px; margin-bottom: 16px; }
  body[data-path="login"] .page-card-head h4 { font-size: 26px; }
  body[data-path="login"] .login-content input.form-control { height: 58px; font-size: 17px; padding-left: 50px; }
  body[data-path="login"] .btn-login,
  body[data-path="login"] .btn-forgot,
  body[data-path="login"] .btn-login-with-email-link { height: 58px; font-size: 17px; }
  body[data-path="login"] .btn-login-option { height: 54px; font-size: 16px; }
}
/* Mobil (<=640px) — Login kompakt & erreichbar (Karte nicht unter Fold/Tastatur) */
@media (max-width: 640px) {
  body[data-path="login"] main.container,
  body[data-path="login"] section.for-login,
  body[data-path="login"] section.for-signup,
  body[data-path="login"] section.for-forgot,
  body[data-path="login"] section.for-login-with-email-link {
    min-height: 100dvh;
  }
  body[data-path="login"] section.for-login,
  body[data-path="login"] section.for-signup,
  body[data-path="login"] section.for-forgot,
  body[data-path="login"] section.for-login-with-email-link {
    justify-content: center;
    gap: 20px;
    padding: 4vh 14px calc(4vh + env(safe-area-inset-bottom, 0px));
  }
  body[data-path="login"] .login-content.page-card {
    width: 94vw;
    padding: 26px 20px 22px;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgb(var(--pp-shadow-ink-rgb) / 0.28);
  }
}