/* Schritt 266: gemeinsame, helle Navigation auf Startseite und im Arbeitsbereich. */
html body .pd-navigation,
html body .app-shell > .sidebar.pd-navigation {
 position:sticky;top:12px;z-index:100;display:flex;align-items:center;gap:14px;
 width:calc(100% - 32px);min-height:80px;height:auto;margin:12px 16px 0;padding:8px 22px;
 border:1px solid #ffffffd9;border-radius:20px;background:linear-gradient(115deg,#fff,#f6fbff);
 color:#152e50;box-shadow:0 12px 30px #234b7624,0 2px 6px #234b7608;box-sizing:border-box;
}
.pd-navigation-brand {display:flex;align-items:center;margin-right:auto;text-decoration:none}
.pd-navigation-brand img {display:block;width:76px;height:64px;object-fit:contain}
.pd-navigation-actions {display:flex;align-items:center;gap:14px;margin-left:auto}
.pd-navigation .icon-btn {color:#184579;background:#edf5ff;border-color:#d8e7f8;border-radius:12px;min-width:42px;min-height:42px}
.pd-login-dropdown {position:relative}
.pd-login-dropdown summary {display:flex;align-items:center;gap:10px;padding:11px 18px;min-height:44px;box-sizing:border-box;list-style:none;border:1px solid var(--primary);border-radius:11px;color:var(--primary);background:#fff;cursor:pointer;font-weight:650}
.pd-login-dropdown summary::-webkit-details-marker {display:none}
.pd-login-dropdown summary:focus-visible {outline:3px solid #98c7ff;outline-offset:3px}
.pd-login-dropdown[open] .pd-login-chevron {transform:rotate(180deg)}
.pd-login-dropdown > .login-card {position:absolute;top:calc(100% + 12px);right:0;width:min(350px,calc(100vw - 40px));max-width:none;margin:0;padding:24px;border:1px solid #dfebf8;border-radius:16px;background:var(--surface,#fff);box-shadow:0 16px 40px #204a7930;box-sizing:border-box}
.pd-login-dropdown .login-card h2 {font-size:1.25rem;line-height:1.3}
.pd-login-dropdown .login-card .eyebrow {display:none}
.pd-login-dropdown .login-card .muted {font-size:.9rem;line-height:1.5;margin:8px 0 16px}
.pd-login-dropdown .login-card form {display:grid;gap:14px}
.pd-login-dropdown .login-card input {font-size:16px;width:100%;box-sizing:border-box}
.pd-login-dropdown .login-card .form-row {margin:0;display:flex;justify-content:center;font-size:.85rem}
.pd-login-dropdown .login-card .primary {width:100%;min-height:44px}
.pd-login-dropdown .login-card .alert {margin-block:12px}
html body .login-shell.pd-startpage {display:block;min-height:calc(100dvh - 160px);padding:0;background:transparent}
html body .pd-startpage .login-visual {min-height:calc(100dvh - 230px);padding:70px max(32px,7vw);border-radius:0;background:radial-gradient(ellipse at 85% 20%,#b1e3ff65,transparent 55%),linear-gradient(140deg,#f8fcff,#eef6ff);box-sizing:border-box}
.pd-startpage .login-copy {margin:auto 0;max-width:1050px}
.pd-startpage .login-copy h1 {font-size:clamp(2.4rem,5.6vw,5.7rem)}
html body .pd-startpage .pd-startpage-secondary {min-height:0;padding:12px;display:flex;justify-content:center;background:transparent}
html body .pd-startpage .login-hero-links {display:flex!important;flex-wrap:wrap;gap:16px;margin-top:28px}
html body .pd-startpage .login-hero-links > a {flex:0 1 340px}
html body .app-shell > .sidebar.pd-navigation .brand {flex:0 0 76px;width:76px;min-width:76px;height:62px;border-radius:0;background:transparent;filter:none}
html body .app-shell > .sidebar.pd-navigation .brand .primadipla-nav-logo {width:76px;height:62px;max-width:none;max-height:none;object-fit:contain}
html body .pd-navigation nav a,html body .pd-navigation .settings {color:#183455;background:transparent;border-radius:9px}
html body .pd-navigation nav a:hover,html body .pd-navigation .settings:hover {color:var(--primary);background:#eaf3ff}
html body .pd-navigation nav a.active,html body .pd-navigation .settings.active {color:var(--primary);background:#edf5ff;box-shadow:inset 0 -3px var(--primary)}
html body .pd-navigation .utility-actions {border-color:#d7e5f5}
html body .pd-navigation nav a[data-nav-group-start]::before {background:#d7e5f5}
html body .pd-navigation .mobile-menu-toggle {color:#183455;border-color:#cfdef0;background:#edf5ff}
html[data-theme=dark] body .pd-navigation,html[data-theme=dark] body .app-shell > .sidebar.pd-navigation {background:linear-gradient(115deg,#182a40,#203750);border-color:#36516d;color:#e2eeff;box-shadow:0 12px 30px #0005}
html[data-theme=dark] body .pd-navigation nav a,html[data-theme=dark] body .pd-navigation .settings {color:#deebfa}
html[data-theme=dark] body .pd-navigation nav a:hover,html[data-theme=dark] body .pd-navigation nav a.active,html[data-theme=dark] body .pd-navigation .settings:hover,html[data-theme=dark] body .pd-navigation .settings.active {background:#2c4665;color:#a8d5ff}
html[data-theme=dark] .pd-navigation .icon-btn,html[data-theme=dark] .pd-login-dropdown summary,html[data-theme=dark] body .pd-navigation .mobile-menu-toggle {background:#233e5c;color:#cce5ff;border-color:#496687}
html[data-theme=dark] .pd-login-dropdown > .login-card {border-color:#496687}
html[data-theme=dark] body .pd-startpage .login-visual {background:radial-gradient(ellipse at 85% 20%,#13528066,transparent 55%),linear-gradient(140deg,#132237,#1a3048);color:#e2eeff}
html[data-theme=dark] .pd-startpage .login-copy p {color:#bfd0e4}
@media(max-width:900px) {
 html body .pd-navigation,html body .app-shell > .sidebar.pd-navigation {top:8px;width:calc(100% - 16px);margin:8px 8px 0;padding:6px 12px;gap:8px;min-height:72px;border-radius:16px}
 html body .pd-startpage .login-visual {padding:42px 22px!important;border-radius:0}
 html body .pd-startpage .login-copy h1 {font-size:clamp(2.2rem,7vw,3.8rem)}
 html body .pd-startpage .login-hero-links {display:grid!important;grid-template-columns:1fr;width:100%;max-width:480px}
 html body .app-shell > .sidebar.pd-navigation .brand {flex-basis:70px;width:70px;min-width:70px;height:58px}
 html body .app-shell > .sidebar.pd-navigation .brand .primadipla-nav-logo {width:70px;height:58px}
}
@media print {html body .pd-navigation {display:none!important}}
/* Auch gewählte Designvarianten verwenden dieselbe helle Kopfleiste. */
html[data-design-theme] body .app-shell > aside.sidebar.pd-navigation[class] {background:linear-gradient(115deg,#fff,#f6fbff)!important;box-shadow:0 12px 30px #234b7624,0 2px 6px #234b7608!important}
html[data-theme=dark][data-design-theme] body .app-shell > aside.sidebar.pd-navigation[class] {background:linear-gradient(115deg,#182a40,#203750)!important;box-shadow:0 12px 30px #0005!important}
html[data-theme=dark] .pd-navigation-brand,html[data-theme=dark] body .app-shell > .sidebar.pd-navigation .brand {background:#f5faff;border-radius:10px}

/* Schritt 267: Original-Wortmarke neben dem P, nur auf der Startseite.
   Ausschnitte des unveränderten Original-Logos bewahren Schrift und i-Punkte. */
.pd-guest-navigation .pd-navigation-brand {gap:16px;min-width:0;flex-shrink:0;padding:4px 8px}
.pd-brand-symbol,.pd-brand-wordmark {display:block;flex-shrink:0;background-image:url('/public/assets/img/primadipla-logo-transparent.png');background-repeat:no-repeat}
.pd-brand-symbol {width:67.2px;height:76.8px;background-size:150.48px 150.48px;background-position:-45.6px -26.4px}
.pd-brand-caption {display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.pd-brand-wordmark {width:228px;height:47px;background-size:250.8px 250.8px;background-position:-12px -174px}
.pd-brand-slogan {font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:12.5px;font-weight:500;line-height:1.4;letter-spacing:0;color:#183455;white-space:nowrap}
html body .pd-guest-navigation {min-height:106px}
html body .app-shell > .sidebar.pd-navigation {min-height:100px}
html body .app-shell > .sidebar.pd-navigation .brand {flex:0 0 98px;width:98px;min-width:98px;height:84px}
html body .app-shell > .sidebar.pd-navigation .brand .primadipla-nav-logo {width:98px;height:84px}
@media(max-width:900px) {
 html body .app-shell > .sidebar.pd-navigation {min-height:90px}
 html body .app-shell > .sidebar.pd-navigation .brand {flex-basis:90px;width:90px;min-width:90px;height:74px}
 html body .app-shell > .sidebar.pd-navigation .brand .primadipla-nav-logo {width:90px;height:74px}
}
@media(max-width:600px) {
 html body .pd-guest-navigation {flex-wrap:wrap;justify-content:space-between;gap:6px;padding:10px 12px}
 .pd-guest-navigation .pd-navigation-brand {gap:10px;padding:0;flex-basis:100%}
 .pd-guest-navigation .pd-navigation-actions {margin-left:auto}
 .pd-brand-symbol {width:56px;height:64px;background-size:125.4px 125.4px;background-position:-38px -22px}
 .pd-brand-wordmark {width:193.8px;height:39.95px;background-size:213.18px 213.18px;background-position:-10.2px -147.9px}
 .pd-brand-slogan {font-size:11px}
}

/* Schritt 268: gut sichtbarer blauer Abmelden-Button. */
html body .app-shell > .sidebar.pd-navigation .nav-account .logout {
 display:inline-flex;align-items:center;justify-content:center;
 min-height:42px;padding:10px 18px;border:1px solid #0875ed;border-radius:11px;
 background:linear-gradient(135deg,#168bff,#0875ed);color:#fff;
 font-weight:650;cursor:pointer;box-shadow:0 2px 6px #0875ed18;
 transition:background 160ms ease,box-shadow 160ms ease,border-color 160ms ease;
}
html body .app-shell > .sidebar.pd-navigation .nav-account .logout:hover,
html body .app-shell > .sidebar.pd-navigation .nav-account .logout:focus-visible {
 background:linear-gradient(135deg,#087df5,#0567d6);color:#fff;border-color:#0567d6;
 box-shadow:0 5px 16px #0875ed40;
}
html body .app-shell > .sidebar.pd-navigation .nav-account .logout:focus-visible {
 outline:3px solid #9acaff;outline-offset:3px;
}
@media(prefers-reduced-motion:reduce) {
 html body .app-shell > .sidebar.pd-navigation .nav-account .logout {transition:none}
}

/* Schritt 269: kompakter Einstieg nach Marketingvorlage. */
body:has(.pd-startpage) {
 background:radial-gradient(ellipse at 0% 8%,#ccecff88,transparent 34%),radial-gradient(ellipse at 100% 25%,#b8dfff88,transparent 40%),linear-gradient(140deg,#f5fbff,#eaf5ff 65%,#f9fcff);
}
html body .login-shell.pd-startpage {min-height:calc(100dvh - 180px);position:relative;background:transparent}
.pd-hero {position:relative;isolation:isolate;overflow:hidden;padding:36px 40px 38px;min-height:245px;box-sizing:border-box}
.pd-hero::before,.pd-hero::after {content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%}
.pd-hero::before {width:360px;height:520px;left:-327px;top:-360px;background:#a5d9ff40;transform:rotate(25deg)}
.pd-hero::after {width:600px;height:430px;right:-465px;top:15px;background:linear-gradient(130deg,#8ccaff55,#d7edff33);transform:rotate(-35deg)}
.pd-hero-content {position:relative;z-index:1}
.pd-hero-pill {display:inline-flex;align-items:center;text-decoration:none;padding:8px 16px;border-radius:999px;border:1px solid #bdddff;background:#e9f5ff;color:#0875ed;font-size:10px;line-height:1.4;font-weight:750;letter-spacing:2px;text-transform:uppercase;box-shadow:0 3px 9px #2279c510}
.pd-hero-pill:hover {background:#dfefff;box-shadow:0 4px 12px #0875ed22}
.pd-hero-pill:focus-visible {outline:3px solid #8ec4ff;outline-offset:3px}
.pd-hero h1 {margin:16px 0 6px;color:#080e33;font-size:clamp(30px,3.15vw,55px);font-weight:800;line-height:1.17;letter-spacing:-.035em;max-width:1450px}
.pd-hero h1 span {color:#087cff}
.pd-hero-subtitle {margin:0;color:#52648c;font-size:clamp(21px,2.1vw,33px);line-height:1.4;font-weight:450;letter-spacing:-.015em}
.pd-hero-note {display:flex;align-items:center;gap:8px;justify-content:flex-end;margin:8px 340px 0 auto;color:#173b6e;width:max-content;max-width:100%;transform:rotate(-5deg)}
.pd-hero-note p {margin:0;font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;font-size:15px;font-style:italic;font-weight:600;line-height:1.3;letter-spacing:.4px}
.pd-hero-note svg {display:block;width:68px;height:52px;flex-shrink:0}
html body .pd-startpage .pd-startpage-links {padding:0 40px 24px}
html body .pd-startpage .pd-startpage-links .login-hero-links {margin:0;max-width:740px}
html[data-theme=dark] body:has(.pd-startpage) {background:radial-gradient(ellipse at 0% 8%,#1c538655,transparent 38%),radial-gradient(ellipse at 100% 25%,#155f8c44,transparent 45%),linear-gradient(140deg,#101e31,#182e46)}
html[data-theme=dark] .pd-hero h1 {color:#eef5ff}
html[data-theme=dark] .pd-hero h1 span {color:#5ca9ff}
html[data-theme=dark] .pd-hero-subtitle {color:#b7cbe8}
html[data-theme=dark] .pd-hero-note {color:#badcff}
html[data-theme=dark] .pd-hero-pill {color:#a9d7ff;background:#213f5e;border-color:#3e6e99}
html[data-theme=dark] .pd-hero::before,html[data-theme=dark] .pd-hero::after {opacity:.35}
@media(min-width:1700px) {.pd-hero {padding-left:56px;padding-right:56px}.pd-hero-note {margin-right:380px}}
@media(max-width:1100px) {.pd-hero-note {margin-right:20px}.pd-hero h1 {max-width:950px}}
@media(max-width:600px) {
 .pd-hero {padding:28px 22px 24px;min-height:0}
 .pd-hero-pill {font-size:9px;letter-spacing:1.4px;padding:8px 12px}
 .pd-hero h1 {font-size:clamp(28px,7.6vw,42px);margin-top:18px;line-height:1.15}
 .pd-hero h1 span {display:block;margin-top:5px}
 .pd-hero-subtitle {font-size:21px;margin-top:14px}
 .pd-hero-note {margin:24px 4px 4px auto;gap:4px}
 .pd-hero-note p {font-size:13px}
 .pd-hero-note svg {width:50px;height:44px}
 html body .pd-startpage .pd-startpage-links {padding:0 22px 22px}
}

/* Hinweis neben dem Slogan, mit Platz unter dem Login-Dropdown. */
.pd-hero-note {position:absolute;right:380px;bottom:24px;margin:0}
@media(max-width:1100px) {.pd-hero-note {right:38px}}
@media(max-width:600px) {.pd-hero-note {position:static;margin:24px 4px 4px auto}}

/* Schritt 270: lesbarer Slogan, türkiser Akzent und blauer Login. */
.pd-brand-slogan {font-size:18px;line-height:1.4}
.pd-automatic-accent {color:#008d91;font-weight:750}
html[data-theme=dark] .pd-hero .pd-automatic-accent {color:#35d4ce}
.pd-hero-note {top:16px;right:40px;bottom:auto;margin:0}
.pd-hero-note p {font-size:20px;line-height:1.35}
.pd-hero-note svg {width:76px;height:64px}
/* Keep the note beside the open sign-in panel. */
body:has(.pd-login-dropdown[open]) .pd-hero-note {right:400px}
html body .pd-login-dropdown > summary,
html body .pd-login-dropdown .login-card button.primary {
 color:#fff;border:1px solid #0875ed;border-radius:11px;
 background:linear-gradient(135deg,#168bff,#0875ed);
 box-shadow:0 2px 6px #0875ed18;
 transition:background 160ms ease,box-shadow 160ms ease,border-color 160ms ease;
}
html body .pd-login-dropdown > summary:hover,
html body .pd-login-dropdown > summary:focus-visible,
html body .pd-login-dropdown .login-card button.primary:hover,
html body .pd-login-dropdown .login-card button.primary:focus-visible {
 color:#fff;background:linear-gradient(135deg,#087df5,#0567d6);
 border-color:#0567d6;box-shadow:0 5px 16px #0875ed40;
}
html body .pd-login-dropdown > summary:focus-visible,
html body .pd-login-dropdown .login-card button.primary:focus-visible {outline:3px solid #9acaff;outline-offset:3px}
/* On narrower screens the note flows below the headline without overlaps. */
@media(max-width:1100px) {
 .pd-hero-note,body:has(.pd-login-dropdown[open]) .pd-hero-note {position:static;margin:24px 0 4px auto}
 .pd-brand-slogan {font-size:16px}
}
@media(max-width:600px) {
 .pd-brand-slogan {font-size:clamp(12px,3.5vw,16px);white-space:normal;max-width:240px}
 .pd-brand-caption {min-width:0}
 .pd-hero-note p {font-size:18px}
 .pd-hero-note svg {width:62px;height:52px}
}
@media(prefers-reduced-motion:reduce) {
 html body .pd-login-dropdown > summary,html body .pd-login-dropdown .login-card button.primary {transition:none}
}
/* Schritt 271: linke Funktionsreiter nach Vorlage. */
.pd-feature-showcase {display:grid;grid-template-columns:300px minmax(0,1fr);gap:34px;margin:0 24px 28px;padding:16px;border:1px solid #fff;border-radius:28px;background:linear-gradient(125deg,#fffffff5,#f6fbfff5);box-shadow:0 14px 40px #3575ad15;min-width:0}
.pd-feature-tabs {display:flex;flex-direction:column;align-self:start;padding:0 0 8px;border-right:1px solid #dcecfb;background:linear-gradient(110deg,#fff,#edf6ff77);border-radius:18px 0 0 18px;min-width:0}
.pd-feature-tab {display:flex;align-items:center;gap:18px;position:relative;width:100%;min-height:58px;padding:13px 18px;border:0;border-radius:12px;background:transparent;color:#18365d;font:inherit;font-size:15px;font-weight:500;line-height:1.35;text-align:left;cursor:pointer;box-sizing:border-box;transition:background 160ms ease,color 160ms ease,box-shadow 160ms ease}
.pd-feature-tab:not(:last-child)::after {content:"";position:absolute;bottom:0;left:16px;right:16px;height:1px;background:#dfedfa}
.pd-feature-tab svg {width:28px;height:28px;flex:0 0 28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pd-feature-chevron {margin-left:auto;font-size:25px;font-weight:400;line-height:1}
.pd-feature-tab:hover {background:#e8f3ff;color:#0875ed}
.pd-feature-tab[aria-selected=true] {color:#fff;background:linear-gradient(120deg,#087bf4,#168bff);font-weight:650;box-shadow:0 5px 16px #0875ed25}
.pd-feature-tab[aria-selected=true]::after {display:none}
.pd-feature-tab:focus-visible {outline:3px solid #8dc4ff;outline-offset:-3px}
.pd-feature-content {min-width:0;padding:18px 26px 28px 0;align-self:start}
.pd-feature-panel[hidden] {display:none!important}
.pd-feature-panel {max-width:900px}
.pd-feature-kicker {margin:0 0 14px;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:750;color:#0875ed}
.pd-feature-panel h2 {margin:0 0 18px;color:#102444;font-size:clamp(28px,2.8vw,44px);line-height:1.15;letter-spacing:-.035em;max-width:660px}
.pd-feature-description {max-width:650px;color:#456080;font-size:17px;line-height:1.7;margin:0 0 24px}
.pd-feature-checks {display:grid;gap:18px;list-style:none;padding:0;margin:0 0 32px;color:#244766;font-size:16px;line-height:1.5}
.pd-feature-checks li {display:flex;gap:13px;align-items:flex-start}
.pd-feature-checks li::before {content:"✓";display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#e3f6ff,#a2d6ff);color:#0875ed;font-size:20px;font-weight:800}
.pd-feature-more {display:inline-flex;align-items:center;gap:24px;padding:14px 22px;border-radius:999px;text-decoration:none;font-weight:650;background:linear-gradient(120deg,#087bf4,#168bff);color:#fff;box-shadow:0 4px 14px #0875ed20}
.pd-feature-more:hover {box-shadow:0 7px 20px #0875ed38}
.pd-feature-more:focus-visible,.pd-feature-panel:focus-visible {outline:3px solid #8dc4ff;outline-offset:4px}
html[data-theme=dark] .pd-feature-showcase {background:linear-gradient(125deg,#182d44,#1e3852);border-color:#39536e}
html[data-theme=dark] .pd-feature-tabs {background:#162a3c;border-color:#3a566e}
html[data-theme=dark] .pd-feature-tab {color:#d3e5fa}
html[data-theme=dark] .pd-feature-tab:not(:last-child)::after {background:#2c4861}
html[data-theme=dark] .pd-feature-tab:hover {background:#284967}
html[data-theme=dark] .pd-feature-tab[aria-selected=true] {background:linear-gradient(120deg,#087bf4,#168bff);color:#fff}
html[data-theme=dark] .pd-feature-panel h2 {color:#eef6ff}
html[data-theme=dark] .pd-feature-description,html[data-theme=dark] .pd-feature-checks {color:#bfd3e8}
html[data-theme=dark] .pd-feature-kicker {color:#79baff}
@media(max-width:1000px) {.pd-feature-showcase {grid-template-columns:260px minmax(0,1fr);gap:24px}.pd-feature-tab {gap:12px;font-size:14px}.pd-feature-content {padding-right:8px}}
@media(max-width:700px) {.pd-feature-showcase {display:block;margin:0 12px 22px;padding:12px;border-radius:22px}.pd-feature-tabs {border:0;border-radius:14px;display:grid;grid-template-columns:1fr 1fr;gap:4px}.pd-feature-tab {padding:12px 9px;gap:8px;font-size:12px;min-height:60px}.pd-feature-tab svg {width:23px;height:23px;flex-basis:23px}.pd-feature-chevron {font-size:20px}.pd-feature-tab::after {display:none}.pd-feature-content {padding:28px 8px 16px}.pd-feature-description {font-size:16px}.pd-feature-checks {font-size:15px}.pd-feature-more {font-size:14px;gap:12px}}
@media(max-width:360px) {.pd-feature-tabs {grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce) {.pd-feature-tab {transition:none}}

/* Schritt 272: passendes Bildmotiv pro Feature im rechten Bereich. */
.pd-feature-panel {display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.35fr);gap:clamp(24px,3vw,60px);align-items:center;max-width:none;width:100%}
.pd-feature-text {min-width:0}
.pd-feature-visual {position:relative;min-width:0;width:100%;margin:0;border-radius:22px;padding:8px;background:linear-gradient(140deg,#effaff,#deefff);border:1px solid #d5e9fb;box-shadow:0 18px 42px #2164a520;box-sizing:border-box;overflow:hidden}
.pd-feature-visual img {display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px}
.pd-feature-content {align-self:center}
html[data-theme=dark] .pd-feature-visual {background:linear-gradient(140deg,#203e59,#182f48);border-color:#416480;box-shadow:0 18px 42px #0004}
@media(max-width:1200px) {.pd-feature-panel {grid-template-columns:1fr;gap:28px}.pd-feature-visual {max-width:780px}.pd-feature-content {align-self:start}}
@media(max-width:700px) {.pd-feature-panel {gap:24px}.pd-feature-visual {padding:6px;border-radius:18px}.pd-feature-visual img {border-radius:12px}}
@media(min-width:1201px) {.pd-feature-visual {max-width:1100px;justify-self:center}}

/* Schritt 273: Menüfarben unabhängig vom Dienstplan-Layout. */
html body .app-shell > .sidebar.pd-navigation nav a:not(.active),
html body .app-shell > .sidebar.pd-navigation .settings:not(.active) {
 color:#183455!important;opacity:1;
}
html body .app-shell > .sidebar.pd-navigation nav a .nav-label,
html body .app-shell > .sidebar.pd-navigation nav a .nav-icon,
html body .app-shell > .sidebar.pd-navigation .settings .nav-label,
html body .app-shell > .sidebar.pd-navigation .settings .nav-icon {color:inherit!important;opacity:1}
html body .app-shell > .sidebar.pd-navigation nav a:hover,
html body .app-shell > .sidebar.pd-navigation nav a:focus-visible,
html body .app-shell > .sidebar.pd-navigation nav a.active,
html body .app-shell > .sidebar.pd-navigation .settings:hover,
html body .app-shell > .sidebar.pd-navigation .settings.active {
 color:#0875ed!important;background:#edf5ff!important;
}
html body .app-shell > .sidebar.pd-navigation nav a.active,
html body .app-shell > .sidebar.pd-navigation .settings.active {
 box-shadow:inset 0 -3px #3478f6!important;
}
html body .app-shell > .sidebar.pd-navigation .nav-account-copy strong {color:#183455}
html body .app-shell > .sidebar.pd-navigation .nav-account-copy small {color:#526b89}
html[data-theme=dark] body .app-shell > .sidebar.pd-navigation nav a:not(.active),
html[data-theme=dark] body .app-shell > .sidebar.pd-navigation .settings:not(.active) {color:#deebfa!important}
html[data-theme=dark] body .app-shell > .sidebar.pd-navigation nav a:hover,
html[data-theme=dark] body .app-shell > .sidebar.pd-navigation nav a:focus-visible,
html[data-theme=dark] body .app-shell > .sidebar.pd-navigation nav a.active,
html[data-theme=dark] body .app-shell > .sidebar.pd-navigation .settings:hover,
html[data-theme=dark] body .app-shell > .sidebar.pd-navigation .settings.active {color:#a8d5ff!important;background:#2c4665!important}
html[data-theme=dark] body .app-shell > .sidebar.pd-navigation .nav-account-copy strong {color:#deebfa}
html[data-theme=dark] body .app-shell > .sidebar.pd-navigation .nav-account-copy small {color:#b6cbe2}

/* Schritt 274: Loginformular unabhängig von der Breite des Auslösers. */
html body .pd-login-dropdown > .login-card {
 width:min(360px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;
 min-width:0!important;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;
 max-height:var(--pd-login-height,calc(100dvh - 140px));
}
html body .pd-login-dropdown > .login-card h2 {font-size:20px!important;line-height:1.3;overflow-wrap:normal;word-break:normal}
html body .pd-login-dropdown > .login-card .muted {font-size:14px!important;line-height:1.5;overflow-wrap:normal;word-break:normal}
html body .pd-login-dropdown > .login-card label {min-width:0}
html body .pd-login-dropdown > .login-card input {min-width:0;width:100%;font-size:16px!important}
html body .pd-login-dropdown > .login-card .password-wrap {min-width:0}
html body .pd-guest-navigation .pd-login-note,
html body:has(.pd-login-dropdown[open]) .pd-guest-navigation .pd-login-note {
 position:static;inset:auto;display:flex;align-items:center;width:auto;max-width:none;
 flex:0 0 auto;margin:0 4px 0 8px;gap:4px;transform:rotate(-4deg);
}
.pd-login-note p {font-size:16px;line-height:1.25}
.pd-login-note svg {width:58px;height:48px;transform:rotate(35deg)}
@media(max-width:1100px) {
 html body .pd-guest-navigation {flex-wrap:wrap}
 html body .pd-guest-navigation .pd-navigation-actions {flex-wrap:nowrap}
 html body .pd-guest-navigation .pd-login-note {margin:0;gap:2px}
 .pd-login-note p {font-size:14px}.pd-login-note svg {width:44px;height:42px}
}
@media(max-width:600px) {
 html body .pd-guest-navigation .pd-navigation-actions {width:100%;justify-content:flex-end;gap:9px}
 .pd-login-note p {font-size:12px}.pd-login-note svg {width:34px;height:36px}
 html body .pd-login-dropdown > .login-card {
 position:fixed!important;top:var(--pd-login-top,140px)!important;right:12px!important;left:auto!important;
 width:calc(100vw - 24px)!important;max-width:380px!important;margin:0!important;
 padding:22px!important;border-radius:16px!important;
 }
 html body .pd-login-dropdown > .login-card .form-row {font-size:14px;flex-wrap:wrap}
 html body .pd-login-dropdown > .login-card label > span {font-size:14px!important}
}
@media(max-width:360px) {.pd-navigation-actions {gap:6px!important}.pd-login-note p {font-size:11px}.pd-login-note svg {width:26px}.pd-login-dropdown summary {gap:6px;padding-inline:12px}}

/* Wiederverwendbarer weißer Button: bisheriger Kontakt-Button der Startseite.
   Optional: .pd-button-white-icon, .pd-button-white-copy (strong + small),
   .pd-button-white-arrow. Bewusst ohne positionsabhängige Außenabstände. */
.pd-button-white {display:inline-flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid #bfd7fa;border-radius:16px;background:rgba(255,255,255,.82);color:#173a68;text-decoration:none;font:inherit;cursor:pointer;box-shadow:0 12px 30px rgba(28,80,150,.09);transition:transform .2s,box-shadow .2s;box-sizing:border-box}
.pd-button-white:hover,.pd-button-white:focus-visible {transform:translateY(-2px);box-shadow:0 15px 30px rgba(28,80,150,.17)}
.pd-button-white:focus-visible {outline:3px solid #8dc4ff;outline-offset:3px}
.pd-button-white-icon {display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:#e8f2ff;color:#266cea;font-size:23px}
.pd-button-white-copy strong,.pd-button-white-copy small {display:block}
.pd-button-white-copy small {margin-top:2px;color:#526884;font-size:.83rem}
.pd-button-white-arrow {margin-left:10px;font-size:22px}
html[data-theme=dark] .pd-button-white {background:#203553;border-color:#4e709c;color:#e6f0ff}
html[data-theme=dark] .pd-button-white-copy small {color:#cbdcf3}
html[data-theme=dark] .pd-button-white-icon {background:#2e4d75;color:#c2ddff}
@media(prefers-reduced-motion:reduce) {.pd-button-white {transition:none}.pd-button-white:hover,.pd-button-white:focus-visible {transform:none}}

/* Schritt 276: zentrales Original-Logo und echter Screenshot im Laptop. */
.pd-device-scene {position:relative;overflow:hidden;border-radius:16px;isolation:isolate;aspect-ratio:3/2}
.pd-device-scene > img:first-child {width:100%;height:100%;object-fit:cover;border-radius:0}
html body .pd-feature-visual .pd-original-screen {position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:contain;background:#f7faff;border-radius:0;transform-origin:0 0;visibility:hidden;pointer-events:none}
html body .pd-feature-visual .pd-original-screen[data-ready] {visibility:visible}
/* Schritt 278: vollständiges Logo mittig in der Startseiten-Navigation. */
html body .pd-navigation.pd-guest-navigation {display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);min-height:190px;padding-block:5px;gap:16px}
html body .pd-guest-navigation .pd-top-center-brand {grid-column:2;grid-row:1;display:flex;justify-content:center;align-items:center;justify-self:center;flex-basis:auto;width:180px;height:180px;margin:0;padding:0;gap:0;background:transparent;border-radius:0}
html body .pd-guest-navigation .pd-top-center-brand img {display:block;width:180px;height:180px;object-fit:contain}
html body .pd-guest-navigation .pd-navigation-actions {grid-column:3;grid-row:1;justify-self:end;width:auto;margin:0;flex-wrap:nowrap}
html[data-theme=dark] body .pd-guest-navigation .pd-top-center-brand {background:#f5faff;border-radius:18px}
@media(max-width:1100px) {
 html body .pd-navigation.pd-guest-navigation {grid-template-columns:1fr;padding:8px 14px 14px;gap:8px}
 html body .pd-guest-navigation .pd-top-center-brand {grid-column:1;grid-row:1;width:155px;height:155px}
 html body .pd-guest-navigation .pd-top-center-brand img {width:155px;height:155px}
 html body .pd-guest-navigation .pd-navigation-actions {grid-column:1;grid-row:2;justify-self:end;width:auto}
}
@media(max-width:600px) {
 html body .pd-guest-navigation .pd-top-center-brand {width:145px;height:145px}
 html body .pd-guest-navigation .pd-top-center-brand img {width:145px;height:145px}
 html body .pd-guest-navigation .pd-navigation-actions {justify-content:flex-end;width:100%}
}

/* Schritt 279: gut lesbarer blauer Menü-Button auf Smartphones. */
html body .app-shell > .sidebar.pd-navigation .mobile-menu-toggle {
 color:#fff!important;border:1px solid #0875ed!important;
 background:linear-gradient(135deg,#168bff,#0875ed)!important;
 box-shadow:0 2px 6px #0875ed18;font-weight:650;
 transition:background 160ms ease,box-shadow 160ms ease;
}
html body .app-shell > .sidebar.pd-navigation .mobile-menu-toggle:hover,
html body .app-shell > .sidebar.pd-navigation .mobile-menu-toggle:focus-visible {
 color:#fff!important;background:linear-gradient(135deg,#087df5,#0567d6)!important;
 border-color:#0567d6!important;box-shadow:0 5px 16px #0875ed40;
}
html body .app-shell > .sidebar.pd-navigation .mobile-menu-toggle span {color:inherit!important}
html body .app-shell > .sidebar.pd-navigation .mobile-menu-toggle:focus-visible {outline:3px solid #9acaff;outline-offset:3px}
html body .pd-mobile-scene .pd-original-screen {object-fit:fill;border-radius:9% / 5%}
@media(prefers-reduced-motion:reduce) {html body .app-shell > .sidebar.pd-navigation .mobile-menu-toggle {transition:none}}

/* Slogan unter dem zentrierten Logo, Akzent aus den Original-i-Punkten. */
html body .pd-guest-navigation .pd-top-center-brand {flex-direction:column;width:400px;max-width:100%;height:auto;min-height:205px;gap:0}
html body .pd-guest-navigation .pd-top-center-brand .pd-header-slogan {display:block;font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:18px;line-height:1.4;font-weight:500;color:#183455;text-align:center;white-space:nowrap}
.pd-header-slogan strong {color:#26c18e;font-weight:750}
.pd-hero-subtitle .pd-automatic-accent {color:#26c18e}
@media(max-width:1300px) {
 html body .pd-navigation.pd-guest-navigation {grid-template-columns:1fr;gap:8px;padding:8px 14px 14px}
 html body .pd-guest-navigation .pd-top-center-brand {grid-column:1;grid-row:1;min-height:190px}
 html body .pd-guest-navigation .pd-navigation-actions {grid-column:1;grid-row:2;justify-self:end}
}
@media(max-width:600px) {
 html body .pd-guest-navigation .pd-top-center-brand {width:100%;min-height:172px}
 html body .pd-guest-navigation .pd-top-center-brand .pd-header-slogan {font-size:clamp(12px,3.5vw,16px);white-space:normal}
}

/* Gemeinsame Bildsprache nach dem Login: hellblauer Seitenhintergrund. */
html body.pd-workspace {
 background-color:#eaf5ff;
 background-image:radial-gradient(ellipse at 0% 8%,#b9e6ff99,transparent 38%),radial-gradient(ellipse at 100% 28%,#a9d6ff80,transparent 44%),radial-gradient(ellipse at 20% 95%,#d7f3ff88,transparent 48%),linear-gradient(140deg,#f5fbff,#e4f2ff 65%,#f2f9ff);
}
html body.pd-workspace .app-shell,
html body.pd-workspace .app-shell > main,
html body.pd-workspace .app-shell .page {background:transparent}
html body.pd-workspace .app-shell .topbar {background:rgba(247,252,255,.88);border-bottom:1px solid #d6e9fa}
html[data-theme=dark] body.pd-workspace {
 background-color:#122239;
 background-image:radial-gradient(ellipse at 0% 8%,#1c538655,transparent 38%),radial-gradient(ellipse at 100% 25%,#155f8c44,transparent 45%),linear-gradient(140deg,#101e31,#182e46);
}
html[data-theme=dark] body.pd-workspace .app-shell .topbar {background:rgba(22,42,62,.9);border-bottom-color:#304d69}
@media print {html body.pd-workspace {background:#fff!important}}

/* Schritt 280: gespeicherte Theme- und Markenfarben gelten auch im neuen Layout. */
html[data-design-theme] body.pd-workspace {
 background-color:var(--pd-theme-bg,#eaf5ff);
 background-image:radial-gradient(ellipse at 0% 8%,color-mix(in srgb,var(--brand-accent) 14%,transparent),transparent 40%),radial-gradient(ellipse at 100% 28%,color-mix(in srgb,var(--primary) 12%,transparent),transparent 44%),linear-gradient(140deg,color-mix(in srgb,var(--pd-theme-bg,#eaf5ff) 45%,#fff),var(--pd-theme-bg,#eaf5ff));
}
html[data-theme=dark][data-design-theme] body.pd-workspace {background-color:var(--pd-theme-dark-bg,#122239);background-image:radial-gradient(ellipse at 0% 8%,color-mix(in srgb,var(--brand-accent) 12%,transparent),transparent 40%),linear-gradient(140deg,var(--pd-theme-dark-bg,#122239),var(--pd-theme-dark-surface,#1b2d44))}
html[data-design-theme] body .app-shell > aside.sidebar.pd-navigation[class] {background:linear-gradient(115deg,var(--sidebar),color-mix(in srgb,var(--sidebar) 95%,var(--brand-accent)))!important;box-shadow:0 12px 30px #234b7624,0 2px 6px #234b7608!important;color:var(--pd-nav-ink,#183455)}
html[data-design-theme] body .app-shell > .sidebar.pd-navigation nav a:not(.active),html[data-design-theme] body .app-shell > .sidebar.pd-navigation .settings:not(.active) {color:var(--pd-nav-ink,#183455)!important}
html[data-design-theme] body .app-shell > .sidebar.pd-navigation nav a.active,html[data-design-theme] body .app-shell > .sidebar.pd-navigation nav a:hover,html[data-design-theme] body .app-shell > .sidebar.pd-navigation .settings.active {color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 12%,var(--sidebar))!important;box-shadow:inset 0 -3px var(--primary)!important}
html[data-theme=dark][data-design-theme] body .app-shell > aside.sidebar.pd-navigation[class] {background:var(--pd-theme-dark-surface,#1b2d44)!important;color:#deebfa}
html[data-theme=dark][data-design-theme] body .app-shell > .sidebar.pd-navigation nav a:not(.active),html[data-theme=dark][data-design-theme] body .app-shell > .sidebar.pd-navigation .settings:not(.active) {color:#deebfa!important}
html[data-theme=dark][data-design-theme] body .app-shell > .sidebar.pd-navigation nav a.active,html[data-theme=dark][data-design-theme] body .app-shell > .sidebar.pd-navigation nav a:hover,html[data-theme=dark][data-design-theme] body .app-shell > .sidebar.pd-navigation .settings.active {color:color-mix(in srgb,var(--primary) 45%,#fff)!important;background:var(--pd-theme-dark-soft,#203b55)!important}
html[data-design-theme] body.pd-workspace .topbar {background:color-mix(in srgb,var(--surface) 92%,transparent);border-bottom-color:var(--border)}
html body.pd-workspace .app-shell > .sidebar.pd-navigation .logout,html body.pd-workspace .app-shell > .sidebar.pd-navigation .mobile-menu-toggle {background:var(--primary)!important;border-color:var(--primary)!important;color:var(--brand-on-primary,#fff)!important}
html body.pd-workspace .app-shell > .sidebar.pd-navigation .nav-account-copy strong {color:var(--pd-nav-ink,#183455)}
html body.pd-workspace .app-shell > .sidebar.pd-navigation .nav-account-copy small {color:color-mix(in srgb,var(--pd-nav-ink,#183455) 75%,transparent)}
html body.pd-workspace .app-shell > .sidebar.pd-navigation.nav-text-light .brand {background:#f5faff;border-radius:10px}
html[data-theme=dark] body.pd-workspace .app-shell > .sidebar.pd-navigation .nav-account-copy strong {color:#deebfa}
html[data-theme=dark] body.pd-workspace .app-shell > .sidebar.pd-navigation .nav-account-copy small {color:#b7cadd}

/* Schritt 281: kompakte, dauerhaft erreichbare Startnavigation beim Scrollen. */
.pd-mobile-navigation-spacer[hidden] {display:none!important}
html body .pd-navigation.pd-guest-navigation.pd-navigation-compact {
 position:fixed;top:12px;left:16px;right:16px;width:auto;margin:0;min-height:82px;
 display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
 padding:5px 20px;gap:14px;z-index:100;
}
html body .pd-guest-navigation.pd-navigation-compact .pd-top-center-brand {
 grid-column:2;grid-row:1;flex:none;width:84px;height:70px;min-height:0;padding:0;margin:0;
}
html body .pd-guest-navigation.pd-navigation-compact .pd-top-center-brand img {width:84px;height:70px}
html body .pd-guest-navigation.pd-navigation-compact .pd-header-slogan,
html body .pd-guest-navigation.pd-navigation-compact .pd-login-note {display:none!important}
html body .pd-guest-navigation.pd-navigation-compact .pd-navigation-actions {grid-column:3;grid-row:1;width:auto;justify-self:end;gap:10px}
@media(max-width:600px) {
 html body .pd-navigation.pd-guest-navigation.pd-navigation-compact {
 position:fixed;top:8px;left:8px;right:8px;width:auto;margin:0;min-height:72px;
 display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;
 padding:5px 10px;gap:8px;z-index:100;
 }
 html body .pd-guest-navigation.pd-navigation-compact .pd-top-center-brand {
 flex:0 0 74px;width:74px;height:62px;min-height:0;padding:0;margin:0;
 }
 html body .pd-guest-navigation.pd-navigation-compact .pd-top-center-brand img {
 width:74px;height:62px;
 }
 html body .pd-guest-navigation.pd-navigation-compact .pd-header-slogan,
 html body .pd-guest-navigation.pd-navigation-compact .pd-login-note {display:none!important}
 html body .pd-guest-navigation.pd-navigation-compact .pd-navigation-actions {
 flex:0 1 auto;width:auto;gap:9px;margin-left:auto;
 }
 html body .pd-guest-navigation.pd-navigation-compact .pd-login-dropdown summary {
 min-height:42px;padding:10px 13px;font-size:14px;gap:7px;
 }
}

/* Schritt 283: fließende Größe statt harter Umschaltung. */
html body .pd-navigation.pd-guest-navigation {transition:min-height .32s cubic-bezier(.22,.61,.36,1),padding .32s ease,gap .32s ease}
html body .pd-guest-navigation .pd-top-center-brand {transition:width .32s cubic-bezier(.22,.61,.36,1),height .32s ease,min-height .32s ease}
html body .pd-guest-navigation .pd-top-center-brand img {transition:width .32s cubic-bezier(.22,.61,.36,1),height .32s cubic-bezier(.22,.61,.36,1)}
html body .pd-guest-navigation .pd-top-center-brand .pd-header-slogan {display:block!important;max-height:52px;opacity:1;visibility:visible;transform:translateY(0);overflow:hidden;transition:opacity .2s ease,max-height .32s ease,transform .32s ease,visibility 0s}
html body .pd-guest-navigation.pd-navigation-compact .pd-top-center-brand .pd-header-slogan {max-height:0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,max-height .32s ease,transform .32s ease,visibility 0s .32s}
html body .pd-navigation.pd-guest-navigation.pd-navigation-floating {position:fixed;top:12px;left:16px;right:16px;width:auto;margin:0;z-index:100}
@media(max-width:600px) {html body .pd-navigation.pd-guest-navigation.pd-navigation-floating {top:8px;left:8px;right:8px}}
@media(prefers-reduced-motion:reduce) {html body .pd-navigation.pd-guest-navigation,html body .pd-guest-navigation .pd-top-center-brand,html body .pd-guest-navigation .pd-top-center-brand img,html body .pd-guest-navigation .pd-top-center-brand .pd-header-slogan {transition:none!important}}

/* Schritt 285: sichtbarer mobiler Kopf und ruhige Fußleiste. */
@media(max-width:600px) {
 html body .pd-navigation.pd-guest-navigation:not(.pd-navigation-floating) {position:relative;top:0}
 html body .pd-navigation.pd-guest-navigation.pd-navigation-floating {
  top:calc(var(--pd-viewport-top,0px) + env(safe-area-inset-top,0px) + 8px);
  left:calc(var(--pd-viewport-left,0px) + 8px);right:auto;
  width:calc(var(--pd-viewport-width,100vw) - 16px);max-width:calc(100vw - 16px);
  box-sizing:border-box;overflow:visible;
 }
 html body .pd-guest-navigation.pd-navigation-compact .pd-top-center-brand {min-width:0;flex-shrink:0}
 html body .pd-guest-navigation.pd-navigation-compact .pd-navigation-actions {min-width:0;flex:0 0 auto;max-width:calc(100% - 82px)}
 html body .pd-guest-navigation.pd-navigation-compact .pd-navigation-actions .icon-btn {flex-shrink:0}
 html body .view-mode-footer > :not(a[href="/impressum"]) {display:none!important}
 html body .view-mode-footer {justify-content:center}
 html body #cookieConsentOpen {display:none!important}
}

/* Schritt 289: Pinch-Zoom verändert nicht das Layout der Kopfzeile. */
@media(max-width:600px){
 html body .pd-guest-navigation.pd-navigation-compact {flex-wrap:nowrap}
 html body .pd-guest-navigation.pd-navigation-compact .pd-top-center-brand {flex:0 0 74px}
 html body .pd-guest-navigation.pd-navigation-compact .pd-navigation-actions {margin-left:auto;flex-shrink:0}
 html body .pd-login-dropdown > .login-card {
 left:var(--pd-login-left,12px)!important;right:auto!important;
 width:var(--pd-login-width,calc(100vw - 24px))!important;max-width:380px!important;
 }
}

/* Schritt 290: beim Lesen im Pinch-Zoom keine vergrößerte schwebende Navigation. */
@media(max-width:600px){
 html body .pd-navigation.pd-guest-navigation.pd-navigation-zoom-hidden{visibility:hidden;pointer-events:none}
 html body .pd-navigation.pd-guest-navigation.pd-navigation-zoomed:has(.pd-login-dropdown[open]) .pd-top-center-brand,
 html body .pd-navigation.pd-guest-navigation.pd-navigation-zoomed:has(.pd-login-dropdown[open]) #themeToggle{visibility:hidden;pointer-events:none}
}

/* Schritt 294: neue Variante 2; keine festen Bildausschnitte des alten Logos. */
.pd-brand-symbol{background-image:url('/public/assets/img/primadipla-symbol-294.png');background-size:contain;background-position:center}
.pd-brand-wordmark{background-image:none}
html body .pd-guest-navigation .pd-top-center-brand img{object-fit:contain}