/* ─────────────────────────────────────────────────────────────────────────────
   Poseidock Design 2026 — modernisiertes, maritimes Erscheinungsbild
   ─────────────────────────────────────────────────────────────────────────────
   Wird NUR aktiv, wenn <body class="pd2"> gesetzt ist (zusätzlich zu
   pd-design-system.css). Seiten ohne diese Markierung sehen aus wie bisher.
   Zurück zum alten Aussehen einer Seite: Klasse "pd2" und den Link entfernen.

   Farben kommen weiter aus der Vereinsmarke (--blue = Hauptfarbe, --blue-light = Sekundärfarbe, --gold,
   --color-accent, --color-primary-text …), nichts ist fest verdrahtet.
   Stufe 1: Aussehen der Einstellungsseite (Kopf, Reiter, Karten, Felder,
   Schalter, Buttons, Schritt-Zeitstrahl). Dunkelmodus folgt später. */

body.pd2 {
  /* Eigene Tokens, abgeleitet aus der Vereinsmarke */
  --pd2-accent:  var(--header-accent, var(--color-accent, var(--gold, #c8a84b)));
  /* Sekundärfarbe (--blue-light) färbt Fokus, Schalter, Schimmer und Kopfleiste mit. Buttons dagegen sind
     nur eine Abstufung der Hauptfarbe (hell → dunkel): ein Verlauf zwischen zwei verschiedenen Farben wird hart. */
  --pd2-signal:  color-mix(in srgb, var(--blue-light, #2a5a8c) 62%, #25b9cf);
  --pd2-btn-a:   color-mix(in srgb, var(--blue, #1a3a5c) 92%, #fff);
  --pd2-btn-b:   color-mix(in srgb, var(--blue, #1a3a5c) 88%, #000);
  --pd2-text:    var(--text, #1a2a3a);
  --pd2-muted:   var(--muted, #6b7c8e);
  --pd2-line:    color-mix(in srgb, var(--blue, #1a3a5c) 13%, transparent);
  --pd2-line-2:  color-mix(in srgb, var(--blue, #1a3a5c) 26%, transparent);
  --pd2-tint:    color-mix(in srgb, var(--blue, #1a3a5c) 7%, transparent);
  --pd2-field:   color-mix(in srgb, var(--blue, #1a3a5c) 3.5%, #fff);
  --pd2-card:    rgba(255,255,255,.88);
  --pd2-ring:    color-mix(in srgb, var(--pd2-signal) 42%, transparent);
  --pd2-shadow:  0 1px 2px rgba(13,33,55,.05), 0 14px 34px -16px rgba(13,33,55,.18);
  --pd2-mono:    ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;

  background:
    radial-gradient(900px 480px at 92% -6%, color-mix(in srgb, var(--pd2-signal) 13%, transparent), transparent 62%),
    radial-gradient(800px 480px at -8% 4%, color-mix(in srgb, var(--blue-light, #2a5a8c) 14%, transparent), transparent 62%),
    var(--bg, #f4f7fa);
  background-attachment: fixed;
}

/* Hintergrund: feine Tiefenlinien wie in einer Seekarte */
body.pd2::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%231a3a5c' stroke-opacity='.075' stroke-width='1.2'%3E%3Cpath d='M-60 520C220 470 420 560 700 500S1180 440 1500 560'/%3E%3Cpath d='M-60 580C220 520 420 620 700 550S1180 490 1500 610'/%3E%3Cpath d='M-60 640C220 570 420 690 700 600S1180 540 1500 660'/%3E%3Cpath d='M-60 700C220 620 420 760 700 650S1180 590 1500 710'/%3E%3Cpath d='M-60 760C220 670 420 830 700 700S1180 640 1500 760'/%3E%3C/g%3E%3C/svg%3E") center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
}

/* ── Reiter (Rückfall, falls die Seitenleiste nicht aufgebaut wird) ── */
body.pd2 .tab-bar { border-bottom: 0; gap: 6px; row-gap: 6px; padding-top: 24px; margin-bottom: 20px; }
body.pd2 .tab-bar button {
  height: 34px; padding: 0 14px; margin: 0; font-size: 13px; font-weight: 600; border-radius: 99px;
  border: 1px solid transparent; border-bottom-width: 1px; color: var(--pd2-muted);
  transition: background .15s, color .15s, border-color .15s;
}
body.pd2 .tab-bar button:hover:not(.active) { background: var(--pd2-tint); color: var(--pd2-text); }
body.pd2 .tab-bar button.active {
  background: var(--pd2-tint); color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 34%, transparent);
}

/* ── Karten ── */
body.pd2 .s-card {
  position: relative; background: var(--pd2-card); border: 1px solid var(--pd2-line);
  border-radius: 18px; padding: 22px 24px; box-shadow: var(--pd2-shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body.pd2 .s-card::before {
  content: ""; position: absolute; left: 28px; right: 28px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pd2-accent), transparent); opacity: .7; pointer-events: none;
}
body.pd2 .s-label {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font: 600 11px var(--pd2-mono); letter-spacing: .15em; color: var(--pd2-muted);
}
body.pd2 .s-label::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pd2-accent); box-shadow: 0 0 10px var(--pd2-accent);
}
body.pd2 .s-label::after { content: ""; flex: 1; height: 1px; background: var(--pd2-line); }
body.pd2 .s-sep { border-top-color: var(--pd2-line); }

body.pd2 .settings-info-box {
  background: var(--pd2-tint); border: 1px solid var(--pd2-line); border-radius: 12px;
  padding: 12px 16px; font-size: 12.5px; line-height: 1.65; color: var(--pd2-muted);
}
body.pd2 .settings-info-box a { color: var(--blue); }

/* ── Schalter (statt Kästchen) ── */
body.pd2 .toggle-row { gap: 12px; }
body.pd2 .toggle-row input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; position: relative; flex: none;
  width: 46px; height: 27px; margin: 0; border-radius: 99px; cursor: pointer;
  background: var(--pd2-line-2); transition: background .2s, box-shadow .2s;
}
body.pd2 .toggle-row input[type="checkbox"]::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: transform .22s cubic-bezier(.3,1.4,.5,1);
}
body.pd2 .toggle-row input[type="checkbox"]:checked { background: var(--blue-light, var(--blue)); box-shadow: 0 0 14px -3px var(--blue-light, var(--blue)); }
body.pd2 .toggle-row input[type="checkbox"]:checked::after { transform: translateX(19px); }
body.pd2 .toggle-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--pd2-signal); outline-offset: 2px; }
body.pd2 .toggle-row span { font-size: 14px; font-weight: 600; color: var(--pd2-text); }

/* ── Felder ── */
body.pd2 .fg { margin-bottom: 14px; }
body.pd2 .fg label, body.pd2 .field-label {
  font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--pd2-muted); margin-bottom: 6px;
}
body.pd2 .fg input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),
body.pd2 .fg select, body.pd2 .fg textarea, body.pd2 input.input-lg, body.pd2 select.input-lg, body.pd2 textarea.input-lg {
  min-height: 42px; padding: 9px 13px; border: 1px solid var(--pd2-line); border-radius: 12px;
  background-color: var(--pd2-field); color: var(--pd2-text); font-size: 14px; transition: border-color .15s, box-shadow .15s;
}
body.pd2 .fg input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):hover,
body.pd2 .fg select:hover, body.pd2 .fg textarea:hover, body.pd2 .input-lg:hover { border-color: var(--pd2-line-2); }
body.pd2 .fg input:focus, body.pd2 .fg select:focus, body.pd2 .fg textarea:focus, body.pd2 .input-lg:focus {
  border-color: var(--pd2-signal); box-shadow: 0 0 0 3px var(--pd2-ring); background-color: var(--pd2-field);
}
body.pd2 .fg input, body.pd2 .fg select, body.pd2 .fg textarea, body.pd2 .input-lg { font-family: inherit; }
body.pd2 .fg textarea, body.pd2 textarea.input-lg { line-height: 1.55; }
body.pd2 .fg select, body.pd2 select.input-lg {
  padding-right: 36px; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--pd2-muted) 50%), linear-gradient(135deg, var(--pd2-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
body.pd2 .r2 { gap: 0 18px; }

/* ── Buttons ── */
body.pd2 .btn-primary, body.pd2 .btn-success, body.pd2 .btn-cancel {
  min-height: 40px; padding: 0 18px; border-radius: 12px; font-size: 13.5px; transition: filter .15s, background .15s, border-color .15s;
}
body.pd2 .btn-primary {
  background: linear-gradient(135deg, var(--pd2-btn-a), var(--pd2-btn-b)); color: var(--color-primary-text, #fff);
  box-shadow: 0 8px 20px -10px var(--blue);
}
body.pd2 .btn-primary:hover { background: linear-gradient(135deg, var(--pd2-btn-a), var(--pd2-btn-b)); filter: brightness(1.1); }
body.pd2 .btn-primary:disabled { background: color-mix(in srgb, var(--blue) 35%, #fff); box-shadow: none; filter: none; }
html[data-theme="dark"] body.pd2 .btn-primary:disabled { background: color-mix(in srgb, var(--pd2-btn-b) 45%, #122234); color: rgba(255,255,255,.55); }
body.pd2 .btn-cancel { background: transparent; color: var(--pd2-text); border: 1px solid var(--pd2-line-2); }
body.pd2 .btn-cancel:hover { background: var(--pd2-tint); }
body.pd2 .btn-success:hover { filter: brightness(1.08); opacity: 1; }
body.pd2 .btn-sm { border-radius: 9px; padding: 5px 11px; }
:where(body.pd2) .btn-sm { background: transparent; }   /* niedrige Spezifität: farbige Varianten (.btn-primary, .btn-danger …) behalten ihre Fläche */
body.pd2 .modal-actions { gap: 10px; }
/* Adresssuche in den Karten-Einstellungen: Feld und Knopf auf einer Linie, Knopf nur so breit wie sein Text */
body.pd2 .mv-search-row .fg { margin-bottom: 0; }
body.pd2 .mv-search-row > .btn-cancel { flex: none; height: 42px; min-height: 42px; padding: 0 22px; }

/* ── Listenzeilen (Kacheln, Schritte, Kategorien …) ── */
body.pd2 .tile-row {
  gap: 12px; padding: 11px 12px; background: #fff; border: 1px solid var(--pd2-line); border-radius: 14px;
  margin-bottom: 8px; transition: border-color .15s, box-shadow .15s;
}
body.pd2 .tile-row:hover { border-color: var(--pd2-line-2); box-shadow: 0 6px 18px -12px rgba(13,33,55,.35); }
body.pd2 .tile-row .tile-drag { opacity: .45; letter-spacing: -2px; }
body.pd2 .tile-row .tile-icon { color: var(--blue); }
body.pd2 .tile-row .tile-title { font-size: 14px; font-weight: 650; }
body.pd2 .tile-row .tile-sub { font-size: 12.5px; }
body.pd2 .tile-row .btn-mini {
  width: 34px; height: 34px; padding: 0; border-radius: 10px; font-size: 14px; line-height: 1;
  display: inline-grid; place-items: center; background: transparent; color: var(--pd2-muted); transition: background .15s, color .15s;
}
body.pd2 .tile-row .btn-mini-edit:hover { background: var(--pd2-tint); color: var(--blue); }
body.pd2 .tile-row .btn-mini-del:hover { background: color-mix(in srgb, var(--error, #b22222) 12%, transparent); color: var(--error, #b22222); }
body.pd2 .tile-row .btn-mini-edit, body.pd2 .tile-row .btn-mini-del { background: transparent; }

/* Schritt-Prozess als Zeitstrahl (Gästeinformationen) */
body.pd2 #gaeste-steps-list { position: relative; }
body.pd2 #gaeste-steps-list .tile-row { position: relative; margin: 0 0 10px 46px; }
body.pd2 #gaeste-steps-list .tile-row .tile-icon {
  position: absolute; left: -46px; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1.5px solid var(--blue); box-shadow: 0 0 0 4px var(--pd2-tint);
  font: 700 12.5px var(--pd2-mono) !important; color: var(--blue);
}
body.pd2 #gaeste-steps-list .tile-row:not(:last-child)::after {
  content: ""; position: absolute; left: -31px; top: calc(50% + 18px); height: calc(100% - 26px); width: 2px; pointer-events: none;
  background: repeating-linear-gradient(180deg, var(--pd2-line-2) 0 4px, transparent 4px 8px);
}

/* ── Dialoge ── */
body.pd2 .modal { border-radius: 20px; border: 1px solid var(--pd2-line); }
body.pd2 .modal h3 { font-size: 16.5px; border-bottom: 1px solid var(--pd2-line); }
body.pd2 .modal-overlay { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ── Kopfleiste: schwebende Glas-Kapsel mit Suchleiste ── */
/* --header-h: Abstand, ab dem mitlaufende Leisten der Seiten (Kalender, Reiter, Filter) unter der schwebenden Kapsel kleben */
body.pd2 { --pd2-hdr-h: 86px; --header-h: calc(var(--pd2-hdr-h) - 8px); }
body.pd2 header {
  top: 12px; width: min(1240px, calc(100% - 40px)); margin: 12px auto 0; height: 60px; padding: 0 10px 0 12px;
  flex-wrap: nowrap; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 94%, transparent), color-mix(in srgb, color-mix(in srgb, var(--blue) 72%, var(--blue-light, #2a5a8c)) 88%, transparent));
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 16px 42px -16px rgba(4,18,32,.7), inset 0 1px 0 rgba(255,255,255,.14);
}
/* Logo: Hat ein eigenes Logo zu wenig Kontrast zur Kopfleiste, blendet das System eine Plakette (Box) ein.
   Hier gibt es keine Box: das Logo steht frei, ein feiner heller Umriss und ein weicher Schatten halten es lesbar. */
body.pd2 header .logo-img { height: 46px; width: auto; max-width: 160px; object-fit: contain; }
body.pd2 header .logo-img.pd-logo-plate {
  padding: 0; border-radius: 0; background: none;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 3px 6px rgba(0,0,0,.3));
}
/* Fast weiße Logos (Messung in pd-design-2026.js) bekommen stattdessen einen dunklen Umriss */
body.pd2 header .logo-img.pd-logo-plate.pd2-logo-light {
  filter: drop-shadow(0 0 1px rgba(13,34,56,.95)) drop-shadow(0 0 1px rgba(13,34,56,.7)) drop-shadow(0 3px 6px rgba(0,0,0,.3));
}
body.pd2 header #header-text { align-items: center; gap: 12px; min-width: 0; }
body.pd2 header h1 { font-size: 15px; white-space: nowrap; }
body.pd2 ._nc-header-icons { padding: 3px; border-radius: 999px; background: rgba(255,255,255,.09); }
body.pd2 ._nc-header-icon-btn, body.pd2 ._nc-hamburger { border-radius: 50%; }
/* Kopfleiste über einem Vollbild-Hero: die Seite (Startseite mit Banner „Vollbild“) setzt body.has-fullscreen-hero, beim Scrollen
   kommt .scrolled dazu, sobald die Kapsel nicht mehr komplett über dem Banner liegt. Bis dahin schwebt die Kapsel als klares Glas über dem Bild (Text und Zeichen hell, Logo und Akzent
   kommen aus poseidock-brand.js › updateHeaderLogos), danach ist sie die normale farbige Kapsel. !important wegen der mobilen
   Sticky-Regel in nav-central.js. */
body.pd2.has-fullscreen-hero header {
  position: fixed !important; top: 12px !important; left: 0 !important; right: 0 !important;
  width: min(1240px, calc(100% - 40px)) !important; margin: 12px auto 0 !important;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body.pd2.has-fullscreen-hero:not(.scrolled) header {
  background: rgba(8,22,40,.2) !important; border-color: rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.35); backdrop-filter: blur(12px) saturate(1.35);
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.22) !important;
  --color-primary-text: #ffffff; --header-accent: var(--hero-accent, var(--gold)); color: #ffffff;
}
body.pd2.has-fullscreen-hero:not(.scrolled) header > * { filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.pd2-cmd {
  flex: 1; max-width: 440px; margin: 0 auto; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px;
  border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); color: var(--color-primary-text, #fff); transition: .15s;
}
.pd2-cmd[hidden] { display: none; }
.pd2-cmd:focus-within { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.55); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pd2-signal) 35%, transparent); }
.pd2-cmd input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; color: inherit; font: inherit; font-size: 13.5px; }
.pd2-cmd input::placeholder { color: rgba(255,255,255,.65); }
/* Löschen-Kreuz der Suche: gut sichtbar statt des winzigen Standard-Symbols */
.pd2-cmd input::-webkit-search-cancel-button, .pd2-side-search input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px; margin: 0 4px 0 6px; cursor: pointer; opacity: .85;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pd2-cmd input::-webkit-search-cancel-button:hover, .pd2-side-search input::-webkit-search-cancel-button:hover { opacity: 1; }
.pd2-cmd kbd, .pd2-side-search kbd { font: 600 10.5px var(--pd2-mono); padding: 3px 7px; border-radius: 7px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.85); }
.pd2-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── Seitenleiste (aus den Reitern erzeugt) und Seitenkopf ── */
body.pd2 .page-body.pd2-has-side { max-width: 1280px; display: grid; grid-template-columns: 264px minmax(0, 1fr); column-gap: 36px; align-items: start; padding: 0 24px 72px; }
body.pd2 .pd2-has-side > :not(.pd2-side) { grid-column: 2; }
/* Die Reiterleiste ist nur Datenquelle der Seitenleiste: von Anfang an unsichtbar, sonst blitzt sie auf, bis die Seitenleiste steht */
/* Seitenwahl (PDSettings.pager) */
body.pd2 .pd-pg { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--pd2-line-2); background: var(--pd2-field); color: var(--pd2-text); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
body.pd2 .pd-pg:hover:not(:disabled) { border-color: var(--pd2-signal); }
body.pd2 .pd-pg:disabled { opacity: .4; cursor: default; }
body.pd2 .pd-pg[aria-current="page"] { opacity: 1; background: linear-gradient(135deg, var(--pd2-btn-a), var(--pd2-btn-b)); border-color: transparent; color: #fff; }
body.pd2 .pd-pg-gap { align-self: center; color: var(--pd2-muted); padding: 0 2px; }
body.pd2 .pd-pg-info { flex-basis: 100%; text-align: center; font-size: 12px; color: var(--pd2-muted); margin-top: 2px; }
body.pd2 .page-body > .tab-bar, body.pd2 .pd2-has-side .tab-bar { display: none; }
.pd2-side {
  grid-column: 1; grid-row: 1 / span 60; position: sticky; top: calc(var(--pd2-hdr-h, 64px) + 6px); margin-top: 28px;
  max-height: calc(100dvh - var(--pd2-hdr-h, 64px) - 48px); overflow-y: auto; padding: 2px;
}
/* Scrollbalken im Stil der Seite: schmal, abgerundet, in der Hauptfarbe, ohne Pfeiltasten und Schiene.
   Die Seitenleiste ist im Ruhezustand dezent und wird beim Darüberfahren kräftiger. */
/* Chrome, Edge, Safari: eigene Gestaltung über ::-webkit-scrollbar (nur so verschwinden die Pfeiltasten).
   Firefox kennt das nicht und bekommt scrollbar-color/-width. Beides darf nicht gemischt werden: sobald
   scrollbar-width oder -color gesetzt ist, ignoriert Chrome die ::-webkit-scrollbar-Regeln. */
html:has(body.pd2)::-webkit-scrollbar, body.pd2 ::-webkit-scrollbar { width: 12px; height: 12px; }
html:has(body.pd2)::-webkit-scrollbar-track, body.pd2 ::-webkit-scrollbar-track { background: transparent; }
html:has(body.pd2)::-webkit-scrollbar-corner, body.pd2 ::-webkit-scrollbar-corner { background: transparent; }
html:has(body.pd2)::-webkit-scrollbar-button, body.pd2 ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html:has(body.pd2)::-webkit-scrollbar-thumb, body.pd2 ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--blue, #1a3a5c) 30%, transparent); background-clip: content-box;
  border: 4px solid transparent; border-radius: 12px; min-height: 44px; transition: background-color .15s;
}
html:has(body.pd2)::-webkit-scrollbar-thumb:hover, body.pd2 ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--pd2-signal, #2a5a8c) 70%, transparent); background-clip: content-box; }
body.pd2 .pd2-side::-webkit-scrollbar { width: 10px; }
body.pd2 .pd2-side::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--blue, #1a3a5c) 18%, transparent); background-clip: content-box; }
body.pd2 .pd2-side:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--blue, #1a3a5c) 36%, transparent); background-clip: content-box; }
body.pd2 .pd2-side::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--pd2-signal, #2a5a8c) 70%, transparent); background-clip: content-box; }
@-moz-document url-prefix() {
  html:has(body.pd2) { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--blue, #1a3a5c) 34%, transparent) transparent; }
  .pd2-side { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--blue, #1a3a5c) 20%, transparent) transparent; }
  .pd2-side:hover { scrollbar-color: color-mix(in srgb, var(--blue, #1a3a5c) 42%, transparent) transparent; }
}
.pd2-side-top { display: flex; align-items: center; gap: 8px; }
/* Am Desktop sitzt die Suche in der Kopfleiste, in der Seitenleiste wäre sie doppelt */
@media (min-width: 981px) { body.pd2 .pd2-side-search { display: none; } body.pd2 .pd2-side { margin-top: 20px; } }
.pd2-side-close { display: none; }
.pd2-side-search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 10px 0 12px; border-radius: 13px;
  background: var(--pd2-card); border: 1px solid var(--pd2-line); color: var(--pd2-muted); transition: .15s;
}
.pd2-side-search:focus-within { border-color: var(--pd2-signal); box-shadow: 0 0 0 3px var(--pd2-ring); }
.pd2-side-search input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; color: var(--pd2-text); font: inherit; font-size: 14px; }
.pd2-side-search kbd { background: var(--pd2-tint); border-color: var(--pd2-line); color: var(--pd2-muted); }
.pd2-grp { margin-top: 22px; }
.pd2-grp[hidden], .pd2-nav-i[hidden], .pd2-nav-none[hidden] { display: none; }
.pd2-grp h3 { margin: 0 0 6px 12px; font: 600 10.5px var(--pd2-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pd2-muted); }
.pd2-nav-i {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%; height: 38px; padding: 0 12px; border: 0; background: none;
  border-radius: 11px; text-align: left; font-size: 13.5px; font-weight: 500; font-family: inherit; color: var(--pd2-text); opacity: .82; cursor: pointer; transition: .15s;
}
.pd2-nav-i .pd2-i { color: var(--pd2-muted); transition: .15s; }
.pd2-nav-i:hover { background: var(--pd2-tint); opacity: 1; }
.pd2-nav-i.on { background: var(--pd2-tint); opacity: 1; font-weight: 650; color: var(--blue); }
.pd2-nav-i.on .pd2-i { color: var(--blue); }
.pd2-nav-i.on::before { content: ""; position: absolute; left: -2px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--pd2-accent); box-shadow: 0 0 12px var(--pd2-accent); }
.pd2-nav-none { margin: 22px 12px; color: var(--pd2-muted); font-size: 13px; }

.pd2-pagehead { padding-top: 28px; margin-bottom: 18px; }
.pd2-crumbs { display: flex; align-items: center; gap: 8px; font: 500 11px var(--pd2-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pd2-muted); flex-wrap: wrap; }
.pd2-crumbs .pd2-i { width: 12px; height: 12px; }
.pd2-crumbs b { font-weight: 600; color: var(--pd2-text); }
.pd2-title { margin: 10px 0 0; font-size: 32px; line-height: 1.1; letter-spacing: -.02em; font-weight: 700; color: var(--pd2-text); }
.pd2-areabtn { display: none; }
.pd2-scrim { display: none; }

/* ── Handy: eigene Ausprägung ── */
@media (max-width: 720px) {
  /* Reiter als wischbare Leiste in einer Zeile statt mehrzeiligem Umbruch */
  body.pd2 .tab-bar {
    flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 14px 20px 6px; margin: 0 -20px 14px;
    scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
  }
  body.pd2 .tab-bar::-webkit-scrollbar { display: none; }
  body.pd2 .tab-bar button { flex: none; height: 40px; padding: 0 16px; font-size: 14px; scroll-snap-align: center; }
  body.pd2 .s-card { padding: 18px 16px; border-radius: 16px; }
  body.pd2 .s-card::before { left: 18px; right: 18px; }
  /* Große Tippflächen */
  body.pd2 .fg input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),
  body.pd2 .fg select, body.pd2 .input-lg { min-height: 46px; }
  body.pd2 .btn-primary, body.pd2 .btn-cancel, body.pd2 .btn-success { min-height: 46px; }
  /* Aktionsleisten: Buttons über die volle Breite, gut mit dem Daumen zu treffen */
  body.pd2 .modal-actions { flex-direction: column; align-items: stretch; }
  body.pd2 .modal-actions > .btn-primary, body.pd2 .modal-actions > .btn-cancel, body.pd2 .modal-actions > .btn-success { flex: none; width: 100%; }
  body.pd2 .tile-row { padding: 10px; gap: 8px; }
  body.pd2 .tile-row .btn-mini { width: 40px; height: 40px; }
  body.pd2 #gaeste-steps-list .tile-row { margin-left: 38px; }
  body.pd2 #gaeste-steps-list .tile-row .tile-icon { left: -38px; width: 28px; height: 28px; font-size: 12px !important; }
  body.pd2 #gaeste-steps-list .tile-row:not(:last-child)::after { left: -25px; top: calc(50% + 16px); height: calc(100% - 22px); }
  body.pd2 .tile-row .tile-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* Tablet und Handy: Seitenleiste wird zum ausfahrbaren Menü, Header B bleibt schlank */
@media (max-width: 980px) {
  body.pd2 .page-body.pd2-has-side { display: block; padding: 0 16px calc(72px + env(safe-area-inset-bottom)); }
  .pd2-side {
    position: fixed; left: 0; top: 0; bottom: 0; width: min(320px, 86vw); max-height: none; margin: 0; z-index: 300; padding: 14px 14px 24px;
    background: #fff; border-right: 1px solid var(--pd2-line); transform: translateX(-105%); transition: transform .28s ease; overscroll-behavior: contain;
  }
  body.pd2-side-open .pd2-side { transform: none; box-shadow: 0 0 60px rgba(0,0,0,.45); }
  body.pd2-side-open { overflow: hidden; }
  body.pd2-side-open .pd2-scrim { display: block; position: fixed; inset: 0; z-index: 290; background: rgba(3,12,22,.55); }
  .pd2-side-close { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 1px solid var(--pd2-line); border-radius: 13px; background: transparent; color: var(--pd2-text); transform: scaleX(-1); }
  .pd2-nav-i { height: 46px; font-size: 15px; }
  .pd2-grp h3 { font-size: 11px; }
  .pd2-pagehead { padding-top: 18px; }
  .pd2-title { font-size: 28px; }
  .pd2-areabtn {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 50px; margin-top: 14px; padding: 0 14px; border-radius: 14px;
    border: 1px solid var(--pd2-line-2); background: #fff; color: var(--pd2-text); font-size: 14px; font-weight: 650; font-family: inherit; cursor: pointer;
  }
  .pd2-areabtn em { margin-left: auto; font: 500 12px var(--pd2-mono); color: var(--pd2-muted); }
  .pd2-cmd { display: none; }
  body.pd2 header { width: calc(100% - 20px); margin-top: 10px; top: 10px; height: 56px; }
  body.pd2.has-fullscreen-hero header { width: calc(100% - 20px) !important; margin-top: 10px !important; top: 10px !important; }
  body.pd2 { --pd2-hdr-h: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  body.pd2 * { transition: none !important; }
}


/* Dunkelmodus und Schalter nur am Bildschirm: Druck und PDF bleiben immer hell. */
@media screen {

/* ─────────────────────────────────────────────────────────────────────────────
   DUNKELMODUS
   ─────────────────────────────────────────────────────────────────────────────
   Aktiv bei <html data-theme="dark"> (gesetzt vom Skript im <head>, siehe unten / pd-design-2026.js) und
   <body class="pd2">. Die Vereinsfarbe bleibt Ausgangspunkt: --pd2-brand / --pd2-brand-2 sind Kopien der
   Marken-Hauptfarbe und -Sekundärfarbe vom <html>-Element (poseidock-brand.js setzt sie dort).
   --blue wird für den Seiteninhalt aufgehellt (Texte, Links, Symbole auf dunklem Grund); die Kopfleiste und
   die Hauptknöpfe behalten die dunklere Markenfarbe als Fläche.
   Schalter: Automatisch (folgt dem Gerät) / Hell / Dunkel — nur auf dem Gerät gespeichert (localStorage). */
html[data-theme="dark"] { color-scheme: dark; background: #09131f; --pd2-brand: var(--blue); --pd2-brand-2: var(--blue-light);
  --pd2-brand-primary: var(--color-primary, var(--blue)); --pd2-brand-secondary: var(--color-secondary, var(--blue-light));
  /* Ersatzfarben für fest verdrahtete Farben in den Seiten: dort steht var(--pd2-…, #heller-wert); im Hellmodus gelten die
     Rückfallwerte (Aussehen unverändert), nur im Dunkelmodus gibt es diese Variablen. s = Fläche, t = Text, b = Rahmen.
     Sie hängen an <html> (nicht an body), damit auch Variablen, die Seiten auf :root definieren, sie sehen. */
  --pd2-s0: #122234; --pd2-s1: #0e1c2c; --pd2-s2: #1a2d44; --pd2-glass: rgba(18,34,52,.9);
  --pd2-ok-bg: #0f2a1c; --pd2-err-bg: #3a1618; --pd2-warn-bg: #2a2410;
  --pd2-t-danger: #ff8f86; --pd2-t-ok: #5fcf92; --pd2-t-warn: #f0c75e;
  --pd2-t-brand: color-mix(in srgb, var(--pd2-brand) 36%, #d6e7fa); --pd2-t-text: #e5edf6; --pd2-t-muted: #8da2b8;
  --pd2-b-n: #26394d; --pd2-b-ok: #1f5a3a; --pd2-b-err: #7a2c30; --pd2-b-warn: #8a6d1a; }

html[data-theme="dark"] body.pd2 {
  color-scheme: dark;
  /* Grundfarben der Seite (überschreiben die Marken-/Basiswerte nur für den Seiteninhalt) */
  --bg: #09131f; --surface: #0e1c2c; --card: #122234; --text: #e5edf6; --muted: #8da2b8; --border: #26394d;
  --blue: color-mix(in srgb, var(--pd2-brand) 36%, #d6e7fa);
  --blue-light: color-mix(in srgb, var(--pd2-brand-2) 44%, #bcd6f3);
  --color-primary: var(--blue); --color-secondary: var(--blue-light);
  --gold: color-mix(in srgb, var(--pd2-brand-gold, #c8a84b) 100%, transparent);
  --free: #5cc88a; --free-bg: #0f2a1c; --free-border: #1f5a3a; --free-text: #7ddca4; --freeabw-text: #f0c75e; --freeabw-border: #8a6d1a;
  --busy-bg: #1c2a39; --busy-border: #2c4054; --busy-text: #9fb3c7;
  --guest-bg: #12304d; --guest-border: #2c5a86; --guest-text: #c4dcf6;
  --future-bg: #2a2410; --future-text: #e7d27f;
  --error: #ff8f86; --error-bg: #3a1618;
  --color-success: #5fcf92; --color-success-bg: #0f2a1c; --color-success-border: #1f5a3a;
  --color-warning: #f0c75e; --color-warning-bg: #2a2410; --color-warning-border: #8a6d1a;
  --color-danger: #ff8f86; --color-danger-bg: #3a1618; --color-danger-border: #7a2c30;
  --shadow-sm: 0 1px 5px rgba(0,0,0,.35); --shadow-md: 0 2px 12px rgba(0,0,0,.45);
  /* Design-2026-Werte */
  --pd2-text: #e5edf6; --pd2-muted: #8da2b8;
  --pd2-signal: color-mix(in srgb, var(--pd2-brand-2) 40%, #35bfd6);
  --pd2-btn-a: color-mix(in srgb, var(--pd2-brand) 60%, #6aa6de);
  --pd2-btn-b: color-mix(in srgb, var(--pd2-brand) 76%, #3f74ad);
  /* Flächen mit heller Schrift (Hauptknöpfe, Kacheln, aktive Pillen, Avatare …): die für Texte aufgehellte Markenfarbe wäre hier hell auf hell.
     Seiten schreiben var(--pd2-fill, var(--color-primary)) – im Hellmodus gibt es diese Variablen nicht, dort gilt der Rückfallwert (Aussehen unverändert).
     fill = Fläche, fill-2 = Kante/Hover; danger/ok = rote/grüne Flächen (die Textfarben --error/--free sind für dunklen Grund aufgehellt). */
  --pd2-fill: var(--pd2-btn-b); --pd2-fill-2: var(--pd2-btn-a); --pd2-fill-danger: #b3362d; --pd2-fill-ok: #1f7a4a; --pd2-on-accent: var(--color-accent-text, #071828);
  --pd2-line: rgba(150,185,225,.15); --pd2-line-2: rgba(150,185,225,.28);
  --pd2-tint: rgba(110,165,230,.11);
  --pd2-field: #0b1827; --pd2-card: rgba(18,34,52,.86);
  --pd2-shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.65);
  background:
    radial-gradient(900px 480px at 92% -6%, color-mix(in srgb, var(--pd2-signal) 12%, transparent), transparent 62%),
    radial-gradient(800px 480px at -8% 4%, color-mix(in srgb, var(--pd2-brand-2) 22%, transparent), transparent 62%),
    #09131f;
}
html[data-theme="dark"] body.pd2::before { filter: invert(1) brightness(1.6); opacity: .22; }
/* Kopfleiste behält die Markenfarbe als Fläche */
html[data-theme="dark"] body.pd2 :is(header, ._nc-menu, ._nc-icon-popup) { --blue: var(--pd2-brand); --blue-light: var(--pd2-brand-2); --color-primary: var(--pd2-brand-primary); --color-secondary: var(--pd2-brand-secondary); }

/* Flächen, die in den Seiten und im Basis-Stylesheet fest auf Weiß stehen → dunkle Karte */
html[data-theme="dark"] body.pd2 :is(.s-card, .modal, .modal-box, .settings-panel, .m-card, .steg-row, .legend, .tile-row, .bb-row, .dp-point-row,
  .pg-results, .mv-search-results, .rv-list, .re-icon-btn, .ai-icon-action, .btn-cancel, .btn-sm, .filter-row select, .ds-tb-select, .ds-tb-btn,
  .ds-tb-color, .fg-code-row button, .mode-switch button, .btn-save-confirm, .cf-prov) {
  background: var(--card); color: var(--text); border-color: var(--border);
}
/* Eingabefelder */
html[data-theme="dark"] body.pd2 :is(.input-lg, .fg textarea, .fg input, .fg select, .ds-editor, .dropzone, .strength-bar) {
  background: var(--pd2-field); color: var(--text); border-color: var(--border);
}
html[data-theme="dark"] body.pd2 .input-lg:focus { background: var(--pd2-field); }
html[data-theme="dark"] body.pd2 ::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); opacity: 1; }
html[data-theme="dark"] body.pd2 :is(input, select, textarea):disabled { opacity: .6; }
/* Abgesetzte helle Kopf-/Leistenflächen */
html[data-theme="dark"] body.pd2 :is(.ds-toolbar, .modal-tabs, .pf-spec-table th, .pg-selected-box, .mv-head, .mv-section, .fg-card-head,
  .fg-code-row code, .re-main-preview, .welcome-box, .token-reveal, .user-badge) {
  background: var(--pd2-field); color: var(--text); border-color: var(--border);
}
html[data-theme="dark"] body.pd2 .settings-info-box { background: rgba(80,140,210,.10); border-color: rgba(120,170,230,.26); color: var(--text); }
html[data-theme="dark"] body.pd2 :is(.ds-tb-btn:hover, .ds-tb-btn.active, .pg-result:hover, .mv-search-results .mv-result:hover, .rv-list button:hover, .tab-btn:hover:not(.active)) { background: var(--pd2-tint); }
html[data-theme="dark"] body.pd2 .dropzone.dragover, html[data-theme="dark"] body.pd2 .re-main-preview.dragover { background: var(--pd2-tint); }
html[data-theme="dark"] body.pd2 .mode-switch button.active { background: var(--pd2-btn-b); color: #fff; border-color: var(--pd2-btn-a); }
html[data-theme="dark"] body.pd2 :is(.daa-role-chip.active, .tile-status-badge.on, .tile-row .btn-mini-edit, .dp-point-row .btn-mini-edit) { background: var(--pd2-btn-b); color: #fff; border-color: var(--pd2-btn-a); }
html[data-theme="dark"] body.pd2 .ha-switch input:checked + .slider { background: var(--pd2-btn-b); }
html[data-theme="dark"] body.pd2 .toggle-row input[type="checkbox"]:checked { background: var(--pd2-btn-b); box-shadow: 0 0 14px -3px var(--pd2-signal); }
html[data-theme="dark"] body.pd2 .rv-chip.rv-role { background: rgba(110,165,230,.16); color: var(--blue); }
html[data-theme="dark"] body.pd2 .rv-chip.rv-person { background: rgba(230,200,110,.16); color: #ecd58a; }
html[data-theme="dark"] body.pd2 .lp-std-badge { background: rgba(110,165,230,.16); color: var(--blue); }
html[data-theme="dark"] body.pd2 tbody tr.row-future, html[data-theme="dark"] body.pd2 .m-card.row-future { background: var(--future-bg); }
html[data-theme="dark"] body.pd2 .user-entry.locked { background: var(--error-bg); border-color: var(--color-danger-border); }
html[data-theme="dark"] body.pd2 .ai-icon-delete:hover { background: var(--error-bg); }
/* Mit Farbe belegte Aktionsflächen behalten ihren Text */
html[data-theme="dark"] body.pd2 .btn-primary:disabled { background: color-mix(in srgb, var(--pd2-brand) 55%, #0b1827); color: rgba(255,255,255,.55); }
html[data-theme="dark"] body.pd2 hr, html[data-theme="dark"] body.pd2 .divider { border-color: var(--border); }
html[data-theme="dark"] body.pd2 :is(.page-body, .modal-box, .modal) a:not([class*="btn"]) { color: var(--blue); }
/* Links, die als farbige Knöpfe gestaltet sind (eigene Fläche, helle Schrift), behalten ihre Schriftfarbe */
html[data-theme="dark"] body.pd2 :is(.page-body, .modal-box, .modal) a:is(.cf-join, .gb-share-btn):is(.cf-join, .gb-share-btn) { color: #fff; }
html[data-theme="dark"] body.pd2 :is(table, th, td) { border-color: var(--border); }
html[data-theme="dark"] body.pd2 thead tr { background: color-mix(in srgb, var(--pd2-brand) 70%, #09131f); }
html[data-theme="dark"] body.pd2 .page-body img:not([src$=".svg"]) { filter: brightness(.92); }

@media (max-width: 980px) {
  html[data-theme="dark"] body.pd2 .pd2-side { background: #0e1c2c; border-right-color: var(--pd2-line); }
}

/* Inline-Stile mit festen hellen Hintergründen (im Markup und in JS-Vorlagen der Seiten) */
html[data-theme="dark"] body.pd2 :is(
  [style*="background:#fff"], [style*="background: #fff"], [style*="background:white"], [style*="background: white"],
  [style*="background:#ffffff"], [style*="background: #ffffff"], [style*="background:#f8fafc"], [style*="background: #f8fafc"],
  [style*="background:#fafcfe"], [style*="background: #fafcfe"], [style*="background:#f0f4f8"], [style*="background: #f0f4f8"],
  [style*="background:#f4f7fa"], [style*="background: #f4f7fa"], [style*="background:#f9fbfd"], [style*="background: #f9fbfd"],
  [style*="background:#eef3f8"], [style*="background: #eef3f8"], [style*="background:#e8edf2"], [style*="background: #e8edf2"],
  [style*="background:var(--card"], [style*="background: var(--card"], [style*="background:var(--surface"], [style*="background: var(--surface"],
  [style*="background: rgb(25"], [style*="background: rgb(24"], [style*="background: rgb(23"], [style*="background-color: rgb(25"], [style*="background-color: rgb(24"], [style*="background-color: rgb(23"]
) { background: var(--pd2-field) !important; color: var(--text); border-color: var(--border); }
html[data-theme="dark"] body.pd2 :is(.tile-row .tile-icon, .daa-role-chip:not(.active), .fg-card) { background: var(--pd2-field); color: var(--blue); border-color: var(--border); }
/* Karten (Leaflet) im Dunkelmodus abdunkeln, Bedienknöpfe passend */
html[data-theme="dark"] body.pd2 .leaflet-container { background: #1a2736; }
html[data-theme="dark"] body.pd2 .leaflet-tile-pane { filter: brightness(.72) contrast(1.05) saturate(.85); }
html[data-theme="dark"] body.pd2 :is(.leaflet-bar a, .leaflet-control-attribution) { background: color-mix(in srgb, var(--card) 92%, transparent); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] body.pd2 .leaflet-control-attribution a { color: var(--blue); }

/* Formatierter Text in den Editoren (Überschriften sind in der Marken-Hauptfarbe gesetzt) */
html[data-theme="dark"] body.pd2 .ds-editor :is(h1, h2, h3, h4, a) { color: var(--blue); }
html[data-theme="dark"] body.pd2 .ds-editor { caret-color: var(--text); }
html[data-theme="dark"] body.pd2 #gaeste-steps-list .tile-row .tile-icon { background: var(--pd2-field); color: var(--blue); }
html[data-theme="dark"] body.pd2 .pd2-areabtn { background: var(--card); color: var(--text); }
html[data-theme="dark"] body.pd2 .pd2-side-search { background: var(--card); }

}


/* ─────────────────────────────────────────────────────────────────────────────
   MENÜ (Burger) im Design 2026 — Aufbau und Verhalten: scripts/pd-design-2026.js › Menü
   Desktop (> 1024 px): schwebende Glas-Fläche unter der Kopfleiste · Tablet / Handy quer (≤ 1024 px): Seitenpanel ·
   Handy hochkant (≤ 640 px): Vollbild mit Bereichs-Kacheln. Farben kommen aus den --pd2-Werten (Hell und Dunkel).
   ───────────────────────────────────────────────────────────────────────────── */
body.pd2 { --pd2-menu-bg: rgba(255,255,255,.94); --pd2-solid: #fff; --pd2-scrim: rgba(10,30,50,.34); --pd2-menu-shadow: 0 30px 80px -24px rgba(13,33,55,.5), 0 2px 6px rgba(13,33,55,.08); }
html[data-theme="dark"] body.pd2 { --pd2-menu-bg: rgba(10,24,38,.94); --pd2-solid: #0d1e2e; --pd2-scrim: rgba(2,8,14,.58); --pd2-menu-shadow: 0 30px 80px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(150,190,225,.12); }

/* Kopfleiste: Haus-Knopf (Startseite); Hell/Dunkel steckt im Menü (Darstellung). Das Haus in der Kontakt-Reihe bleibt ausgeblendet, damit es nicht doppelt erscheint */
body.pd2 .pd2-home-btn svg { width: 18px; height: 18px; }
body.pd2 .pd2-home-btn { order: 94; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: 2px; border-radius: 50%; background: rgba(255,255,255,.09); color: inherit; opacity: 1; text-decoration: none; }
body.pd2 .pd2-home-btn:hover { background: rgba(255,255,255,.2); }
/* Schmal im Hochformat: Haus-Knopf links neben dem Menü-Knopf; der Name behält links und rechts genug Platz */
@media (max-width: 640px) and (orientation: portrait) {
  body.pd2 .pd2-home-btn { position: absolute; right: 58px; top: 50%; transform: translateY(-50%); margin: 0; }
  body.pd2 header #header-text { padding: 0 108px 0 68px !important; }
}
body.pd2 ._nc-header-icons a[aria-label="Startseite"], .pd2-m-contact a[aria-label="Startseite"] { display: none; }
/* Fläche und Hintergrund */
.pd2-m-scrim { position: fixed; inset: 0; z-index: 1990; background: var(--pd2-scrim); opacity: 0; pointer-events: none; transition: opacity .25s; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pd2-m-scrim.open { opacity: 1; pointer-events: auto; }
html.pd2-m-lock, html.pd2-m-lock body { overflow: hidden; }
.pd2-m {
  position: fixed; z-index: 1991; display: flex; flex-direction: column; color: var(--pd2-text); font-family: inherit;
  background: var(--pd2-menu-bg); border: 1px solid var(--pd2-line-2); box-shadow: var(--pd2-menu-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); overflow: hidden;
  visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .22s, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s;
}
.pd2-m::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--pd2-accent), transparent); opacity: .8; z-index: 3; }
.pd2-m.open { visibility: visible; opacity: 1; pointer-events: auto; transform: none !important; transition: opacity .22s, transform .28s cubic-bezier(.2,.8,.2,1); }
.pd2-m svg { flex: none; }
/* Wischen zum Schließen (scripts/pd-design-2026.js › wireSwipe): das Menü folgt dem Finger; waagerechte Gesten gehören dem Skript, senkrechtes Blättern bleibt */
@media (max-width: 1024px) { .pd2-m { touch-action: pan-y; } }
.pd2-m.open.pd2-m-dragging { transform: var(--pd2-m-drag, none) !important; transition: none !important; }
.pd2-m.open.pd2-m-dragging.pd2-m-release { transition: transform .22s ease-out !important; }
.pd2-m.pd2-m-gone { visibility: hidden !important; transition: none !important; }
.pd2-m a { color: inherit; text-decoration: none; }
/* Desktop: Position setzt das Skript unter die Kopfleiste (top/right) */
@media (min-width: 1025px) { .pd2-m { top: 86px; right: 16px; width: 410px; max-height: calc(100dvh - 104px); border-radius: 26px; transform: translateY(-10px) scale(.98); transform-origin: top right; } }
/* Tablet und Handy quer: Seitenpanel von rechts */
@media (max-width: 1024px) { .pd2-m { top: 0; bottom: 0; right: 0; width: min(410px, 100%); border-radius: 26px 0 0 26px; border-right: 0; transform: translateX(24px); padding-bottom: env(safe-area-inset-bottom, 0px); } }
/* Handy hochkant: Vollbild von unten */
@media (max-width: 640px) and (orientation: portrait) { .pd2-m { left: 0; width: 100%; border-radius: 0; border: 0; transform: translateY(24px); } }

.pd2-m-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 8px; flex: none; }
@media (max-width: 1024px) { .pd2-m-head { padding-top: calc(16px + env(safe-area-inset-top, 0px)); } }
.pd2-m-title { flex: 1; font: 600 10.5px var(--pd2-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pd2-muted); }
.pd2-m-x { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--pd2-line); background: var(--pd2-field); color: inherit; display: grid; place-items: center; cursor: pointer; }
.pd2-m-x:hover { border-color: var(--pd2-line-2); }
.pd2-m-search { flex: none; margin: 4px 16px 0; display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px; border-radius: 14px; background: var(--pd2-field); border: 1px solid var(--pd2-line); color: var(--pd2-muted); }
.pd2-m-search:focus-within { border-color: var(--pd2-signal); box-shadow: 0 0 0 3px var(--pd2-ring); }
.pd2-m-search input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; color: var(--pd2-text); font: inherit; font-size: 14px; }
.pd2-m-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px 12px; overscroll-behavior: contain; }
.pd2-m-lbl { display: flex; align-items: center; gap: 8px; margin: 16px 8px 8px; font: 600 10px var(--pd2-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pd2-muted); }
.pd2-m-lbl::after { content: ""; flex: 1; height: 1px; background: var(--pd2-line); }
.pd2-m-none { margin: 22px 14px; color: var(--pd2-muted); font-size: 13px; }
.pd2-m-none[hidden], #pd2-m-home[hidden], #pd2-m-results[hidden] { display: none; }

/* Zuletzt besucht / Schnellzugriff */
.pd2-m-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 6px; }
.pd2-m-q { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 12px 4px 10px; border: 1px solid var(--pd2-line); border-radius: 16px; background: var(--pd2-card); font-size: 11.5px; font-weight: 600; text-align: center; transition: .15s; }
.pd2-m-q svg { width: 21px; height: 21px; color: var(--blue); }
.pd2-m-q span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd2-m-q:hover { border-color: var(--pd2-line-2); background: var(--pd2-tint); }
.pd2-m-contact { display: none; margin-top: 10px; padding: 0 6px; }
.pd2-m-contact #_nc-menu-icons { display: flex !important; gap: 8px; justify-content: space-between; padding: 0; border: 0; }
.pd2-m-contact ._nc-header-icon-btn { flex: 1; width: auto !important; height: 44px !important; border-radius: 13px !important; border: 1px solid var(--pd2-line); background: var(--pd2-card) !important; color: var(--blue); opacity: 1; }
.pd2-m-contact ._nc-header-icon-btn svg { width: 20px; height: 20px; }
@media (max-width: 640px) and (orientation: portrait) { .pd2-m-contact { display: block; } }

/* Bereiche: Akkordeon (Desktop, Tablet) bzw. Kacheln (Handy) */
.pd2-m-area { margin: 2px 0; border-radius: 16px; transition: background .15s; }
.pd2-m-area.open { background: var(--pd2-tint); }
.pd2-m-ah { display: flex; align-items: center; gap: 12px; width: 100%; height: 50px; padding: 0 12px; border: 0; background: none; border-radius: 16px; color: inherit; font: inherit; font-weight: 620; font-size: 14.5px; text-align: left; cursor: pointer; }
.pd2-m-ah:hover { background: var(--pd2-tint); }
.pd2-m-chip { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--pd2-tint); color: var(--blue); border: 1px solid var(--pd2-line); }
.pd2-m-chip svg { width: 18px; height: 18px; }
.pd2-m-area.open .pd2-m-chip { background: color-mix(in srgb, var(--blue) 18%, transparent); }
.pd2-m-cnt { margin-left: auto; font: 500 11px var(--pd2-mono); color: var(--pd2-muted); }
.pd2-m-chev { width: 16px; height: 16px; color: var(--pd2-muted); transition: transform .2s; }
.pd2-m-area.open .pd2-m-chev { transform: rotate(90deg); }
.pd2-m-ab { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s cubic-bezier(.2,.7,.2,1); }
.pd2-m-area.open .pd2-m-ab { grid-template-rows: 1fr; }
.pd2-m-ab > div { overflow: hidden; min-height: 0; padding-bottom: 0; }
.pd2-m-area.open .pd2-m-ab > div { padding-bottom: 6px; }
.pd2-m-it { position: relative; display: flex; align-items: center; gap: 11px; width: calc(100% - 20px); margin: 1px 10px; min-height: 40px; padding: 0 12px; border-radius: 11px; font-size: 13.8px; font-weight: 520; opacity: .9; transition: background .15s; }
.pd2-m-it svg { width: 17px; height: 17px; color: var(--pd2-muted); }
.pd2-m-it:hover { background: var(--pd2-tint); opacity: 1; }
.pd2-m-it.cur { background: color-mix(in srgb, var(--blue) 14%, transparent); opacity: 1; font-weight: 650; color: var(--blue); }
.pd2-m-it.cur svg { color: var(--blue); }
.pd2-m-it.cur::before { content: ""; position: absolute; left: -6px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--pd2-accent); box-shadow: 0 0 12px var(--pd2-accent); }
.pd2-m-beta { margin-left: auto; padding: 1px 7px; border-radius: 99px; font: 700 9.5px var(--pd2-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--pd2-accent); color: #2a2106; }
.pd2-m-it .pd2-m-cnt { margin-left: auto; }
.pd2-m-tiles { display: none; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 6px; }
.pd2-m-t { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; min-height: 96px; padding: 14px; border-radius: 18px; border: 1px solid var(--pd2-line); background: var(--pd2-card); color: inherit; font: inherit; font-weight: 640; font-size: 14.5px; text-align: left; cursor: pointer; }
.pd2-m-t:active { background: var(--pd2-tint); }
.pd2-m-t small { margin-top: -8px; font: 500 11px var(--pd2-mono); color: var(--pd2-muted); }
@media (max-width: 640px) and (orientation: portrait) { .pd2-m-acc { display: none; } .pd2-m-tiles { display: grid; } }
.pd2-m-sub { display: none; flex-direction: column; position: absolute; inset: 0; z-index: 2; background: var(--pd2-solid); }
.pd2-m-sub.open { display: flex; }
.pd2-m-sub .pd2-m-it { min-height: 50px; font-size: 15px; width: calc(100% - 12px); margin: 1px 6px; }
.pd2-m-back { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border-radius: 12px; border: 1px solid var(--pd2-line); background: var(--pd2-field); color: inherit; font: inherit; font-weight: 620; cursor: pointer; }
.pd2-m-sub .pd2-m-title { text-align: right; }

/* Fuß: Konto, Darstellung, Abmelden */
.pd2-m-foot { flex: none; display: grid; gap: 10px; padding: 10px 14px 14px; border-top: 1px solid var(--pd2-line); background: color-mix(in srgb, var(--pd2-solid) 55%, transparent); }
.pd2-m-acct { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--pd2-card); border: 1px solid var(--pd2-line); }
.pd2-m-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 700 14px inherit; color: #031c25; background: linear-gradient(135deg, var(--pd2-accent), var(--pd2-signal)); }
.pd2-m-av svg { width: 20px; height: 20px; }
.pd2-m-who { min-width: 0; flex: 1; }
.pd2-m-who b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd2-m-who small { display: block; color: var(--pd2-muted); font-size: 12px; }
.pd2-m-who small svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; display: inline; }
.pd2-m-info { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--pd2-line); background: none; color: var(--pd2-muted); display: grid; place-items: center; cursor: pointer; }
.pd2-m-info svg { width: 16px; height: 16px; }
.pd2-m-rel { padding: 6px 16px 18px; font-size: 14px; line-height: 1.55; }
.pd2-m-rel > b { display: block; margin: 4px 0 10px; font-size: 16px; }
.pd2-m-rel ul { margin: 0; padding-left: 20px; display: grid; gap: 9px; color: var(--pd2-text); }
.pd2-m-rel li::marker { color: var(--pd2-accent); }
.pd2-m-rel p { margin: 0; color: var(--pd2-muted); }
.pd2-m-note { margin: 0; padding: 0 4px; font-size: 12.5px; color: var(--pd2-muted); }
/* Fuß, zweite Zeile: Darstellung (Schnellauswahl) · Einstellungen · Logs & Debug (nur mit Recht) · Abmelden/Anmelden – Symbol-Knöpfe links, „Abmelden“ füllt den Rest.
   Handy hochkant: höhere Knöpfe mit Kurzbeschriftung unter dem Symbol; sonst nur Symbole (Hinweis per title/aria-label). */
.pd2-m-row { display: flex; align-items: center; gap: 8px; }
.pd2-m-tw { position: relative; flex: none; }
.pd2-m-tw[hidden] { display: none; }
.pd2-m-ib { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; align-content: center; justify-items: center; gap: 2px; padding: 0; border-radius: 14px; border: 1px solid var(--pd2-line-2); background: var(--pd2-tint); color: var(--pd2-text); font: inherit; text-decoration: none; cursor: pointer; }
.pd2-m-ib:hover, .pd2-m-ib.cur, .pd2-m-tw.open .pd2-m-thb { background: color-mix(in srgb, var(--pd2-signal) 16%, transparent); border-color: var(--pd2-signal); }
.pd2-m-ib svg { width: 19px; height: 19px; }
.pd2-m-thi { display: grid; place-items: center; }
.pd2-m-cap { display: none; font-size: 10.5px; font-weight: 620; line-height: 1; color: var(--pd2-muted); }
@media (max-width: 640px) and (orientation: portrait) { .pd2-m-ib { width: auto; min-width: 56px; height: 56px; padding: 0 6px; } .pd2-m-cap { display: block; } .pd2-m-out { height: 56px !important; } }
.pd2-m-pop { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 6; display: none; gap: 3px; padding: 4px; border-radius: 16px; background: var(--pd2-solid); border: 1px solid var(--pd2-line-2); box-shadow: var(--pd2-menu-shadow); }
.pd2-m-tw.open .pd2-m-pop { display: flex; }
.pd2-m-pop::after { content: ""; position: absolute; left: 17px; bottom: -6px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--pd2-solid); border-right: 1px solid var(--pd2-line-2); border-bottom: 1px solid var(--pd2-line-2); }
.pd2-m-pop button { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px 0 11px; border: 0; border-radius: 12px; background: none; color: var(--pd2-muted); font: inherit; font-weight: 620; font-size: 13px; white-space: nowrap; cursor: pointer; }
.pd2-m-pop button svg { width: 16px; height: 16px; }
.pd2-m-pop button[aria-pressed="true"] { background: #fff; color: var(--pd2-text); box-shadow: 0 1px 4px rgba(13,33,55,.2); }
html[data-theme="dark"] body.pd2 .pd2-m-pop button[aria-pressed="true"] { background: rgba(110,165,230,.22); box-shadow: none; }
.pd2-m-out { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--pd2-btn-a), var(--pd2-btn-b)); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 8px 22px -10px var(--pd2-btn-b); }
.pd2-m-out svg { width: 17px; height: 17px; }
.pd2-m-legal { display: flex; justify-content: center; gap: 14px; font-size: 12px; color: var(--pd2-muted); }
.pd2-m-legal a:hover { color: var(--pd2-text); }
@media (prefers-reduced-motion: reduce) { .pd2-m, .pd2-m-scrim, .pd2-m-ab { transition: none !important; } }
/* Druck und PDF: keine Kopfleiste, kein Menü, kein Hintergrundmuster */
@media print { .pd2-m, .pd2-m-scrim, body.pd2 header, body.pd2::before { display: none !important; } }

/* ─────────────────────────────────────────────────────────────────────────────
   KARTEN-SEITEN (body.pd2-cards): Gäste-Seiten (Gastliegeplatz-Anfrage, Check-in, Bewertung, Stegplan öffentlich, Pegelverlauf) und Mitglieder-Seiten
   Karten, Köpfe, Abschnitte, Felder und Knöpfe im Stil der Anmeldung und der Startseite. Die Seiten behalten ihre
   eigenen Klassen (.card, .fb-card, .ci-card …); hier steht nur, wie sie aussehen. Farben nur aus den pd2-Tokens (Hell/Dunkel).
   ───────────────────────────────────────────────────────────────────────────── */
body.pd2-cards :is(.card, .fb-card, .ci-card, .controls, .result-card, .main-card) {
  position: relative; background: var(--pd2-card); border: 1px solid var(--pd2-line); border-radius: 24px; box-shadow: var(--pd2-shadow);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden;
}
body.pd2-cards :is(.card-head, .ci-head) { padding: 16px 22px; border-bottom: 1px solid var(--pd2-line); }
body.pd2-cards :is(.card-head h2, .ci-head h3) { font-size: 15px; font-weight: 700; color: var(--pd2-text); }
body.pd2-cards :is(.card-body, .ci-body) { padding: 20px 22px; }
body.pd2-cards .result-card.pf-fullscreen { border-radius: 0; }

/* Kopf der Karte: Markenfläche wie die Kopfleiste, mit goldener Linie */
body.pd2-cards :is(.gr-hero, .fb-head) {
  position: relative; border: 0; border-radius: 0; padding: 26px 28px 24px; color: #fff;
  background: radial-gradient(560px 240px at 100% 0%, rgba(255,255,255,.15), transparent 62%),
              linear-gradient(135deg, var(--pd2-brand, var(--blue)), color-mix(in srgb, var(--pd2-brand, var(--blue)) 68%, var(--pd2-brand-2, var(--blue-light, #2a5a8c))));
}
body.pd2-cards :is(.gr-hero, .fb-head)::after {
  content: ""; position: absolute; left: 28px; right: 28px; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--pd2-accent), transparent); opacity: .85;
}
body.pd2-cards :is(.gr-hero h2, .fb-head h1) { color: #fff; font-size: 21px; line-height: 1.25; }
body.pd2-cards :is(.gr-hero .lead, .fb-head p) { color: rgba(255,255,255,.84); opacity: 1; }
body.pd2-cards .gr-hero .ico { width: 54px; height: 54px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 10px 20px -12px rgba(0,0,0,.6); }
body.pd2-cards .result-card .result-head { background: linear-gradient(135deg, var(--pd2-brand, var(--blue)), color-mix(in srgb, var(--pd2-brand, var(--blue)) 68%, var(--pd2-brand-2, var(--blue-light, #2a5a8c)))); }

/* Abschnittstitel */
body.pd2-cards :is(.sec-title, .fb-sec > h2) {
  display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; padding: 0; border: 0;
  font: 600 11px var(--pd2-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pd2-muted);
}
body.pd2-cards .sec-title:first-child { margin-top: 0; }
body.pd2-cards :is(.sec-title, .fb-sec > h2)::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pd2-accent); box-shadow: 0 0 10px var(--pd2-accent); }
body.pd2-cards :is(.sec-title, .fb-sec > h2)::after { content: ""; flex: 1; height: 1px; background: var(--pd2-line); }

/* Felder (auch außerhalb von .fg) und Beschriftungen */
body.pd2-cards label.f, body.pd2-cards .ci-f label { font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--pd2-muted); margin-bottom: 6px; }
body.pd2-cards :is(.fb-in, .fb-q textarea, .ci-f input:not([type=checkbox]):not([type=radio]), .ci-f select, .pa-thr input) {
  min-height: 44px; padding: 10px 14px; border: 1px solid var(--pd2-line); border-radius: 12px; background-color: var(--pd2-field); color: var(--pd2-text);
  font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
body.pd2-cards .fb-q textarea { line-height: 1.55; }
body.pd2-cards :is(.fb-in, .fb-q textarea, .ci-f input, .ci-f select):hover { border-color: var(--pd2-line-2); }
body.pd2-cards :is(.fb-in, .fb-q textarea, .ci-f input, .ci-f select):focus { outline: none; border-color: var(--pd2-signal); box-shadow: 0 0 0 3px var(--pd2-ring); }
body.pd2-cards :is(.check, .ci-check) input { accent-color: var(--pd2-signal); }

/* Knöpfe */
body.pd2-cards :is(.btn-lg, .fb-foot .fb-send, .ci-btn:not(.sm):not(.sec)) { min-height: 50px; border-radius: 14px; font-size: 15px; }
body.pd2-cards :is(.btn-secondary, .ci-btn.sec, .fb-link-btn:not(.pri)) { background: var(--pd2-card); color: var(--pd2-text); border: 1px solid var(--pd2-line-2); border-radius: 12px; }
body.pd2-cards :is(.btn-secondary, .ci-btn.sec):hover:not(:disabled) { background: var(--pd2-tint); opacity: 1; }
body.pd2-cards :is(.ci-btn, .fb-link-btn.pri) { border-radius: 12px; }
body.pd2-cards .ci-btn:not(.sec):not(.ok) { background: linear-gradient(135deg, var(--pd2-btn-a), var(--pd2-btn-b)); color: var(--color-primary-text, #fff); box-shadow: 0 8px 20px -10px var(--blue); }

/* Hinweise */
body.pd2-cards :is(.note, .fb-note, .ci-note, .hinweis, .frist, .confirm-box) { border-radius: 14px; padding: 12px 14px; }

/* Auswahlknöpfe der Bewertung und Zeitraum-Knöpfe */
body.pd2-cards .fb-opts button { padding: 9px 17px; border-radius: 99px; border-color: var(--pd2-line-2); background: var(--pd2-card); transition: background .15s, border-color .15s; }
body.pd2-cards .fb-opts button:hover:not(.on) { background: var(--pd2-tint); }
body.pd2-cards :is(.fb-faces button, .fb-who button) { border-width: 1.5px; border-color: var(--pd2-line-2); border-radius: 16px; background: var(--pd2-card); transition: border-color .15s, background .15s; }
body.pd2-cards :is(.fb-faces button.on, .fb-who button.on) { border-color: var(--blue); background: var(--pd2-tint); }
body.pd2-cards .fb-scale button { border-color: var(--pd2-line-2); border-radius: 10px; background: var(--pd2-card); }
body.pd2-cards .fb-stars svg { fill: var(--pd2-line-2); }
body.pd2-cards .fb-stars button.on svg { fill: var(--pd2-accent); }
body.pd2-cards .fb-faces svg { stroke: var(--pd2-muted); }
body.pd2-cards .fb-q { border-bottom-color: var(--pd2-line); }
body.pd2-cards .fb-stay { border-radius: 16px; border-color: var(--pd2-line); background: var(--pd2-tint); }
body.pd2-cards .seg-btns { gap: 4px; padding: 3px; border: 1px solid var(--pd2-line-2); border-radius: 99px; background: var(--pd2-field); overflow: visible; }
body.pd2-cards .seg-btn { border: 0; border-radius: 99px; padding: 7px 16px; background: transparent; }
body.pd2-cards .seg-btn.active { background: linear-gradient(135deg, var(--pd2-btn-a), var(--pd2-btn-b)); color: var(--color-primary-text, #fff); }
body.pd2-cards .seg-btn:hover:not(.active) { background: var(--pd2-tint); }
body.pd2-cards .pf-toggle { border-radius: 99px; border-color: var(--pd2-line-2); background: var(--pd2-card); }
body.pd2-cards .pf-toggle.active { background: linear-gradient(135deg, var(--pd2-btn-a), var(--pd2-btn-b)); color: var(--color-primary-text, #fff); border-color: transparent; }
body.pd2-cards .pf-zoom button { border-radius: 10px; border-color: var(--pd2-line-2); background: var(--pd2-card); }

/* Fortschritt und Zeitleiste */
body.pd2-cards :is(.progress div, .ci-steps button)::before { height: 6px; border-radius: 4px; background: var(--pd2-line-2); }
body.pd2-cards :is(.progress div.done, .ci-steps button.done)::before { background: var(--blue); }
body.pd2-cards :is(.progress div.now, .ci-steps button.cur)::before { background: var(--pd2-accent); }
body.pd2-cards .ticket { border-radius: 18px; border-color: var(--pd2-line); background: var(--pd2-tint); }
body.pd2-cards :is(.ci-info, .ci-pay, .ci-doc, .ci-var, .weiter) { border-radius: 14px; border-color: var(--pd2-line); background: var(--pd2-tint); }
body.pd2-cards .ci-var.on { border-color: var(--blue); background: var(--pd2-tint); }
body.pd2-cards .tl li::before { background: var(--pd2-line-2); }
body.pd2-cards .tl li::after { background: var(--pd2-line); }
body.pd2-cards :is(.ci-modal, .modal) { border-radius: 22px; border: 1px solid var(--pd2-line); background: var(--pd2-card); color: var(--pd2-text); }
body.pd2-cards .ci-modal-bg { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (max-width: 600px) {
  body.pd2-cards :is(.gr-hero, .fb-head) { padding: 22px 20px 20px; }
  body.pd2-cards :is(.card-body, .ci-body) { padding: 18px 16px; }
  body.pd2-cards :is(.gr-hero, .fb-head)::after { left: 20px; right: 20px; }
}

/* ── Mitglieder-Seiten (Kalender, Aufgaben, Arbeitseinsätze, Stegplan): gleiche Karten- und Knopfsprache ── */
body.pd2-cards :is(.ev-row, .steg-row, .ae-table-wrap, .ae-panel, .board-filter-panel, .ev-empty) {
  background: var(--pd2-card); border: 1px solid var(--pd2-line); border-radius: 18px; box-shadow: var(--pd2-shadow);
}
body.pd2-cards .ae-table-wrap { overflow: hidden; border-radius: 20px; }
body.pd2-cards .ae-panel { border-radius: 20px; padding: 20px 22px; }
body.pd2-cards .board-filter-panel { border-radius: 16px; }
body.pd2-cards .ev-row { transition: transform .15s ease, border-color .15s ease; }
body.pd2-cards .ev-row:hover { transform: translateY(-1px); border-color: var(--pd2-line-2); }
body.pd2-cards .ev-row.ev-child { background: var(--pd2-tint); box-shadow: none; border-color: var(--pd2-line); }
body.pd2-cards .ev-row.ev-current { box-shadow: inset 0 0 0 2px var(--pd2-signal), var(--pd2-shadow); }
body.pd2-cards .ev-chip { border-radius: 99px; }
body.pd2-cards .steg-row { transition: border-color .15s ease; }
body.pd2-cards .steg-row:hover { border-color: var(--pd2-line-2); }
body.pd2-cards .berth-edit-btn { border-radius: 8px; border-color: var(--pd2-line-2); background: var(--pd2-card); }

/* Monat: Tageszellen als weiche Kacheln */
body.pd2-cards .month-cell { border-radius: 12px; border-color: var(--pd2-line); background-color: var(--pd2-card); }
body.pd2-cards .month-cell.today { border-width: 1px; border-color: var(--pd2-signal); box-shadow: 0 0 0 2px var(--pd2-ring); }
body.pd2-cards .month-chip { border-radius: 6px; }

/* Aufgaben: Spalten und Karten */
body.pd2-cards .kanban-col { border-radius: 20px; border-color: var(--pd2-line); }
body.pd2-cards .kanban-card { border-radius: 14px; box-shadow: 0 1px 2px rgba(13,33,55,.08), 0 10px 22px -16px rgba(13,33,55,.35); transition: transform .15s ease, box-shadow .15s ease; }
body.pd2-cards .kanban-card:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(13,33,55,.1), 0 16px 26px -16px rgba(13,33,55,.45); }

/* Schaltflächen und Umschalter */
body.pd2-cards :is(.tb-btn, .ae-btn, .sort-btn, #cal-nav button, .board-switch-btn, .ae-select, .ae-field select, #year-tabs button) {
  border-color: var(--pd2-line-2); background-color: var(--pd2-card); border-radius: 12px; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
body.pd2-cards #year-tabs button { border-radius: 99px; }
body.pd2-cards :is(.tb-btn, .ae-btn, .sort-btn, #cal-nav button, #year-tabs button):hover { border-color: var(--pd2-signal); background-color: var(--pd2-tint); }
body.pd2-cards .view-toggle { display: inline-flex; }
body.pd2-cards :is(#view-switcher, .view-toggle) { gap: 4px; padding: 3px; border: 1px solid var(--pd2-line-2); border-radius: 99px; background: var(--pd2-field); }
body.pd2-cards :is(#view-switcher button, .view-toggle button) { border-radius: 99px; padding-inline: 14px; }
body.pd2-cards :is(#view-switcher button.active, .view-toggle button.active, #year-tabs button.active, .ae-btn.pri, .plan-tb-btn.active) {
  background: linear-gradient(135deg, var(--pd2-btn-a), var(--pd2-btn-b)); color: var(--color-primary-text, #fff); border-color: transparent;
}
body.pd2-cards .ae-btn.pri:hover { background: linear-gradient(135deg, var(--pd2-btn-a), var(--pd2-btn-b)); filter: brightness(1.1); }
body.pd2-cards #btn-add-event {
  border-radius: 12px; color: var(--color-accent-text, #1a2a3a); box-shadow: 0 8px 20px -10px var(--pd2-accent);
  background: linear-gradient(135deg, var(--color-accent, var(--pd2-accent)), color-mix(in srgb, var(--color-accent, var(--pd2-accent)) 78%, #fff));
}
body.pd2-cards :is(.search-wrap input, .form-group input, .form-group select, .form-group textarea) {
  min-height: 42px; border: 1px solid var(--pd2-line); border-radius: 12px; background-color: var(--pd2-field); color: var(--pd2-text); transition: border-color .15s, box-shadow .15s;
}
body.pd2-cards :is(.search-wrap input, .form-group input, .form-group select, .form-group textarea):focus { border-color: var(--pd2-signal); box-shadow: 0 0 0 3px var(--pd2-ring); }
body.pd2-cards .ae-table thead tr { background: transparent; }
body.pd2-cards .ae-table th { background: var(--pd2-field); }
html[data-theme="dark"] body.pd2-cards :is(.ae-title, .board-head-title, .ae-head h2, .ae-panel h3, .ae-t-title, .gr-hero h2) { color: var(--pd2-text); }
/* Dunkelmodus: Stellen, die die Seiten mit festen Halbtransparent-Weiß oder Hellfarben setzen */
html[data-theme="dark"] body.pd2-cards .kanban-col-new-btn { background: var(--pd2-tint); }
html[data-theme="dark"] body.pd2-cards .kanban-card:is(.urg-today, .urg-late) { background: color-mix(in srgb, var(--urg) 22%, var(--pd2-card)); }
html[data-theme="dark"] body.pd2-cards .kanban-avatar { background: var(--pd2-brand-2, var(--color-secondary)); }
html[data-theme="dark"] body.pd2-cards :is(.berth-edit-btn, .contact-btn) svg :is(path, circle, line, polyline) { stroke: var(--pd2-t-brand); }
html[data-theme="dark"] body.pd2-cards :is(.berth-edit-btn, .contact-btn) svg rect { fill: var(--pd2-t-brand); }

/* ── Übrige Seiten (Verwaltung, Verein, Inhalte): ihre Karten und Dialoge in derselben Sprache ── */
body.pd2-cards :is(.bw-card, .bw-kpi, .bw-inbox, .ed-panel, .selector-card, .tl-card, .ci-list, .ci-detail, .nt-panel, .kw-card, .ch-card, .da-panes, .da-file-card,
  .dk-card, .dk-summary, .fm-card, .fe-sheet, .gi-step-card, .gb-card, .gb-toolbar, .gb-mine, .cf-card, .pr-table-wrap, .pr-panel, .poll-card, .poll-summary-bar,
  .pc-card, .pc-sum-card, .gantt-wrap, .filter-bar, .boot-table-wrap, .sr-table-wrap) {
  background: var(--pd2-card); border: 1px solid var(--pd2-line); border-radius: 20px; box-shadow: var(--pd2-shadow);
}
body.pd2-cards :is(.da-panes, .pr-table-wrap, .boot-table-wrap, .sr-table-wrap, .gantt-wrap) { overflow: hidden; }
body.pd2-cards :is(.ha-cluster, .ri-cluster, .stat-card, .portrait-row, .meter-row) { border-radius: 16px; }
body.pd2-cards :is(.dp-confirm-modal, .gtr-modal, .dk-modal, .ch-modal, .da-modal, .gb-modal, .pr-modal, .ri-map-modal, .popup-box, .ed-sheet) {
  border-radius: 22px; border: 1px solid var(--pd2-line); box-shadow: 0 30px 70px -30px rgba(0,0,0,.6);
}
body.pd2-cards :is(.ctab, .ci-tabs button, .bw-chip, .dk-label-chip) { border-radius: 99px; }
body.pd2-cards :is(.dk-search, .pr-search, .da-search-wrap input, .boot-search-wrap input, .search-row input) { border-color: var(--pd2-line-2); background-color: var(--pd2-field); }

/* ── Stegliste: Filter-Pillen, Sortierung, Suche und Zeilen (Stegplan, öffentlicher Stegplan) ── */
body.pd2-cards .sp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.pd2-cards #filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.pd2-cards .filter-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 9px 0 13px; border-width: 1px; border-style: solid; border-radius: 99px;
  font-size: 12.5px; font-weight: 650; opacity: 1; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
}
body.pd2-cards .filter-btn:hover { transform: translateY(-1px); }
body.pd2-cards .filter-btn.active { box-shadow: 0 6px 12px -10px currentColor; }
body.pd2-cards .filter-btn:not(.active) { background: transparent; border-style: dashed; border-color: var(--pd2-line-2); color: var(--pd2-muted); }
body.pd2-cards .filter-btn:not(.active) .leg-dot { opacity: .45; }
body.pd2-cards .filter-btn .leg-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); }
body.pd2-cards .filter-btn .fb-n {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; display: inline-grid; place-items: center;
  background: color-mix(in srgb, currentColor 14%, transparent); font-size: 11.5px; font-weight: 750; font-variant-numeric: tabular-nums;
}
body.pd2-cards .filter-btn .fb-n:empty { display: none; }
body.pd2-cards .sort-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 15px; border: 1px solid var(--pd2-line-2); border-radius: 99px;
  background: var(--pd2-card); color: var(--pd2-text); font-size: 12.5px; font-weight: 650; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s;
}
body.pd2-cards .sort-btn:hover { background: var(--pd2-tint); border-color: var(--pd2-signal); }
body.pd2-cards .search-wrap input { height: 46px; padding: 0 16px 0 44px; border: 1px solid var(--pd2-line); border-radius: 14px; background-color: var(--pd2-field); color: var(--pd2-text); font-size: 14px; }
body.pd2-cards .search-wrap input:focus { border-color: var(--pd2-signal); box-shadow: 0 0 0 3px var(--pd2-ring); }
body.pd2-cards .search-wrap .search-icon {
  left: 16px; width: 18px; height: 18px; font-size: 0; background: var(--pd2-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='m20 20-3.5-3.5' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='m20 20-3.5-3.5' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Zeilen */
body.pd2-cards .steg-row { position: relative; gap: 18px; padding: 14px 18px 14px 16px; margin-bottom: 12px; border-radius: 22px; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
body.pd2-cards .steg-row:hover { transform: translateY(-1px); border-color: var(--pd2-line-2); box-shadow: 0 2px 4px rgba(13,33,55,.06), 0 18px 34px -22px rgba(13,33,55,.4); }
body.pd2-cards .steg-row::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 4px; border-radius: 0 4px 4px 0; background: var(--pd2-line-2); }
body.pd2-cards .steg-row.row-busy::before { background: var(--busy-border, var(--pd2-line-2)); }
body.pd2-cards .steg-row.row-free::before { background: var(--free-border, var(--pd2-line-2)); }
body.pd2-cards .steg-row.row-freeabw::before { background: var(--freeabw-border, var(--pd2-line-2)); }
body.pd2-cards .steg-row.row-guest::before { background: var(--guest-border, var(--pd2-line-2)); }
body.pd2-cards .steg-id-label {
  width: 46px; height: 46px; padding: 0; border-radius: 15px; display: grid; place-items: center; text-align: center;
  background: var(--pd2-tint); box-shadow: inset 0 0 0 1px var(--pd2-line); color: var(--pd2-text); font-size: 15px; font-weight: 800;
}
body.pd2-cards :is(.berth-box, .berth-wrap) { border-radius: 16px; border-width: 1.5px; }
body.pd2-cards .steg-owner { font-size: 14px; font-weight: 650; line-height: 1.4; color: var(--pd2-text); margin-bottom: 3px; }
body.pd2-cards .steg-dims { font-size: 12px; color: var(--pd2-muted); margin-top: 2px; }
body.pd2-cards .steg-zaehler {
  display: inline-flex; align-items: center; margin-top: 7px; padding: 3px 11px; border-radius: 99px; background: var(--pd2-tint);
  font-size: 11.5px; line-height: 1.5; color: var(--pd2-muted); opacity: 1;
}
body.pd2-cards :is(.steg-badge, .status-pill) {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 9px; border-radius: 99px; margin-top: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
}
body.pd2-cards :is(.steg-badge, .status-pill)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
body.pd2-cards .steg-actions { gap: 8px; }
body.pd2-cards :is(.berth-edit-btn, .contact-btn) {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--pd2-line-2); background: var(--pd2-card);
  display: flex; align-items: center; justify-content: center; transition: background-color .15s, border-color .15s, transform .1s;
}
body.pd2-cards :is(.berth-edit-btn, .contact-btn):hover { background: var(--pd2-tint); border-color: var(--pd2-signal); transform: none; }
body.pd2-cards .berth-edit-btn svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
  body.pd2-cards .steg-row { padding: 14px 14px 14px 14px; border-radius: 20px; }
  body.pd2-cards .steg-id-label { width: 40px; height: 40px; font-size: 14px; }
  body.pd2-cards .sp-filters { gap: 8px; }
}
/* Stegliste, Dunkelmodus: neutrale (verschleierte) Pillen und Schilder bekommen dunkle Flächen; die Fläche der Stegzeichnung bleibt die vom Verein gewählte Neutralfarbe */
html[data-theme="dark"] body.pd2-cards .filter-btn.fb-neutral.active { background: var(--pd2-tint); border-color: var(--pd2-line-2); color: var(--pd2-text); }
html[data-theme="dark"] body.pd2-cards .pill-neutral { background: var(--pd2-tint); border-color: var(--pd2-line-2); color: var(--pd2-muted); }

/* ── Stegplan-Karte: Werkzeugleiste, Zoom, Rahmen (Stegplan, öffentlicher Stegplan) ── */
body.pd2-cards :is(#plan-container, #plan-area) .ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
body.pd2-cards #plan-container { border-radius: 18px; border-color: var(--pd2-line); }
body.pd2-cards #plan-toolbar { top: 14px; right: 14px; gap: 8px; }
body.pd2-cards .plan-tb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px 0 12px; border: 1px solid var(--pd2-line-2); border-radius: 99px;
  background: color-mix(in srgb, var(--pd2-card) 84%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--pd2-muted); font-size: 12.5px; font-weight: 650; cursor: pointer; white-space: nowrap; box-shadow: 0 8px 20px -12px rgba(13,33,55,.5);
  transition: background-color .15s, border-color .15s, color .15s, transform .1s;
}
body.pd2-cards .plan-tb-btn:hover { color: var(--pd2-text); border-color: var(--pd2-signal); transform: translateY(-1px); }
body.pd2-cards .plan-tb-btn.active { box-shadow: 0 10px 22px -12px var(--pd2-btn-a); }
body.pd2-cards .plan-tb-btn.active:hover { color: var(--color-primary-text, #fff); filter: brightness(1.08); }
body.pd2-cards .plan-tb-btn.is-busy { opacity: .6; pointer-events: none; cursor: progress; }
body.pd2-cards #plan-fs-btn { width: 38px; padding: 0; color: var(--pd2-text); }
body.pd2-cards #plan-fs-btn .ico-shrink, body.pd2-cards #plan-fs-btn.is-fs .ico-expand { display: none; }
body.pd2-cards #plan-fs-btn.is-fs .ico-shrink { display: block; }
body.pd2-cards .zoom-btns {
  right: 14px; bottom: 16px; gap: 0; border: 1px solid var(--pd2-line-2); border-radius: 22px; overflow: hidden;
  background: color-mix(in srgb, var(--pd2-card) 84%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 12px 26px -14px rgba(13,33,55,.55);
}
body.pd2-cards .zoom-btn { width: 42px; height: 42px; border: 0; border-radius: 0; background: transparent; color: var(--pd2-text); display: grid; place-items: center; cursor: pointer; transition: background-color .15s; }
body.pd2-cards .zoom-btn + .zoom-btn { border-top: 1px solid var(--pd2-line); }
body.pd2-cards .zoom-btn:hover { background: var(--pd2-tint); }
body.pd2-cards .zoom-btn:active { background: var(--pd2-ring); }
body.pd2-cards #plan-status { top: 16px; padding: 8px 16px; border-radius: 99px; background: color-mix(in srgb, #0b1827 78%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12.5px; font-weight: 600; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); }
@media (max-width: 600px) {
  body.pd2-cards #plan-toolbar { top: 10px; right: 10px; gap: 6px; }
  body.pd2-cards .plan-tb-btn { width: 38px; padding: 0; }
  body.pd2-cards .zoom-btns { right: 10px; bottom: 12px; }
  body.pd2-cards .zoom-btn { width: 40px; height: 40px; }
}

/* ── Speicherleiste (Einstellungen): bleibt am unteren Rand sichtbar, bis der Bereich zu Ende gescrollt ist (Skript: scripts/pd-savebar.js) ── */
body.pd2 .pd-savebar {
  position: sticky; bottom: 14px; z-index: 30; margin-top: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px;
  padding: 12px 12px 12px 20px; border: 1px solid var(--pd2-line-2, var(--border)); border-radius: 20px;
  background: color-mix(in srgb, var(--pd2-card, #fff) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 -2px 6px rgba(13,33,55,.04), 0 18px 40px -16px rgba(13,33,55,.5); transition: border-color .2s;
}
body.pd2 .pd-savebar[data-state="dirty"] { border-color: var(--pd2-b-warn, #f0b95e); }
body.pd2 .pd-savebar[data-state="error"] { border-color: var(--pd2-b-err, #e08a8a); }
body.pd2 .pd-savebar-txt { flex: 1 1 260px; min-width: 0; font-size: 12.5px; color: var(--pd2-muted, var(--muted)); line-height: 1.45; }
body.pd2 .pd-savebar-txt > b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 1px; }
body.pd2 .pd-savebar-txt > b.clean { color: var(--pd2-t-ok, #1a7f37); }
body.pd2 .pd-savebar-txt > b.clean:not(:empty)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
body.pd2 .pd-savebar-txt > b.dirty { color: var(--pd2-t-warn, #b45309); }
body.pd2 .pd-savebar-txt > b.error { color: var(--pd2-t-danger, #b22222); }
body.pd2 .pd-savebar .btn-primary {
  flex: 0 1 auto; margin-left: auto; padding: 12px 24px; border: 0; border-radius: 14px; font-weight: 700; cursor: pointer; white-space: normal; text-align: center;
  background: linear-gradient(135deg, var(--pd2-btn-a, var(--color-primary)), var(--pd2-btn-b, var(--color-primary))); color: var(--color-primary-text, #fff);
  box-shadow: 0 10px 22px -12px var(--pd2-btn-a, var(--color-primary));
}
body.pd2 .pd-savebar .btn-primary:disabled { opacity: .65; cursor: progress; }
body.pd2 .pd-savebar .modal-msg:empty { display: none; }
body.pd2 .s-card.pd-dirty { box-shadow: inset 3px 0 0 var(--pd2-t-warn, #b45309); }
/* Kennzeichnung „Nicht gespeichert“: Pille rechts auf der Linie der Überschrift (der Kartenkopf bleibt unverändert) */
body.pd2 .s-card.pd-dirty::after {
  content: "Nicht gespeichert"; position: absolute; top: 17px; right: 24px; padding: 3px 11px; border: 1px solid color-mix(in srgb, var(--pd2-t-warn, #b45309) 40%, transparent); border-radius: 99px;
  background: var(--pd2-card); box-shadow: 0 0 0 5px var(--pd2-card); color: var(--pd2-t-warn, #b45309); font-size: 11.5px; font-weight: 650; line-height: 1.4; pointer-events: none;
}
@media (max-width: 640px) {
  body.pd2 .s-card.pd-dirty::after { top: 13px; right: 16px; }
  body.pd2 .pd-savebar { bottom: 8px; padding: 12px; border-radius: 18px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  body.pd2 .pd-savebar .btn-primary { flex: 1 1 100%; margin-left: 0; }
}

/* ── Bausteine im Stil der Stegliste: Kennzahl-Kacheln, Reiter, Tabellen, Badges, Symbol-Knöpfe, Werkzeugleisten, Knöpfe ──
   Gelten auf allen Seiten mit body.pd2-cards. Farben nur über die pd2-Tokens (Hell/Dunkel), Form wie in der Stegliste:
   Pillen und Kapseln (99px), Karten 20–22px, Steuerelemente 42px hoch, Linien statt Flächen.
   Daten-Tabellen (DT): Tabellen ohne Klasse (members, Register, Gastanmeldung) und .ae-table, .pr-table, .da-table, .fm-table;
   Raster-Tabellen (Gantt, Jahr, Matrix) bleiben unberührt. */

/* Kennzahl-Kacheln: großer Wert, Bezeichnung mit Farbpunkt (--tone, Standard Markenfarbe) */
body.pd2-cards .stat-grid { gap: 14px; }
body.pd2-cards .stat-card {
  border: 1px solid var(--pd2-line); border-left-width: 1px; border-radius: 20px; padding: 18px 20px 16px;
  background: var(--pd2-card); box-shadow: var(--pd2-shadow);
}
body.pd2-cards .stat-card .val { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; color: var(--pd2-text); font-variant-numeric: tabular-nums; }
body.pd2-cards .stat-card .lbl { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--pd2-muted); }
body.pd2-cards .stat-card .lbl::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--tone, var(--blue)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone, var(--blue)) 18%, transparent); }

/* Reiter: Segment-Kapsel (members .tabs, Arbeitseinsätze, Protokolle, Bewertungen) */
body.pd2-cards :is(.tabs, .ae-tabs, .pr-tabs, .bw-tabs) { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 16px; border: 1px solid var(--pd2-line-2); border-radius: 99px; background: var(--pd2-field); }
body.pd2-cards :is(.tab-btn, .ae-tab, .pr-tab, .bw-tabs button) {
  margin: 0; padding: 8px 18px; border: 0; border-radius: 99px; background: transparent; color: var(--pd2-muted); font-size: 13px; font-weight: 650;
  transition: background-color .15s, color .15s;
}
body.pd2-cards :is(.tab-btn, .ae-tab, .pr-tab, .bw-tabs button):hover:not(.active):not(.on) { background: var(--pd2-tint); color: var(--pd2-text); }
body.pd2-cards :is(.tab-btn.active, .ae-tab.on, .pr-tab.on, .bw-tabs button.on) { background: linear-gradient(135deg, var(--pd2-btn-a), var(--pd2-btn-b)); color: var(--color-primary-text, #fff); box-shadow: 0 8px 16px -10px var(--pd2-btn-a); }

/* Segment-Schalter in den Seiten: Pillenform, Füllung und Aktiv-Farbe bleiben die der Seite */
body.pd2-cards :is(.dk-seg, .en-seg, .fe-seg, .ed-seg, .pa-seg, .ae-seg) { border-radius: 99px; }
body.pd2-cards .ch-seg button { border-radius: 99px; }

/* Tabellen-Karte: Kopf mit Titel und Werkzeugleiste, darunter die Tabelle */
body.pd2-cards .tcard { border: 1px solid var(--pd2-line); border-radius: 22px; background: var(--pd2-card); box-shadow: var(--pd2-shadow); overflow: hidden; }
body.pd2-cards .tcard-head { padding: 18px 22px; gap: 12px 16px; border-bottom: 1px solid var(--pd2-line); }
body.pd2-cards .tcard-head h2 { font-size: 17px; font-weight: 750; letter-spacing: -.01em; color: var(--pd2-text); }
body.pd2-cards .entry-count { padding: 3px 11px; border-radius: 99px; background: var(--pd2-tint); font-size: 12px; font-weight: 600; color: var(--pd2-muted); }

/* Werkzeugleiste: Suche, Auswahl und Knöpfe in einer Höhe */
body.pd2-cards .filter-row { gap: 10px; }
body.pd2-cards .filter-row :is(input, select) {
  height: 42px; padding: 0 14px; border: 1px solid var(--pd2-line-2); border-radius: 14px; background-color: var(--pd2-field); color: var(--pd2-text); font-size: 13px;
}
body.pd2-cards .filter-row select { padding-right: 34px; font-weight: 600; }
body.pd2-cards .filter-row :is(input, select):focus { border-color: var(--pd2-signal); box-shadow: 0 0 0 3px var(--pd2-ring); outline: none; }
body.pd2-cards .filter-row .search-wrap input { height: 42px; padding-left: 42px; }
/* Eingabefelder in Werkzeugleisten anderer Seiten */
body.pd2-cards :is(#da-search, #boot-search, .filter-search, .ctrl-input, #gbPriceMin, #gbPriceMax, #gbSort, .pr-select, .pr-search, .dk-search, .rv-search, #sel-year, .abr-select) {
  min-height: 38px; border: 1px solid var(--pd2-line-2); border-radius: 12px; background-color: var(--pd2-field); color: var(--pd2-text);
}
body.pd2-cards :is(#da-search, #boot-search, .filter-search, .ctrl-input, #gbPriceMin, #gbPriceMax, #gbSort, .pr-select, .pr-search, .dk-search, .rv-search, #sel-year, .abr-select):focus { border-color: var(--pd2-signal); box-shadow: 0 0 0 3px var(--pd2-ring); outline: none; }

/* Knöpfe */
body.pd2-cards :is(.btn-primary, .btn-cancel, .btn-secondary, .btn-success, .btn-danger) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding-block: 0; border-radius: 14px; font-size: 13px; font-weight: 650; line-height: 1.2;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s, filter .15s;
}
body.pd2-cards :is(.btn-primary:not(:disabled), .pr-btn.pri, #btn-add-poll, .ch-btn-new, .dk-btn-new, .gb-btn-primary, .pd-primary) {
  background: linear-gradient(135deg, var(--pd2-btn-a), var(--pd2-btn-b)); color: var(--color-primary-text, #fff); border-color: transparent; box-shadow: 0 10px 20px -12px var(--pd2-btn-a);
}
body.pd2-cards :is(.pr-btn.pri, #btn-add-poll, .ch-btn-new, .dk-btn-new, .gb-btn-primary, .pd-primary) { border-radius: 14px; min-height: 40px; font-weight: 650; }
body.pd2-cards :is(.btn-primary:hover:not(:disabled), .pr-btn.pri:hover, #btn-add-poll:hover, .ch-btn-new:hover, .dk-btn-new:hover, .gb-btn-primary:hover) { filter: brightness(1.08); transform: translateY(-1px); }
body.pd2-cards :is(.btn-cancel, .btn-secondary, .ch-btn-cancel, .dk-btn-cancel, .gb-btn-cancel) { border: 1px solid var(--pd2-line-2); background: var(--pd2-card); color: var(--pd2-text); border-radius: 14px; }
body.pd2-cards :is(.btn-cancel, .btn-secondary, .ch-btn-cancel, .dk-btn-cancel, .gb-btn-cancel):hover:not(:disabled) { background: var(--pd2-tint); border-color: var(--pd2-signal); }
body.pd2-cards .btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 13px; border-radius: 99px; font-size: 12px; font-weight: 650; opacity: 1; }
body.pd2-cards .btn-sm:hover { opacity: 1; background: var(--pd2-tint); }
/* kleine Werkzeug-Knöpfe: Pillen */
body.pd2-cards :is(.filter-btn-sm, .now-btn, .btn-toggle, .btn-sec, .bw-btn, .pr-btn:not(.pri), .edit-toggle-btn, .pegel-when-btn, .ha-mini-filter-btn, .ri-mini-filter-btn, .fr-insert-btn, .gb-share-btn, .gb-contact-btn, .gb-link-btn, .fb-link-btn, .fm-link-btn, .remark-btn, .pd-btn:not(.pd-primary), .dk-tool-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding-inline: 14px; border-radius: 99px; font-size: 12.5px; font-weight: 650;
  transition: background-color .15s, border-color .15s, color .15s;
}
/* „← Liste“-Knöpfe gibt es nur in der schmalen Ansicht (Liste und Detail wechseln sich ab); die Knopf-Regeln oben dürfen sie am Desktop nicht einblenden */
body.pd2-cards .bw-back.bw-back, body.pd2-cards .ci-back { display: none; } /* doppelte Klasse: schlägt die Spezifität von :is(… .pr-btn:not(.pri) …) */
@media (max-width: 900px) { body.pd2-cards .bw-back.bw-back { display: inline-flex; } }
@media (max-width: 800px) { body.pd2-cards .ci-back { display: inline-flex; } }
body.pd2-cards :is(.filter-btn-sm, .meter-btn):not(.active) { border-color: var(--pd2-line-2); background: var(--pd2-card); }
body.pd2-cards :is(.filter-btn-sm, .meter-btn).active { background: linear-gradient(135deg, var(--pd2-btn-a), var(--pd2-btn-b)); color: var(--color-primary-text, #fff); border-color: transparent; }

/* Symbol-Knöpfe: rund, Linien-Symbol (Text-Symbole wandelt scripts/pd-design-2026.js › Symbole um) */
body.pd2-cards :is(.btn-icon, [class*="icon-btn"]:not(.re-icon-btn):not(.map-icon-btn):not([class*="_nc-"]):not([class*="pd2-"]), .pa-iconbtn, .ev-actions button, .kanban-col-menu-btn, .dp-delete-btn) {
  display: inline-grid; place-items: center; width: 34px; height: 34px; min-width: 34px; padding: 0; border: 1px solid var(--pd2-line-2); border-radius: 50%; background: var(--pd2-card); color: var(--pd2-text);
  font-size: 14px; line-height: 1; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
body.pd2-cards :is(.btn-icon, [class*="icon-btn"]:not(.re-icon-btn):not(.map-icon-btn):not([class*="_nc-"]):not([class*="pd2-"]), .pa-iconbtn, .ev-actions button, .kanban-col-menu-btn, .dp-delete-btn):hover { background: var(--pd2-tint); border-color: var(--pd2-signal); color: var(--pd2-text); }
body.pd2-cards .btn-icon:not(.map-icon-btn) .pd2-i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.pd2-cards :is(.btn-icon.danger, [class*="icon-btn"][class*="danger"]:not([class*="_nc-"])) { color: var(--pd2-t-danger, #b22222); }
body.pd2-cards :is(.btn-icon.danger, [class*="icon-btn"][class*="danger"]:not([class*="_nc-"]), .dp-delete-btn):hover { background: var(--pd2-err-bg, #fef2f2); border-color: var(--pd2-t-danger, #b22222); color: var(--pd2-t-danger, #b22222); }
body.pd2-cards :is(td:last-child .btn-icon, .m-card-actions .btn-icon) { width: 34px; height: 34px; }
body.pd2-cards .ev-actions { gap: 6px; }
body.pd2-cards .ev-actions button:disabled { opacity: .45; }
body.pd2-cards .map-icon-btn { border-radius: 50%; border: 1px solid var(--pd2-line-2); box-shadow: 0 8px 20px -12px rgba(13,33,55,.5); }

/* Tabellen (DT): heller Kopf mit Kapitälchen-Optik, Zeilen mit feiner Linie */
html body.pd2-cards :is(table:not([class]), .ae-table, .pr-table, .da-table, .fm-table) thead tr { background: var(--pd2-tint); color: var(--pd2-muted); }
html body.pd2-cards :is(table:not([class]), .ae-table, .pr-table, .da-table, .fm-table) thead th {
  padding: 13px 12px; border-bottom: 1px solid var(--pd2-line); background: transparent; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pd2-muted);
}
html body.pd2-cards :is(table:not([class]), .ae-table, .pr-table, .da-table, .fm-table) :is(thead th:first-child, tbody td:first-child) { padding-left: 20px; }
html body.pd2-cards :is(table:not([class]), .ae-table, .pr-table, .da-table, .fm-table) :is(thead th:last-child, tbody td:last-child) { padding-right: 20px; }
body.pd2-cards :is(table:not([class]), .ae-table, .pr-table, .da-table, .fm-table) tbody tr { border-bottom: 1px solid var(--pd2-line); transition: background-color .12s; }
body.pd2-cards :is(table:not([class]), .ae-table, .pr-table, .da-table, .fm-table) tbody tr:last-child { border-bottom: 0; }
body.pd2-cards :is(table:not([class]), .ae-table, .pr-table, .da-table, .fm-table) tbody tr:hover { background: var(--pd2-tint); filter: none; }
body.pd2-cards :is(table:not([class]), .ae-table, .pr-table, .da-table, .fm-table) tbody td { padding: 13px 12px; vertical-align: middle; }
body.pd2-cards :is(table:not([class]), .ae-table, .pr-table, .da-table, .fm-table) td:last-child { white-space: nowrap; }
body.pd2-cards :is(table:not([class]), .ae-table, .pr-table, .da-table, .fm-table) td:last-child .btn-icon + .btn-icon { margin-left: 2px; }
body.pd2-cards th.sortable:hover { background: color-mix(in srgb, var(--pd2-brand) 8%, transparent); color: var(--pd2-text); }
body.pd2-cards .no-data { padding: 44px 20px; font-style: normal; }

/* Badges: Pillen; Status-Badges mit Punkt */
body.pd2-cards :is(.badge, .status-badge, .role-badge, .member-badge, .invite-badge, .iam-badge, .admin-badge, .vs-badge, .import-status-badge, .kc-prio, .oversize-warn) {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.45; white-space: nowrap;
}
body.pd2-cards :is(.status-badge, .vs-badge, .badge-active, .badge-past, .badge-future, .badge-gast-active)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
body.pd2-cards .access-badge { width: 24px; height: 24px; font-size: 12px; }
body.pd2-cards .mobile-cards { padding: 12px; }
body.pd2-cards .m-card { border-radius: 18px; border-color: var(--pd2-line); background: var(--pd2-card); box-shadow: var(--pd2-shadow); }
body.pd2-cards .family-member td { background: color-mix(in srgb, var(--pd2-tint) 55%, transparent); }
@media (max-width: 700px) {
  body.pd2-cards .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.pd2-cards .stat-card { padding: 14px 16px 13px; }
  body.pd2-cards .stat-card .val { font-size: 26px; }
  body.pd2-cards .tcard-head { padding: 16px; }
  body.pd2-cards .tcard-head .entry-count { align-self: flex-start; }
  body.pd2-cards .tcard-head .filter-row { width: 100%; margin-left: 0 !important; flex-direction: row; flex-wrap: wrap; }
  body.pd2-cards .tcard-head .filter-row .search-wrap { flex: 1 1 100%; }
  body.pd2-cards .tcard-head .filter-row .search-wrap input { width: 100% !important; }
  body.pd2-cards .tcard-head .filter-row select { flex: 1 1 60%; width: auto; min-width: 0; }
  body.pd2-cards .tcard-head .filter-row :is(.btn-primary, .btn-cancel) { flex: 1 1 28% !important; padding-inline: 10px !important; }
  body.pd2-cards :is(.tabs, .ae-tabs, .pr-tabs, .bw-tabs) { display: flex; }
  body.pd2-cards :is(.tab-btn, .ae-tab, .pr-tab, .bw-tabs button) { flex: 1; padding-inline: 10px; }
}

/* Gantt (Planungsassistent): heller Kopf, heutiger Tag in Markenfarbe */
body.pd2-cards .gantt-table :is(.g-label-head, .g-day-head) { background: var(--pd2-tint); color: var(--pd2-text); border-color: var(--pd2-line); }
body.pd2-cards .gantt-table .g-day-head .day-name { opacity: .8; }
body.pd2-cards .gantt-table .g-day-head { border-left: 1px solid var(--pd2-line); }
body.pd2-cards .gantt-table .g-day-head.today { background: linear-gradient(135deg, var(--pd2-btn-a), var(--pd2-btn-b)); color: var(--color-primary-text, #fff); }
body.pd2-cards .gantt-table .g-label { background: var(--pd2-card); border-right-color: var(--pd2-line); }
/* Aufgaben: Priorität-Badges tragen frei gewählte Farben; Kontrast nachziehen */
body.pd2-cards .kc-prio { filter: brightness(.82); }
html[data-theme="dark"] body.pd2-cards .kc-prio { filter: brightness(1.55) saturate(1.1); }

/* Stegplan-Karte im Dunkelmodus: der Plan ist mit dunklen Strichen für helle Flächen gezeichnet (Stege, Beschriftungen, Standardfarbe #374151).
   Ohne Hintergrundkarte (Knopf „Karte“ aus): hellerer Grund und aufgehellte Standardfarben, selbst gewählte Farben bleiben unverändert.
   Mit Hintergrundkarte bleiben die Striche dunkel, denn das Bild (Luftbild, Lageplan) ist hell und deckt den Grund ab. */
html[data-theme="dark"] body.pd2-cards :is(#plan-container, #plan-area, #plan-area.plan-fs) { background: #1c3149 !important; }
html[data-theme="dark"] body.pd2-cards svg.hide-bg #plan-world [stroke="#374151"] { stroke: #9db0c6; }
html[data-theme="dark"] body.pd2-cards svg.hide-bg #plan-world [fill="#374151"] { fill: #9db0c6; }
html[data-theme="dark"] body.pd2-cards svg.hide-bg #plan-world [fill="#1a2a3a"] { fill: #e4edf7; }
html[data-theme="dark"] body.pd2-cards svg.hide-bg #plan-world [fill="rgba(55,65,81,.25)"] { fill: rgba(157,176,198,.18); }
html[data-theme="dark"] body.pd2-cards svg.hide-bg #plan-world text[stroke="white"] { stroke: #0e1c2c; }

/* Stegplan-Karte im Vollbild: Eine Karte mit Weichzeichner (backdrop-filter) wird zum Bezugsrahmen für „position: fixed“ und schneidet
   (overflow: hidden) ab – das Vollbild blieb darin klein stecken. Solange das Vollbild offen ist (body.plan-fs-open, gesetzt von
   togglePlanFullscreen), verlieren die umgebenden Karten diese Eigenschaften; die Seite dahinter scrollt nicht mit. */
body.plan-fs-open { overflow: hidden; }
body.plan-fs-open.pd2-cards :is(.card, .main-card, .controls, .result-card) { -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; transform: none; }

/* Steg-Zeichnungen in der Stegliste, im Gäste-Stegplan und im Register-Dialog: Stege und Eckstücke sind dunkelblau (#0d2238)
   und verschwinden auf dunklem Grund – hier hell; die Maß-Pillen (Länge der Fingerstege) bekommen eine helle Kante. */
html[data-theme="dark"] body.pd2-cards :is(.berth-box, .berth-wrap, #sr-svg-container) svg rect[fill="#0d2238"] { fill: #8fa8c4; opacity: 1; }
html[data-theme="dark"] body.pd2-cards :is(.berth-box, .berth-wrap, #sr-svg-container) svg rect[fill="#0d2238"][rx="4"] { fill: #243a50; fill-opacity: 1; stroke: #6f8dab; stroke-width: .8; }

/* ── Dialoge (pdConfirm, pdAlert, pdPrompt; scripts/pd-design-2026.js › Dialoge) ── */
.pd2-dlg { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8,20,34,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pd2-dlg[hidden] { display: none; }
html.pd2-dlg-open body { overflow: hidden; }
.pd2-dlg-card {
  width: min(100%, 420px); padding: 26px 24px 20px; border: 1px solid var(--pd2-line, #d6e0ea); border-radius: 24px; background: var(--pd2-card, #fff); color: var(--pd2-text, #10243a);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.6); text-align: left;
}
.pd2-dlg-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: var(--pd2-tint, #eef3f9); color: var(--pd2-signal, var(--blue, #1a3a5c)); }
.pd2-dlg-ic .pd2-i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pd2-dlg-card[data-tone="gefahr"] .pd2-dlg-ic { background: var(--pd2-err-bg, #fdecea); color: var(--pd2-t-danger, #b22222); }
.pd2-dlg-title { margin: 0 0 6px; font-size: 17px; font-weight: 750; letter-spacing: -.01em; color: var(--pd2-text, #10243a); }
.pd2-dlg-msg { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--pd2-text, #10243a); white-space: pre-line; overflow-wrap: anywhere; }
.pd2-dlg-msg.is-html { white-space: normal; }
.pd2-dlg-msg p { margin: 0 0 8px; }
.pd2-dlg-msg p:last-child { margin-bottom: 0; }
.pd2-dlg-msg ul { margin: 8px 0 0; padding-left: 20px; }
.pd2-dlg-msg .muted { color: var(--pd2-muted, #6a7f95); }
.pd2-dlg-input { width: 100%; box-sizing: border-box; height: 44px; margin: 0 0 18px; padding: 0 14px; border: 1px solid var(--pd2-line-2, #c4d0dc); border-radius: 14px; background: var(--pd2-field, #f6f9fc); color: var(--pd2-text, #10243a); font: inherit; font-size: 14px; }
.pd2-dlg-input[hidden] { display: none; }
.pd2-dlg-input:focus { outline: none; border-color: var(--pd2-signal, var(--blue)); box-shadow: 0 0 0 3px var(--pd2-ring, rgba(42,90,140,.25)); }
.pd2-dlg-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.pd2-dlg-actions button { min-height: 42px; padding: 0 20px; border-radius: 14px; font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; transition: filter .15s, background-color .15s, border-color .15s; }
.pd2-dlg-actions button[hidden] { display: none; }
.pd2-dlg-cancel { border: 1px solid var(--pd2-line-2, #c4d0dc); background: var(--pd2-card, #fff); color: var(--pd2-text, #10243a); }
.pd2-dlg-cancel:hover { background: var(--pd2-tint, #eef3f9); border-color: var(--pd2-signal, var(--blue)); }
.pd2-dlg-ok { border: 0; background: linear-gradient(135deg, var(--pd2-btn-a, var(--blue, #1a3a5c)), var(--pd2-btn-b, var(--blue, #2a5a8c))); color: var(--color-primary-text, #fff); box-shadow: 0 10px 20px -12px var(--pd2-btn-a, var(--blue)); }
.pd2-dlg-card[data-tone="gefahr"] .pd2-dlg-ok { background: var(--pd2-t-danger, #b22222); color: #fff; box-shadow: 0 10px 20px -12px var(--pd2-t-danger, #b22222); }
.pd2-dlg-ok:hover { filter: brightness(1.08); }
html[data-theme="dark"] .pd2-dlg-card[data-tone="gefahr"] .pd2-dlg-ok { color: #1a0b0b; }
@media (max-width: 480px) { .pd2-dlg-actions button { flex: 1 1 100%; } .pd2-dlg-actions { flex-direction: column-reverse; } }