/* POS-Assistant Design System 2026 Eine Quelle fuer Farben, Abstaende, Radien und Typografie. Die Primitivtokens (--ds-canvas, --ds-surface, --ds-ink, --ds-accent ...) stammen aus der Anmeldeseite 2026 und sind fuer Dark und Light gleichwertig definiert. Die --pos-*-Namen bleiben als Aliasse erhalten, damit bestehende Regeln unveraendert weiterlaufen und automatisch der zentralen Palette folgen. WICHTIG: data-theme sitzt auf (app-main.js applyTheme). Die Aliasse werden deshalb auch auf body deklariert. Nur auf :root deklariert wuerden sie den Dark-Wert festschreiben und Light Mode wirkungslos machen. */ :root{ color-scheme:dark; /* Flaechen */ --ds-canvas:#06080D; --ds-surface:#0E1420; --ds-surface-2:#121A28; --ds-surface-3:#1B2332; /* Linien */ --ds-line:rgba(255,255,255,.09); --ds-line-soft:rgba(255,255,255,.055); --ds-line-strong:rgba(255,255,255,.15); /* Text */ --ds-ink:#F2F5FB; --ds-ink-2:#AFBACD; --ds-ink-3:#7A879D; /* Akzent */ --ds-accent:#5B9DFF; --ds-accent-2:#2563EB; --ds-accent-ink:#FFFFFF; --ds-accent-soft:rgba(91,157,255,.12); --ds-focus:#8CC0FF; --ds-focus-ring:rgba(140,192,255,.34); --ds-accent-ring:rgba(91,157,255,.22); /* Status */ --ds-danger:#FF8B8B; --ds-danger-bg:rgba(239,68,68,.10); --ds-danger-line:rgba(239,68,68,.28); --ds-success:#34D399; --ds-success-bg:rgba(16,185,129,.10); --ds-success-line:rgba(16,185,129,.28); --ds-warning:#FBBF24; --ds-warning-bg:rgba(245,158,11,.10); --ds-warning-line:rgba(245,158,11,.28); /* Schriftgrade */ --ds-step-1:12px; --ds-step-2:13px; --ds-step-3:15px; --ds-step-4:19px; --ds-step-5:26px; --ds-step-6:38px; /* Raster */ --ds-sp:8px; --ds-radius:14px; --ds-radius-lg:22px; --ds-font:-apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, Roboto, Helvetica, Arial, sans-serif; --ds-font-mono:ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --ds-scrim:rgba(2,6,13,.72); --ds-shadow-sm:0 6px 18px rgba(0,0,0,.22); --ds-shadow:0 18px 50px rgba(0,0,0,.34); --ds-shadow-lg:0 24px 70px rgba(0,0,0,.48); } body[data-theme="light"]{ color-scheme:light; --ds-canvas:#EDF1F7; --ds-surface:#FFFFFF; --ds-surface-2:#F6F8FC; --ds-surface-3:#EEF2F8; --ds-line:rgba(10,21,36,.11); --ds-line-soft:rgba(10,21,36,.07); --ds-line-strong:rgba(10,21,36,.20); --ds-ink:#0A1524; --ds-ink-2:#41506A; --ds-ink-3:#6B7A93; --ds-accent:#2563EB; --ds-accent-2:#1D4ED8; --ds-accent-ink:#FFFFFF; --ds-accent-soft:rgba(37,99,235,.09); --ds-focus:#1D4ED8; --ds-focus-ring:rgba(29,78,216,.34); --ds-accent-ring:rgba(37,99,235,.22); --ds-danger:#B42318; --ds-danger-bg:rgba(180,35,24,.07); --ds-danger-line:rgba(180,35,24,.22); --ds-success:#067647; --ds-success-bg:rgba(6,118,71,.07); --ds-success-line:rgba(6,118,71,.22); --ds-warning:#B54708; --ds-warning-bg:rgba(181,71,8,.07); --ds-warning-line:rgba(181,71,8,.22); --ds-scrim:rgba(12,20,33,.42); --ds-shadow-sm:0 6px 18px rgba(10,21,36,.07); --ds-shadow:0 18px 50px rgba(10,21,36,.10); --ds-shadow-lg:0 24px 70px rgba(10,21,36,.14); } /* Aliasse. Auf :root UND body, damit der Theme-Wechsel auf body durchschlaegt. */ :root, body{ --pos-bg:var(--ds-canvas); --pos-top:var(--ds-surface); --pos-panel:var(--ds-surface); --pos-panel-2:var(--ds-surface-2); --pos-surface-raised:var(--ds-surface-3); --pos-line:var(--ds-line); --pos-line-strong:var(--ds-line-strong); --pos-text:var(--ds-ink); --pos-muted:var(--ds-ink-2); --pos-soft:var(--ds-ink-3); --pos-blue:var(--ds-accent); --pos-blue-2:var(--ds-accent); --pos-green:var(--ds-success); --pos-amber:var(--ds-warning); --pos-red:var(--ds-danger); --pos-teal:var(--ds-accent); --pos-space-1:4px; --pos-space-2:var(--ds-sp); --pos-space-3:12px; --pos-space-4:16px; --pos-space-5:20px; --pos-space-6:24px; --pos-space-8:32px; --pos-space-10:40px; --pos-radius-sm:9px; --pos-radius-md:12px; --pos-radius:var(--ds-radius); --pos-radius-lg:18px; --pos-radius-xl:var(--ds-radius-lg); --pos-radius-pill:999px; --pos-shadow-sm:var(--ds-shadow-sm); --pos-shadow:var(--ds-shadow); --pos-shadow-lg:var(--ds-shadow-lg); --pos-font:var(--ds-font); --pos-text-xs:var(--ds-step-1); --pos-text-sm:var(--ds-step-2); --pos-text-md:var(--ds-step-3); --pos-text-lg:var(--ds-step-4); --pos-text-xl:var(--ds-step-5); --pos-line-height:1.5; --pos-content-width:1540px; --pos-header-height:64px; --pos-panel-gap:14px; --pos-table-row-height:40px; --pos-form-width:720px; --pos-control-height:40px; --pos-touch-target:44px; --pos-focus-ring:0 0 0 3px var(--ds-focus-ring); } /* Shared visual rhythm. Kept deliberately small and additive. */ body[data-pos-surface]{font-family:var(--pos-font);} body[data-pos-surface] button, body[data-pos-surface] input, body[data-pos-surface] select, body[data-pos-surface] textarea{font-family:inherit;} body[data-pos-surface] :focus-visible{outline:2px solid var(--pos-blue-2);outline-offset:2px;} /* ===== Führung & Entwicklung: bring the manager cockpit into the same POS shell ===== */ body[data-pos-surface="leadership"]{ --line-soft:var(--ds-line-soft); --stroke:var(--pos-line); --panel-2:var(--pos-panel-2); --tint:var(--ds-accent-soft); --on-accent:var(--ds-accent-ink); --accent-line:var(--ds-accent-ring); --scrim:var(--ds-scrim); --danger-bg:var(--ds-danger-bg); --danger-line:var(--ds-danger-line); --success-bg:var(--ds-success-bg); --success-line:var(--ds-success-line); --warning-bg:var(--ds-warning-bg); --warning-line:var(--ds-warning-line); --bg:var(--pos-bg); --panel:var(--pos-panel); --line:var(--pos-line); --text:var(--pos-text); --muted:var(--pos-muted); --blue:var(--pos-blue); --blue2:var(--pos-blue-2); --green:var(--pos-green); --red:var(--pos-red); --orange:var(--pos-amber); --teal:var(--pos-teal); --shadow:var(--pos-shadow); background:var(--ds-canvas); color:var(--pos-text); } body[data-pos-surface="leadership"] .page{max-width:1540px;padding:18px 28px 38px;} body[data-pos-surface="leadership"] .topbar{ min-height:64px;margin:0 0 22px;padding:13px 18px;border:1px solid var(--pos-line); border-radius:18px;background:var(--ds-surface);box-shadow:var(--pos-shadow); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } body[data-pos-surface="leadership"] .back{ border:1px solid var(--pos-line-strong);background:var(--ds-line-soft);color:var(--ds-accent); transition:background .15s ease,border-color .15s ease,transform .15s ease; } body[data-pos-surface="leadership"] .back:hover{background:var(--ds-accent-soft);border-color:var(--ds-accent-ring);} body[data-pos-surface="leadership"] .topbar h1{color:var(--pos-text);letter-spacing:-.25px;} body[data-pos-surface="leadership"] .topbar p, body[data-pos-surface="leadership"] .actor{color:var(--pos-muted);} body[data-pos-surface="leadership"] .actor strong{color:var(--pos-text);} body[data-pos-surface="leadership"] .notice{ border-color:var(--ds-accent-ring);background:var(--ds-accent-soft);color:var(--ds-accent); } body[data-pos-surface="leadership"] .notice.error{border-color:var(--ds-danger-line);background:var(--ds-danger-bg);color:var(--ds-danger);} body[data-pos-surface="leadership"] .cards{gap:12px;margin:14px 0;} body[data-pos-surface="leadership"] .card, body[data-pos-surface="leadership"] .panel, body[data-pos-surface="leadership"] .box, body[data-pos-surface="leadership"] .topic, body[data-pos-surface="leadership"] .obs{ background:linear-gradient(180deg,var(--ds-surface),var(--ds-surface)); border-color:var(--pos-line);box-shadow:var(--ds-shadow-sm); } body[data-pos-surface="leadership"] .card{border-radius:16px;} body[data-pos-surface="leadership"] .card .label{color:var(--ds-ink-3);} body[data-pos-surface="leadership"] .card .value{color:var(--pos-text);letter-spacing:-.7px;} body[data-pos-surface="leadership"] .card .sub, body[data-pos-surface="leadership"] .small, body[data-pos-surface="leadership"] .panel-head p, body[data-pos-surface="leadership"] .sales-form label, body[data-pos-surface="leadership"] .kv div:nth-child(odd){color:var(--pos-muted);} body[data-pos-surface="leadership"] .panel{border-radius:18px;overflow:hidden;} body[data-pos-surface="leadership"] .panel-head{border-bottom-color:var(--pos-line);background:var(--ds-line-soft);} body[data-pos-surface="leadership"] .panel-head h2, body[data-pos-surface="leadership"] .box h3{color:var(--pos-text);letter-spacing:-.2px;} body[data-pos-surface="leadership"] input, body[data-pos-surface="leadership"] select, body[data-pos-surface="leadership"] textarea{ background:var(--ds-surface-2);color:var(--pos-text);border-color:var(--ds-line);box-shadow:none; } body[data-pos-surface="leadership"] input::placeholder, body[data-pos-surface="leadership"] textarea::placeholder{color:var(--ds-ink-3);} body[data-pos-surface="leadership"] button, body[data-pos-surface="leadership"] .btn{ border-color:var(--ds-accent-ring);background:linear-gradient(180deg,var(--ds-accent),var(--ds-accent-2));box-shadow:0 8px 20px var(--ds-accent-ring); } body[data-pos-surface="leadership"] .btn.secondary{background:var(--ds-line-soft);color:var(--ds-accent);border-color:var(--pos-line-strong);box-shadow:none;} body[data-pos-surface="leadership"] .table th, body[data-pos-surface="leadership"] .task-table th{background:var(--ds-surface-2);color:var(--ds-ink-3);border-bottom-color:var(--pos-line);} body[data-pos-surface="leadership"] .table td, body[data-pos-surface="leadership"] .task-table td{border-bottom-color:var(--ds-line-soft);} body[data-pos-surface="leadership"] .table tr.data-row:hover{background:var(--ds-accent-soft);} body[data-pos-surface="leadership"] .progress{background:var(--ds-surface-3);} body[data-pos-surface="leadership"] .progress>span{background:linear-gradient(90deg,var(--pos-blue),var(--ds-accent-2));} body[data-pos-surface="leadership"] .tag{border-color:var(--ds-accent-ring);background:var(--ds-accent-soft);color:var(--ds-accent);} body[data-pos-surface="leadership"] .tag.green{background:var(--ds-success-bg);border-color:var(--ds-success-line);color:var(--ds-success);} body[data-pos-surface="leadership"] .tag.orange{background:var(--ds-warning-bg);border-color:var(--ds-warning-line);color:var(--ds-warning);} body[data-pos-surface="leadership"] .tag.red{background:var(--ds-danger-bg);border-color:var(--ds-danger-line);color:var(--ds-danger);} body[data-pos-surface="leadership"] .tag.gray{background:var(--ds-line-soft);border-color:var(--ds-line);color:var(--ds-ink-2);} body[data-pos-surface="leadership"] .tag.teal{background:var(--ds-success-bg);border-color:var(--ds-success-line);color:var(--ds-success);} body[data-pos-surface="leadership"] .event{background:var(--ds-accent-soft);border-left-color:var(--ds-accent);} body[data-pos-surface="leadership"] .modal-bg{background:var(--ds-scrim);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);} body[data-pos-surface="leadership"] .modal{background:var(--ds-surface);border:1px solid var(--pos-line);color:var(--pos-text);box-shadow:var(--ds-shadow-lg);} /* ===== Main portal: preserve its existing design, only normalize micro-details ===== */ body[data-pos-surface="portal"]{ --bg:var(--pos-bg); --panel:var(--pos-panel); --line:var(--pos-line); --line-soft:var(--ds-line-soft); --red:var(--pos-red); --green:var(--pos-green); --orange:var(--pos-amber); --panel-2:var(--pos-panel-2); --tint:var(--ds-accent-soft); --on-accent:var(--ds-accent-ink); --accent-line:var(--ds-accent-ring); --scrim:var(--ds-scrim); --danger-bg:var(--ds-danger-bg); --danger-line:var(--ds-danger-line); --success-bg:var(--ds-success-bg); --success-line:var(--ds-success-line); --warning-bg:var(--ds-warning-bg); --warning-line:var(--ds-warning-line); --page:var(--pos-bg); --topbar:var(--pos-top); --card:var(--pos-panel); --card2:var(--pos-panel-2); --hero:var(--pos-panel-2); --stroke:var(--pos-line); --stroke2:var(--pos-line-strong); --text:var(--pos-text); --muted:var(--pos-muted); --blue:var(--pos-blue); --blue2:var(--pos-blue-2); --danger:var(--pos-red); --shadow:var(--pos-shadow); --shadow2:var(--pos-shadow-sm); --radius:var(--pos-radius); --ring:var(--pos-focus-ring); } body[data-pos-surface="portal"] .topbar, body[data-pos-surface="portal"] .tile, body[data-pos-surface="portal"] .heroCard{border-color:var(--stroke, var(--pos-line));} body[data-pos-surface="portal"] button, body[data-pos-surface="portal"] a{transition-property:opacity,transform,background,border-color,box-shadow;transition-duration:.15s;} /* ===== Onboarding: same shell/blue language without changing its component layout ===== */ body[data-pos-surface="onboarding"]{ --line:var(--pos-line); --line-soft:var(--ds-line-soft); --stroke:var(--pos-line); --shadow:var(--pos-shadow); --red:var(--pos-red); --green:var(--pos-green); --orange:var(--pos-amber); --panel-2:var(--pos-panel-2); --tint:var(--ds-accent-soft); --on-accent:var(--ds-accent-ink); --accent-line:var(--ds-accent-ring); --scrim:var(--ds-scrim); --danger-bg:var(--ds-danger-bg); --danger-line:var(--ds-danger-line); --success-bg:var(--ds-success-bg); --success-line:var(--ds-success-line); --warning-bg:var(--ds-warning-bg); --warning-line:var(--ds-warning-line); --bg:var(--pos-bg); --topbar:var(--pos-top); --card:var(--pos-panel); --card2:var(--pos-panel-2); --panel:var(--pos-panel); --panel-strong:var(--pos-surface-raised); --border:var(--pos-line); --text:var(--pos-text); --muted:var(--pos-muted); --soft:var(--pos-soft); --blue:var(--pos-blue); --blue2:var(--pos-blue-2); --cyan:var(--pos-blue); --violet:var(--pos-blue-2); --emerald:var(--pos-green); --amber:var(--pos-amber); --rose:var(--pos-red); background: radial-gradient(850px 410px at 15% -10%,rgba(59,130,246,.09),transparent 62%), radial-gradient(820px 460px at 95% 10%,rgba(139,92,246,.08),transparent 64%), var(--pos-bg); } body[data-pos-surface="onboarding"] .header, body[data-pos-surface="onboarding"] .level-card, body[data-pos-surface="onboarding"] .panel, body[data-pos-surface="onboarding"] .trainer-card{border-color:var(--pos-line);} /* ===== Angebotsleitfaden: shift old near-black shell toward the POS palette ===== */ body[data-pos-surface="offers"]{ --panel:var(--pos-panel); --line:var(--pos-line); --line-soft:var(--ds-line-soft); --shadow:var(--pos-shadow); --red:var(--pos-red); --green:var(--pos-green); --orange:var(--pos-amber); --panel-2:var(--pos-panel-2); --tint:var(--ds-accent-soft); --on-accent:var(--ds-accent-ink); --accent-line:var(--ds-accent-ring); --scrim:var(--ds-scrim); --danger-bg:var(--ds-danger-bg); --danger-line:var(--ds-danger-line); --success-bg:var(--ds-success-bg); --success-line:var(--ds-success-line); --warning-bg:var(--ds-warning-bg); --warning-line:var(--ds-warning-line); --bg:var(--pos-bg); --card:var(--pos-panel); --card2:var(--pos-panel-2); --tint:var(--pos-panel-2); --stroke:var(--pos-line); --border:var(--pos-line-strong); --divider:var(--pos-line); --text:var(--pos-text); --sub:var(--pos-muted); --accent:var(--pos-blue); --blue2:var(--pos-blue-2); --success:var(--pos-green); --r:var(--pos-radius-md); --r-lg:var(--pos-radius-lg); --shadow1:var(--pos-shadow); --shadow2:0 0 0 1px var(--pos-line); background: radial-gradient(900px 430px at 18% -8%,rgba(59,130,246,.10),transparent 62%), radial-gradient(850px 500px at 94% 14%,rgba(59,130,246,.06),transparent 64%), var(--pos-bg); } body[data-pos-surface="offers"] .c{background:linear-gradient(180deg,var(--ds-surface),var(--ds-surface));border-color:var(--pos-line);box-shadow:var(--pos-shadow);} body[data-pos-surface="offers"] .app-footer{color:var(--pos-muted);} /* ===== Activate+: retain its richer copilot layout, normalize shell tones ===== */ body[data-pos-surface="activate"]{ --line-soft:var(--ds-line-soft); --stroke:var(--pos-line); --red:var(--pos-red); --panel-2:var(--pos-panel-2); --tint:var(--ds-accent-soft); --on-accent:var(--ds-accent-ink); --accent-line:var(--ds-accent-ring); --scrim:var(--ds-scrim); --danger-bg:var(--ds-danger-bg); --danger-line:var(--ds-danger-line); --success-bg:var(--ds-success-bg); --success-line:var(--ds-success-line); --warning-bg:var(--ds-warning-bg); --warning-line:var(--ds-warning-line); --bg:var(--pos-bg); --danger:var(--pos-red); --panel:var(--pos-panel); --panel2:var(--pos-panel-2); --panel3:var(--pos-surface-raised); --line:var(--pos-line); --line2:var(--pos-line-strong); --text:var(--pos-text); --muted:var(--pos-muted); --blue:var(--pos-blue); --blue2:var(--pos-blue-2); --green:var(--pos-green); --orange:var(--pos-amber); --yellow:var(--pos-amber); --purple:var(--pos-blue-2); --shadow:var(--pos-shadow); background: radial-gradient(circle at 8% 3%,rgba(59,130,246,.17),transparent 30%), radial-gradient(circle at 92% 18%,rgba(37,99,235,.08),transparent 31%), var(--pos-bg); } body[data-pos-surface="activate"] .pos-module-topbar{border-color:var(--pos-line);box-shadow:var(--pos-shadow);} @media(max-width:700px){ body[data-pos-surface="leadership"] .page{padding:10px;} body[data-pos-surface="leadership"] .topbar{border-radius:14px;margin-bottom:12px;} } /* ===== Phase 6: shared component contracts ===== */ .pos-sr-only{ position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important; overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; } body[data-pos-surface]{line-height:var(--pos-line-height);} body[data-pos-surface] :where(button,a,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--pos-blue-2);outline-offset:2px;box-shadow:var(--pos-focus-ring); } body[data-pos-surface] :where(button,.btn,.profileAction,.posModalBtn,.authBtn,.heroCta,.desktopNavLink,.nav-btn){ border-radius:var(--pos-radius-md); } body[data-pos-surface] :where(input,select,textarea){border-radius:var(--pos-radius-md);} body[data-pos-surface] :where(.panel,.posModal,.modal,.feedback-modal){border-radius:var(--pos-radius-lg);} body[data-pos-surface] :where(.card,.moduleCard,.level-card,.trainer-card,.video-card,.device-card,.mobile-employee-card,.next-action-card){ border-radius:var(--pos-radius); } body[data-pos-surface] :where(.tag,.badge,.pill,.heroBadge,.chip){border-radius:var(--pos-radius-pill);} /* Buttons / icon buttons */ body[data-pos-surface] :where(button,.btn)[disabled]{opacity:.55;cursor:not-allowed;} body[data-pos-surface] :where(.posTopbarBtn,.posTopbarAvatar,.themeToggle,.menu,.clear){min-width:var(--pos-control-height);min-height:var(--pos-control-height);} /* Forms */ body[data-pos-surface] :where(input,select,textarea){min-height:var(--pos-control-height);} body[data-pos-surface] textarea{line-height:1.45;} /* State components */ body[data-pos-surface] :where(.toast,.notice,.empty,.mobile-list-empty,.loader,.notificationEmpty){font-size:var(--pos-text-sm);} body[data-pos-surface] :where(.empty,.mobile-list-empty,.loader,.notificationEmpty){padding:var(--pos-space-6);text-align:center;} body[data-pos-surface] [aria-busy="true"]{cursor:progress;} /* Tables */ body[data-pos-surface] :where(.table,.task-table) th{height:var(--pos-table-row-height);} body[data-pos-surface] :where(.table,.task-table) td{min-height:var(--pos-table-row-height);} /* Dialogs */ body[data-pos-surface] [role="dialog"][aria-modal="true"]{outline:none;} body.pos-modal-open{overflow:hidden;} /* Leadership native employee action */ body[data-pos-surface="leadership"] .employee-open-btn{ display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;box-shadow:none;font-weight:inherit; } body[data-pos-surface="leadership"] .employee-open-btn:hover .name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;} body[data-pos-surface="leadership"] .employee-open-btn:focus-visible{outline:2px solid var(--pos-blue-2);outline-offset:3px;box-shadow:none;border-radius:var(--pos-radius-sm);} body[data-pos-surface="leadership"] .table tbody tr.data-row{cursor:default;} @media (prefers-reduced-motion:reduce){ html:focus-within{scroll-behavior:auto!important;} *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; scroll-behavior:auto!important; } } /* Token consumption across the five active product surfaces. */ body[data-pos-surface="leadership"] .page{max-width:var(--pos-content-width);} body[data-pos-surface="leadership"] .topbar{min-height:var(--pos-header-height);} body[data-pos-surface="leadership"] .panel{margin-top:var(--pos-panel-gap);} body[data-pos-surface="activate"] .workspace{width:min(100%,var(--pos-content-width));} body[data-pos-surface="activate"] .pos-module-topbar{min-height:var(--pos-header-height);} body[data-pos-surface="portal"] .topbar{min-height:var(--pos-header-height);} body[data-pos-surface="offers"] .posTopbar{min-height:var(--pos-header-height);} body[data-pos-surface="onboarding"] .header{border-radius:var(--pos-radius-xl);} @media (hover: hover) and (pointer: fine){ body[data-pos-surface="leadership"] .back:hover{transform:translateY(-1px);} } /* ===== Phase 6 (Nachtrag): Bypass Blocks (WCAG 2.4.1) ===== */ .pos-skip-link{ position:absolute; left:12px; top:-100px; z-index:9999; padding:10px 16px; border-radius:8px; background:var(--pos-panel); color:var(--pos-text,var(--ds-ink)); border:2px solid var(--ds-focus); font:600 15px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; text-decoration:none; min-height:44px; display:inline-flex; align-items:center; transition:top .15s ease; } .pos-skip-link:focus,.pos-skip-link:focus-visible{ top:12px; outline:3px solid var(--ds-focus); outline-offset:2px; } @media (prefers-reduced-motion: reduce){ .pos-skip-link{ transition:none; } } /* Tabellen-Beschriftung fuer Screenreader, visuell unsichtbar. */ table > caption.pos-sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* ===== Phase 6 (Nachtrag): erhoehter Kontrast ===== */ @media (prefers-contrast: more){ :root{ --pos-border-strong:currentColor; } .pos-skip-link,button,.btn,input,select,textarea,[role="dialog"]{ border-width:2px; } a{ text-decoration:underline; } *:focus-visible{ outline:3px solid currentColor; outline-offset:2px; } }