/* --- BEGIN frontend.css -------------------------------- */

/* ===== Global Anchor-Scroll-Optimierung ===== */
html, body {
  scroll-behavior: smooth; /* sanftes Scrollen global aktivieren */
}

/* Standard-Puffer für Sprungmarken, damit sticky Header nichts überdeckt */
[id] {
  scroll-margin-top: 80px;
}

/* Für kleinere Bildschirme etwas kompakter */
@media (max-width: 768px) {
  [id] {
    scroll-margin-top: 64px;
  }
}

/* =========================================================
   Global Scrollbars (Frontend only) – Dark, glatt, rund
   ========================================================= */

/* Firefox (gilt auch vererbt für Kindelemente) */
body:not(.wp-admin),
body:not(.wp-admin) * {
  scrollbar-width: thin;                 /* thin | auto | none */
  scrollbar-color: #4a5260 #0f1115;      /* thumb | track */
}

/* WebKit / Blink (Chrome, Edge, Safari) */
body:not(.wp-admin)::-webkit-scrollbar,
body:not(.wp-admin) *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body:not(.wp-admin)::-webkit-scrollbar-track,
body:not(.wp-admin) *::-webkit-scrollbar-track {
  background: #212121;                   /* Track dunkel */
  border-radius: 12px;
}

body:not(.wp-admin)::-webkit-scrollbar-thumb,
body:not(.wp-admin) *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4a5260, #3b424d); /* dezenter Verlauf */
  border-radius: 12px;
  border: 2px solid #212121;             /* „Spacing” zum Track */
}

body:not(.wp-admin)::-webkit-scrollbar-thumb:hover,
body:not(.wp-admin) *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #5b6474, #4a5260);
}

body:not(.wp-admin)::-webkit-scrollbar-thumb:active,
body:not(.wp-admin) *::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #6a7588, #586070);
}

body:not(.wp-admin)::-webkit-scrollbar-corner,
body:not(.wp-admin) *::-webkit-scrollbar-corner {
  background: #212121;
}

/* Scrollbar-Buttons (meist nicht sichtbar) ausblenden */
body:not(.wp-admin)::-webkit-scrollbar-button,
body:not(.wp-admin) *::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

/* ---------------------------------------------------------
   Feinjustierung für dichte Bereiche (schmalere Leiste)
   --------------------------------------------------------- */
.dhsp-console__tree,
.CodeMirror-scroll,
pre,
textarea {
  scrollbar-width: thin;
}

@media (hover:hover) {
  .dhsp-console__tree::-webkit-scrollbar,
  .CodeMirror-scroll::-webkit-scrollbar,
  pre::-webkit-scrollbar,
  textarea::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
}


/* ====== Global Reset within dashboard scope ====== */
.dhsp-dashboard, .dhsp-dashboard * { box-sizing: border-box; }
.dhsp-dashboard{
  color: var(--dhsp-fg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--dhsp-bg) 96%, transparent), var(--dhsp-bg));
  font-family: var(--dhsp-font-family);
  font-size: var(--dhsp-font-size);
  line-height: var(--dhsp-line-height);
  
}
.dhsp-dashboard :where(h1,h2,h3,h4,h5,h6){ color: var(--dhsp-heading-fg); }

/* ====== Motion / Accessibility ====== */
@media (prefers-reduced-motion: reduce){
  .dhsp-dashboard *{
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}
.dhsp-dashboard :where(input,select,textarea,button,a.dhsp-btn):focus-visible{
  outline: 2px solid color-mix(in srgb, var(--dhsp-primary) 55%, var(--dhsp-border));
  outline-offset: 2px;
}

/* ====== Topbar / Header ====== */
.dhsp-dash-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom: clamp(18px, 4vw, 28px);
}
.dhsp-dash-head h1{
  font-size: clamp(22px, 3.6vw, var(--dhsp-h2));
  letter-spacing:.2px; margin:0; display:flex; align-items:center; gap:12px;
}
.dhsp-dash-brand{ display:flex; align-items:center; gap:10px; }
.dhsp-dash-logo{
  width:36px; height:36px; border-radius:10px; object-fit:cover;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* ====== Grid / Cards ====== */
.dhsp-grid{
  display:grid; grid-template-columns:1fr;
  gap: clamp(14px, 2.8vw, 22px);
}
@media (min-width: 720px){ .dhsp-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1140px){ .dhsp-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Sidebar-Layout: links Quicklist, rechts zwei Karten */
.dhsp-layout{
  display:grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: clamp(12px, 2.4vw, 20px);
  align-items: start;
  margin-bottom: clamp(14px, 2.8vw, 22px);
}
.dhsp-aside{ position: static; }
@media (min-width: 900px){ .dhsp-aside{ position: sticky; top: 0; } }
@media (max-width: 900px){ .dhsp-layout{ grid-template-columns: 1fr; } }

.dhsp-stack{ display: grid; gap: clamp(14px, 2.8vw, 22px); }
.dhsp-grid--top2{ grid-template-columns: 1fr; display:grid; gap: clamp(14px, 2.8vw, 22px); }
@media (min-width: 900px){
  .dhsp-grid--top2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ===== Equal Height: Sidebar + 2 Top-Cards ===== */
@media (min-width: 900px){
  .dhsp-layout{ align-items: stretch; }
  .dhsp-stack{ height: 100%; }
  .dhsp-grid--top2{ height: 100%; grid-auto-rows: 1fr; align-items: stretch; }
  .dhsp-grid--top2 > .dhsp-card{ height: 100%; }
  .dhsp-aside.dhsp-card{ height: 100%; }
}
@media (max-width: 899.98px){
  .dhsp-grid--top2{ height:auto; grid-auto-rows: initial; }
  .dhsp-grid--top2 > .dhsp-card,
  .dhsp-aside.dhsp-card,
  .dhsp-stack{ height:auto; }
}

/* === Card-BG lokal injizieren (ohne globale --dhsp-bg zu überschreiben) ===
   Reihenfolge: explizites dhsp_card_bg → card-bg (Tokens) → dhsp-bg (global) */
.dhsp-card,
.dhsp-showcard,
.dhsp-showcase .dhsp-card {
  --card-bg-local: var(--dhsp-card-bg, var(--card-bg, var(--dhsp-bg)));
}

/* === Baseline: überall gleich, ohne color-mix() === */
.dhsp-card{
  position:relative;
  display:flex; flex-direction:column;
  border-radius: var(--dhsp-radius);
  border: var(--dhsp-border-w) solid color-mix(in srgb, var(--dhsp-border) 80%, transparent);
  background-color: var(--card-bg-local);          /* zuverlässiger Fallback */
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: clamp(14px, 2.8vw, 22px);
  overflow: hidden;
  transition: transform var(--dhsp-transition), box-shadow var(--dhsp-transition), border-color var(--dhsp-transition);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
}

/* Progressive Enhancement: Gradient mit color-mix(), nur wenn unterstützt */
@supports (color: color-mix(in srgb, black 50%, white)) {
  .dhsp-card{
    background:
      linear-gradient(160deg,
        color-mix(in srgb, var(--card-bg-local) 86%, transparent),
        color-mix(in srgb, var(--card-bg-local) 92%, transparent) 40%,
        color-mix(in srgb, var(--dhsp-primary) 6%, var(--card-bg-local)) 100%);
  }
}

.dhsp-card::after{
  content:""; position:absolute; inset:auto 8px 8px auto; width:100px; height:100px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--dhsp-primary) 22%, transparent), transparent 70%);
  filter: blur(20px); pointer-events:none; opacity:.3; transform: translateZ(0);
}

.dhsp-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 42px rgba(0,0,0,.12);
  border-color: color-mix(in srgb, var(--dhsp-primary) 32%, var(--dhsp-border));
}

/* Typo/Farben in der Card an lokales BG koppeln (kontraststabil) */
.dhsp-card h3{ font-size: clamp(18px, 2.6vw, var(--dhsp-h4)); margin:0 0 10px; }

/* Fallback ohne color-mix */
.dhsp-muted{ color: #6b7280; opacity:.9; }

/* Enhancement mit color-mix auf lokales BG */
@supports (color: color-mix(in srgb, black 50%, white)) {
  .dhsp-muted{
    color: color-mix(in srgb, var(--dhsp-fg) 62%, var(--card-bg-local));
    opacity: 1;
  }
}


/* ====== Lists ====== */
.dhsp-card ul{ list-style:none; padding:0; margin:8px 0 0; }
.dhsp-card li{
  display:flex; align-items:center; gap:10px;
  padding:8px 0; border-top: 1px dashed color-mix(in srgb, var(--dhsp-border) 70%, transparent);
}
.dhsp-card li:first-child{ border-top: 0; }

/* ====== Forms ====== */
.dhsp-card form .widefat,
.dhsp-card input[type="text"],
.dhsp-card input[type="email"],
.dhsp-card input[type="url"],
.dhsp-card input[type="date"],
.dhsp-card select,
.dhsp-card textarea{
  width:100%; padding:12px 14px;
  border-radius: calc(var(--dhsp-radius) - 6px);
  border: 1px solid color-mix(in srgb, var(--dhsp-border) 80%, transparent);
  background: color-mix(in srgb, var(--dhsp-bg) 95%, transparent);
  color: var(--dhsp-fg);
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
  transition: border-color var(--dhsp-transition), box-shadow var(--dhsp-transition), background var(--dhsp-transition);
}
.dhsp-card textarea{ min-height: 120px; resize: vertical; }
.dhsp-card :where(input,select,textarea):focus{
  outline:none;
  border-color: color-mix(in srgb, var(--dhsp-primary) 55%, var(--dhsp-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dhsp-primary) 18%, transparent);
  background: color-mix(in srgb, var(--dhsp-bg) 100%, transparent);
}
.dhsp-card select{
  appearance:none;
  background-image:
    linear-gradient(45deg, color-mix(in srgb, var(--dhsp-muted) 60%, var(--dhsp-bg)) 50%, transparent 50%),
    linear-gradient(-45deg, color-mix(in srgb, var(--dhsp-muted) 60%, var(--dhsp-bg)) 50%, transparent 50%);
  background-position: calc(100% - 14px) 49%, calc(100% - 8px) 49%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

/* ====== Buttons ====== */
.dhsp-btn{
  --_bg: var(--dhsp-btn-bg);
  --_fg: var(--dhsp-btn-fg);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: var(--dhsp-btn-py) var(--dhsp-btn-px);
  border-radius: var(--dhsp-btn-radius);
  border: 1px solid transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--_bg) 94%, white), var(--_bg));
  color: var(--_fg);
  text-decoration:none; font-weight:600; letter-spacing:.2px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--_bg) 28%, transparent);
  transition: transform var(--dhsp-transition), box-shadow var(--dhsp-transition), filter var(--dhsp-transition), background var(--dhsp-transition);
  cursor:pointer;
}
.dhsp-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px color-mix(in srgb, var(--_bg) 34%, transparent); }
.dhsp-btn:active{ transform: translateY(0); filter: saturate(96%); }
.dhsp-btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--_bg) 55%, transparent);
  outline-offset: 2px;
}
.dhsp-btn[disabled], .dhsp-btn.is-disabled{ opacity:.55; pointer-events:none; }

/* Variants */
.dhsp-btn--secondary{ --_bg: var(--dhsp-btn2-bg, var(--dhsp-accent)); --_fg: var(--dhsp-btn2-fg, #fff); }
.dhsp-btn--outline{
  --_bg: transparent; --_fg: var(--dhsp-btn-outline-fg, var(--dhsp-primary));
  background: transparent; color: var(--_fg);
  border: 1px solid var(--dhsp-btn-outline-bor, var(--dhsp-primary));
  box-shadow: none;
}
.dhsp-btn--outline:hover{ background: color-mix(in srgb, var(--dhsp-btn-outline-bor, var(--dhsp-primary)) 10%, transparent); }
.dhsp-btn--ghost{
  --_fg: var(--dhsp-btn-ghost-fg, var(--dhsp-primary));
  background: transparent; color: var(--_fg);
  border: 1px solid transparent; box-shadow: none;
}
.dhsp-btn--ghost:hover{ background: color-mix(in srgb, var(--_fg) 10%, transparent); }

/* ====== Utilities & Typography ====== */
.dhsp-row{ display:flex; flex-wrap:wrap; gap:10px; }
.dhsp-spacer{ height: clamp(8px, 2vw, 14px); }
.dhsp-dashboard h2{ font-size: var(--dhsp-h3); margin: 0 0 8px; }
.dhsp-dashboard h3{ margin: 0 0 8px; }
.dhsp-dashboard p{ margin: 8px 0; }

/* ====== Dark mode ====== */
@media (prefers-color-scheme: dark){
  .dhsp-dashboard{
    background: linear-gradient(180deg, color-mix(in srgb, var(--dhsp-bg) 92%, transparent), var(--dhsp-bg));
  }
  .dhsp-card{
    border-color: color-mix(in srgb, var(--dhsp-border) 60%, transparent);
    box-shadow: 0 10px 30px rgba(0,0,0,.30);
  }
  .dhsp-live__frame{
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dhsp-border) 40%, transparent);
  }
}

/* ====== Mobile tweaks ====== */
@media (max-width: 480px){
  .dhsp-dash-head{ flex-direction: column; align-items:flex-start; gap:10px; }
  .dhsp-btn{ width:100%; }
  .dhsp-layout{ grid-template-columns: 1fr; }
}

/* ====== View Toggle ====== */
.dhsp-view-toggle{
  display:flex; gap:6px;
  background: color-mix(in srgb, var(--dhsp-bg) 90%, transparent);
  padding:4px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--dhsp-border) 70%, transparent);
}
.dhsp-view-toggle button{
  appearance:none; border:0; background:transparent;
  padding:8px 12px; border-radius:999px; cursor:pointer;
  font-weight:600; color: var(--dhsp-muted);
  transition: background var(--dhsp-transition), color var(--dhsp-transition), transform var(--dhsp-transition);
}
.dhsp-view-toggle button.is-active{
  background: color-mix(in srgb, var(--dhsp-primary) 14%, transparent);
  color: color-mix(in srgb, var(--dhsp-primary) 90%, black);
}
.dhsp-projects-view.is-hidden{ display:none; }

/* ====== Table ====== */
.dhsp-table-wrap{
  width:100%; overflow:auto; border-radius: calc(var(--dhsp-radius) - 6px);
  border: 1px solid color-mix(in srgb, var(--dhsp-border) 70%, transparent);
  background: color-mix(in srgb, var(--dhsp-bg) 98%, transparent);
}
/* Astra überschreiben: Rahmen/Flächen killen – nur Projekt-Tabelle */
.entry-content .dhsp-table-wrap--projects,
.entry-content .dhsp-table-wrap--projects .dhsp-table { border: none !important; }
.entry-content .dhsp-table-wrap--projects .dhsp-table thead th,
.entry-content .dhsp-table-wrap--projects .dhsp-table tbody td,
.entry-content .dhsp-table-wrap--projects .dhsp-table tbody th { border: none !important; }
.entry-content .dhsp-table-wrap--projects .dhsp-table tbody tr,
.entry-content .dhsp-table-wrap--projects .dhsp-table thead tr { border: none !important; }
.entry-content .dhsp-table-wrap--projects .dhsp-table,
.entry-content .dhsp-table-wrap--projects .dhsp-table * { border: 0 !important; }

.dhsp-table{ width:100%; border-collapse:collapse; min-width:780px; }
.dhsp-table th, .dhsp-table td{
  text-align:left; padding:12px 14px; white-space:nowrap;
  border-bottom: 1px dashed color-mix(in srgb, var(--dhsp-border) 60%, transparent);
}
.dhsp-table thead th{
  position:sticky; top:0; z-index:1;
  background: color-mix(in srgb, var(--dhsp-bg) 98%, transparent);
  color: var(--dhsp-muted); font-size:.92em; letter-spacing:.3px;
}
.dhsp-table tbody tr:nth-child(even){
  background: color-mix(in srgb, var(--dhsp-bg) 98%, transparent);
}
.dhsp-table tbody tr:hover{
  background: color-mix(in srgb, var(--dhsp-primary) 8%, transparent);
}
.dhsp-table td.is-wide{ white-space: normal; }

/* Badges (Projektstatus) */
.dhsp-badge{
  display:inline-block; padding:4px 8px; border-radius:999px; font-size:.85em; font-weight:700;
  border:1px solid transparent; background: color-mix(in srgb, var(--dhsp-border) 50%, transparent);
}
.dhsp-badge--planning  { background: color-mix(in srgb, #64748b 18%, transparent); color:#0b1a2b; }
.dhsp-badge--inprogress{ background: color-mix(in srgb, var(--dhsp-primary) 22%, transparent); color:#072538; }
.dhsp-badge--review    { background: color-mix(in srgb, #f59e0b 22%, transparent); color:#3a2500; }
.dhsp-badge--done      { background: color-mix(in srgb, var(--dhsp-accent) 25%, transparent); color:#062b1a; }
.dhsp-badge--onhold    { background: color-mix(in srgb, #ef4444 22%, transparent); color:#3b0a0a; }

/* ===== Utilities: Spacing ===== */
.dhsp-m-0    { margin:0 !important; }
.dhsp-mt-0   { margin-top:0 !important; }
.dhsp-mt-6   { margin-top:6px !important; }
.dhsp-mt-10  { margin-top:10px !important; }
.dhsp-mb-6   { margin-bottom:6px !important; }
.dhsp-mb-lg  { margin-bottom: clamp(14px, 2.8vw, 22px) !important; }

/* ===== Utilities: Rows ===== */
.dhsp-row--between            { display:flex; justify-content:space-between; align-items:center; }
.dhsp-row--between-baseline   { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.dhsp-row--wrap-8             { display:flex; gap:8px; flex-wrap:wrap; }

/* ===== HR Varianten ===== */
.dhsp-hr-sep    { border:0; border-top:1px dashed var(--dhsp-border); margin:12px 0; }
.dhsp-hr-sep-sm { border:0; border-top:1px dashed var(--dhsp-border); margin:10px 0; }

/* ===== Karten-Varianten ===== */
.dhsp-card--flash { border-style: solid; } /* Farbe/Breite kommen aus Tokens */


/* ====== Drawer ====== */
.dhsp-drawer{
  position:fixed; inset:0; z-index:1000;
  display:grid; grid-template-columns:1fr auto;
  pointer-events:none; opacity:0;
  transition: opacity var(--dhsp-transition), backdrop-filter var(--dhsp-transition);
}
.dhsp-drawer.is-open{ opacity:1; pointer-events:auto; }
.dhsp-drawer__backdrop{
  backdrop-filter: blur(3px) saturate(120%);
}
.dhsp-drawer__panel{
  width:min(560px, 92vw);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--dhsp-bg) 96%, transparent),
    color-mix(in srgb, var(--dhsp-bg) 92%, transparent) 40%,
    color-mix(in srgb, var(--dhsp-primary) 4%, var(--dhsp-bg)) 100%);
  border-left: 1px solid color-mix(in srgb, var(--dhsp-border) 70%, transparent);
  box-shadow: -16px 0 48px rgba(0,0,0,.18);
  padding: clamp(14px, 3vw, 24px);
  transform: translateX(100%);
  transition: transform var(--dhsp-transition);
}
.dhsp-drawer.is-open .dhsp-drawer__panel{ transform: translateX(0); }
.dhsp-drawer__close{ position:absolute; top:10px; right:10px; }
.dhsp-dw-meta{ list-style:none; padding:0; margin:12px 0 0; }
.dhsp-dw-meta li{ padding:8px 0; border-top:1px dashed color-mix(in srgb, var(--dhsp-border) 60%, transparent); }

/* Tabelle: weniger Spalten auf schmalen Screens */
@media (max-width: 720px){
  .dhsp-table th:nth-child(4),
  .dhsp-table td:nth-child(4),
  .dhsp-table th:nth-child(5),
  .dhsp-table td:nth-child(5){ display:none; }
}

/* ====== Schnellzugriffe (Spacing & Vollbreite) ====== */
.dhsp-quicklist{
  display: grid;
  gap: 12px;
  margin-top: 8px;
}
.dhsp-quicklist .dhsp-btn{
  width: 100%;
  justify-content: center;
  text-align: center;
}
/* Trennlinie in der Sidebar */
.dhsp-aside hr{
  border: 0;
  border-top: 1px dashed color-mix(in srgb, var(--dhsp-border) 70%, transparent);
  margin: 14px 0;
}
/* Formblöcke unter der Liste */
.dhsp-aside form{
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.dhsp-aside form .dhsp-btn{
  width: 100%;
  justify-content: center;
}
@media (max-width: 420px){
  .dhsp-quicklist,
  .dhsp-aside form{ gap: 10px; }
}

/* ====== Projekte Block ====== */
.dhsp-card--full{ grid-column: 1 / -1; }
.dhsp-grid--projects{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dhsp-table-wrap--projects{ max-height: 440px; overflow:auto; }

/* ====== Kundenansicht ====== */
.dhsp-proj-desc{ margin: 8px 0 6px; }
.dhsp-proj-meta{
  list-style:none; padding:0; margin:6px 0 16px;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:8px 16px;
}
.dhsp-proj-meta li strong{ margin-right:6px; }

/* ====== Live-Vorschau ====== */
.dhsp-live{ margin-top:10px; }
.dhsp-live__head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.dhsp-live__wrap{
  position:relative; border:1px solid color-mix(in srgb, var(--dhsp-border) 70%, transparent);
  border-radius: var(--dhsp-radius); overflow:hidden;
  background: color-mix(in srgb, var(--dhsp-bg) 98%, transparent);
}
.dhsp-live__wrap.is-on .dhsp-live__frame{ display:block; }
.dhsp-live__frame{
  display:block; width:100%; aspect-ratio: 16 / 10; border:0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dhsp-border) 60%, transparent);
}
.dhsp-live__fallback{ padding:14px; background: color-mix(in srgb, var(--dhsp-bg) 96%, transparent); }
@media (max-width: 720px){ .dhsp-live__frame{ aspect-ratio: 16 / 12; } }

/* ====== Login ====== */
.dhsp-loginwrap{ max-width:400px; margin:10px 0 0; }
#dhsp-loginform{ display:grid; gap: calc(var(--dhsp-space) * 3); }
#dhsp-loginform p{ margin:0 0 6px; }
#dhsp-loginform label{ display:block; font-size: 1rem; color: var(--dhsp-muted); margin-bottom:6px; }
#dhsp-loginform input[type="text"],
#dhsp-loginform input[type="email"],
#dhsp-loginform input[type="password"]{
  width:100%; border: var(--dhsp-border-w) solid var(--dhsp-border);
  border-radius: var(--dhsp-radius);
  padding:12px 14px; background: var(--dhsp-bg); color: var(--dhsp-fg);
  transition: border-color var(--dhsp-transition), box-shadow var(--dhsp-transition);
}
#dhsp-loginform :where(input[type="text"], input[type="email"], input[type="password"]):focus{
  outline:none;
  border-color: color-mix(in srgb, var(--dhsp-primary) 60%, var(--dhsp-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dhsp-primary) 24%, transparent);
}
.dhsp-card h1 {
  font-size: 2.5rem; }
#dhsp-loginform .forgetmenot, #dhsp-loginform .submit{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#dhsp-loginform #rememberme{ width:16px; height:16px; accent-color: var(--dhsp-primary); margin-right:6px; }
#dhsp-loginform .forgetmenot label{ display:inline-flex; align-items:center; margin:0; cursor:pointer; color: var(--dhsp-fg); }
#dhsp-loginform #wp-submit{
  cursor:pointer; border: var(--dhsp-border-w) solid transparent;
  border-radius: var(--dhsp-btn-radius);
  padding: var(--dhsp-btn-py) var(--dhsp-btn-px);
  background: var(--dhsp-btn-bg); color: var(--dhsp-btn-fg);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--dhsp-primary) 18%, transparent);
}
#dhsp-loginform #wp-submit:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px color-mix(in srgb, var(--dhsp-primary) 26%, transparent); }
#dhsp-loginform #wp-submit:active{ transform: translateY(0); }
.dhsp-dashboard .dhsp-card .dhsp-loginwrap + .dhsp-muted{ margin-top:10px; }
@media (max-width: 480px){ .dhsp-loginwrap{ max-width:100%; } }
@media (prefers-color-scheme: dark){
  #dhsp-loginform input[type="text"],
  #dhsp-loginform input[type="email"],
  #dhsp-loginform input[type="password"]{
    background: color-mix(in srgb, var(--dhsp-bg) 96%, transparent);
  }
}

/* ====== Kundenliste Styles ====== */
.dhsp-customerlist{
  max-height: 260px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--dhsp-border) 70%, transparent);
  border-radius: calc(var(--dhsp-radius) - 6px);
  background: color-mix(in srgb, var(--dhsp-bg) 98%, transparent);
  padding: 6px;
}
.dhsp-customerlist__item{
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 0; background: transparent;
  cursor: pointer; border-radius: 10px; color: var(--dhsp-fg); text-align: left;
}
.dhsp-customerlist__item:hover{ background: color-mix(in srgb, var(--dhsp-primary) 10%, transparent); }
.dhsp-customerlist__item:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--dhsp-primary) 45%, var(--dhsp-border));
  outline-offset: 2px;
}
.dhsp-customerlist__item.is-active{ background: color-mix(in srgb, var(--dhsp-primary) 16%, transparent); }
.dhsp-customerlist__dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--dhsp-primary); opacity: .85; flex: 0 0 8px;
}
.dhsp-customerlist__name{ font-weight: 600; letter-spacing: .2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dhsp-customerlist__empty{ padding: 10px 12px; color: var(--dhsp-muted); font-style: italic; }
/* dezentere Scrollbar */
.dhsp-customerlist::-webkit-scrollbar{ width: 8px; height: 8px; }
.dhsp-customerlist::-webkit-scrollbar-track{
  background: color-mix(in srgb, var(--dhsp-bg) 96%, transparent); border-radius: 10px;
}
.dhsp-customerlist::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--dhsp-muted) 30%, transparent); border-radius: 10px;
}

/* ===== Showcase (fertige Projekte) ===== */
/* Grid */
.dhsp-showgrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px,2.8vw,22px);
}

/* Karte – „blue glass“ + Hover-Border */
.dhsp-showcard{
  position:relative;
  display:flex; flex-direction:column; overflow:hidden;
  border-radius: var(--dhsp-radius);
  border: var(--dhsp-border-w) solid color-mix(in srgb, var(--dhsp-border) 80%, transparent);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--dhsp-bg) 86%, transparent),
    color-mix(in srgb, var(--dhsp-bg) 92%, transparent) 40%,
    color-mix(in srgb, var(--dhsp-primary) 6%, var(--dhsp-bg)) 100%);
  box-shadow: var(--dhsp-shadow-md);
  transition: transform var(--dhsp-transition), box-shadow var(--dhsp-transition), border-color var(--dhsp-transition);
  backdrop-filter: saturate(120%) blur(6px);
}
.dhsp-showcard::after{
  content:"";
  position:absolute;
  inset:auto 8px 8px auto;
  width:100px; height:100px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--dhsp-primary) 22%, transparent), transparent 70%);
  filter: blur(20px);
  pointer-events:none;
  opacity:.3;
  transform: translateZ(0);
}
.dhsp-showcard:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 42px rgba(0,0,0,.12);
  border-color: color-mix(in srgb, var(--dhsp-primary) 32%, var(--dhsp-border));
}
/* Falls Showcase Cards als .dhsp-card gerendert werden */
.dhsp-showcase .dhsp-card{
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--dhsp-bg) 86%, transparent),
    color-mix(in srgb, var(--dhsp-bg) 92%, transparent) 40%,
    color-mix(in srgb, var(--dhsp-primary) 6%, var(--dhsp-bg)) 100%);
  border-color: color-mix(in srgb, var(--dhsp-border) 80%, transparent);
  backdrop-filter: saturate(120%) blur(6px);
}
.dhsp-showcase .dhsp-card::after{
  content:""; position:absolute; inset:auto 8px 8px auto; width:100px; height:100px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--dhsp-primary) 22%, transparent), transparent 70%);
  filter: blur(20px); pointer-events:none; opacity:.3;
}
.dhsp-showcase .dhsp-card:hover{
  border-color: color-mix(in srgb, var(--dhsp-primary) 32%, var(--dhsp-border));
}

/* Media + Body */
.dhsp-showcard__media{
  display:block; position:relative; overflow:hidden;
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--dhsp-bg) 92%, transparent);
}
.dhsp-showcard__media img{ width:100%; height:100%; object-fit: cover; display:block; }
.dhsp-showcard__body{
  padding: clamp(12px, 2vw, 16px);
  display:flex; flex-direction:column; gap:10px;
}
.dhsp-showcard__title{ margin:0; font-size: clamp(18px, 2.2vw, var(--dhsp-h5)); }
.dhsp-showcard__features{
  list-style: none; padding: 0; margin: 4px 0 0;
  display: grid; gap: 6px;
}
.dhsp-showcard__features li{
  position: relative; padding-left: 18px;
}
.dhsp-showcard__features li::before{
  content: ""; position:absolute; left:0; top: .55em;
  width:8px; height:8px; border-radius:999px;
  background: color-mix(in srgb, var(--dhsp-primary) 70%, transparent);
}

/* ===== Icon-only action buttons (Bearbeiten/Löschen) ===== */
.dhsp-iconbtn{
  --_size: 36px;
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--_size); height:var(--_size);
  padding:0; border-radius:12px; border:1px solid transparent;
  background: var(--dhsp-primary);
  color: #fff;
  cursor:pointer;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--dhsp-primary) 28%, transparent);
  transition: transform var(--dhsp-transition), background var(--dhsp-transition), box-shadow var(--dhsp-transition), color var(--dhsp-transition);
}
.dhsp-iconbtn svg{ display:block; fill: currentColor; color: inherit; }
.dhsp-iconbtn:hover{
  background: color-mix(in srgb, var(--dhsp-primary) 80%, black);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--dhsp-primary) 36%, transparent);
}
.dhsp-iconbtn:active{ transform: translateY(0); background: color-mix(in srgb, var(--dhsp-primary) 70%, black); }
.dhsp-iconbtn .sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap;
}
.dhsp-table td .dhsp-iconbtn { --_size: 32px; border-radius:10px; }

/* ====== Wasserzeichen für Bilder ====== */
.dhsp-masonry__media,
.dhsp-albumcard__media {
  position: relative;
}

.dhsp-masonry__media::after,
.dhsp-albumcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/wp-content/uploads/2025/08/logo.svg') no-repeat center;
  background-size: 120px auto; /* Logo-Größe anpassen */
  opacity: 0.15; /* 15% Sichtbarkeit */
  pointer-events: none; /* Klicks bleiben auf dem Bild */
}


/* --- END frontend.css ---------------------------------- */

/* --- BEGIN chat.css ------------------------------------ */

/* ===== DHSP Chat ===== */
.dhsp-chat{
  display:flex; flex-direction:column; gap:12px;
}

.dhsp-chat__topbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.dhsp-chat__label{ font-weight:600; }
.dhsp-chat__select{
  min-width:220px; padding:8px 10px; border-radius:10px;
  border:1px solid color-mix(in srgb, var(--dhsp-border) 70%, transparent);
  background: color-mix(in srgb, var(--dhsp-bg) 98%, transparent);
}
.dhsp-chat__title{ font-weight:700; }

.dhsp-chat__messages {
  height: 380px; /* feste Höhe */
  overflow-y: auto;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--dhsp-border) 70%, transparent);
  background: color-mix(in srgb, var(--dhsp-bg) 98%, transparent);
}
.dhsp-chat__empty{ opacity:.7; font-style:italic; padding:4px; }

.dhsp-chat__msg{ margin:10px 0; max-width:80%; }
.dhsp-chat__msg.is-admin{ margin-left:auto; text-align:right; }
.dhsp-chat__msg.is-user{ margin-right:auto; text-align:left; }

.dhsp-chat__meta{
  font-size:12px; opacity:.6; margin-bottom:4px;
}
.dhsp-chat__bubble{
  display:inline-block; padding:10px 12px; border-radius:14px;
  background: color-mix(in srgb, var(--dhsp-primary) 8%, var(--dhsp-bg));
  border:1px solid color-mix(in srgb, var(--dhsp-border) 60%, transparent);
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  word-wrap:break-word; white-space:pre-wrap;
}
.dhsp-chat__msg.is-admin .dhsp-chat__bubble{
  background: color-mix(in srgb, var(--dhsp-primary) 18%, var(--dhsp-bg));
}

.dhsp-chat__composer{
  display:flex; gap:8px; align-items:flex-end;
}
.dhsp-chat__input{
  flex:1; resize:vertical; min-height:44px; max-height:160px;
  padding:10px 12px; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--dhsp-border) 70%, transparent);
  background: color-mix(in srgb, var(--dhsp-bg) 98%, transparent);
}
/* Chat-spezifische Buttons: NICHT global überschreiben */
.dhsp-chat .dhsp-btn{
  padding:10px 14px; border-radius:12px; border:1px solid transparent;
  background: var(--dhsp-primary); color:#fff; cursor:pointer;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.dhsp-chat .dhsp-btn:hover{ transform: translateY(-1px); }
.dhsp-chat .dhsp-btn.is-disabled, .dhsp-chat .dhsp-btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }
.dhsp-chat .dhsp-btn--ghost{
  background: transparent; color: var(--dhsp-fg);
  border-color: color-mix(in srgb, var(--dhsp-border) 70%, transparent);
  box-shadow:none;
}

/* Mobile: Eingabefeld über dem Senden-Button */
@media (max-width: 640px){
  .dhsp-chat__composer{ flex-direction: column; align-items: stretch; }
  .dhsp-chat__input{ min-height:56px; }
}

/* Darkmode (optional) */
@media (prefers-color-scheme: dark){
  .dhsp-chat__messages, .dhsp-chat__input, .dhsp-chat__select{
    background: color-mix(in srgb, var(--dhsp-bg) 90%, black);
  }
}

/* ================== DHSP Chat – Tokenized Overrides ================== */
/* Scope-Defaults pro Chat-Instanz (Fallbacks -> global) */
.dhsp-chat{
  --_chat-ui-bg:  var(--dhsp-chat-ui-bg, color-mix(in srgb, var(--dhsp-bg) 98%, transparent));
  --_chat-bor:    var(--dhsp-chat-border, color-mix(in srgb, var(--dhsp-border) 70%, transparent));
  --_chat-in-bg:  var(--dhsp-chat-in-bg,  color-mix(in srgb, var(--dhsp-bg) 98%, transparent));
  --_chat-in-fg:  var(--dhsp-chat-in-fg,  var(--dhsp-fg));
  --_chat-out-bg: var(--dhsp-chat-out-bg, color-mix(in srgb, var(--dhsp-primary) 8%, var(--dhsp-bg)));
  --_chat-out-fg: var(--dhsp-chat-out-fg, var(--dhsp-fg));
  --_chat-meta:   var(--dhsp-chat-meta,   color-mix(in srgb, var(--dhsp-fg) 65%, var(--dhsp-bg)));
  --_chat-radius: var(--dhsp-chat-radius, 12px);
}

/* UI-Flächen */
.dhsp-chat__select,
.dhsp-chat__input,
.dhsp-chat__messages{
  background: var(--_chat-ui-bg) !important;
  border: 1px solid var(--_chat-bor) !important;
  border-radius: var(--_chat-radius) !important;
}

/* Bubbles (User/Admin) */
.dhsp-chat__msg.is-user,
.dhsp-chat__msg.is-user .dhsp-chat__bubble{
  background: var(--_chat-in-bg);
  color: var(--_chat-in-fg);
  border-radius: var(--_chat-radius);
}
.dhsp-chat__msg.is-admin,
.dhsp-chat__msg.is-admin .dhsp-chat__bubble{
  
  color: var(--_chat-out-fg);
  border-radius: var(--_chat-radius);
}

/* Meta (Zeit/Name) */
.dhsp-chat__meta{ color: var(--_chat-meta) !important; }

/* --- END chat.css -------------------------------------- */

/* --- BEGIN consent.css --------------------------------- */

/* ===== DHSP Consent Banner ===== */
.dhsp-consent{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999;
  padding: 30px;
  pointer-events: none;
}
.dhsp-consent.is-hidden{ display: none; }
.dhsp-consent__inner{
  pointer-events: auto;
  margin: 0 auto; max-width: 960px;
  display: grid; gap: 12px; align-items: center;
  grid-template-columns: 1fr auto;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--dhsp-border, #e5e7eb) 70%, transparent);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--dhsp-bg, #fff) 96%, transparent),
    color-mix(in srgb, var(--dhsp-bg, #fff) 92%, transparent) 40%,
    color-mix(in srgb, var(--dhsp-primary, #0ea5e9) 5%, var(--dhsp-bg, #fff)) 100%);
  box-shadow: 0 14px 44px rgba(0,0,0,.18);
  padding: 14px;
}
.dhsp-consent__title{ display:block; margin:0 0 4px; font-size: 18px; }
.dhsp-consent__desc{ margin: 0; color: color-mix(in srgb, var(--dhsp-fg, #111) 70%, var(--dhsp-bg, #fff)); }
.dhsp-consent__actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width: 680px){
  .dhsp-consent__inner{ grid-template-columns: 1fr; }
  .dhsp-consent__actions .dhsp-btn{ width: 100%; }
}

/* ===== Consent Panel (Modal) ===== */
.dhsp-consent-panel{ position: fixed; inset: 0; z-index: 100000; display:grid; grid-template-columns: 1fr auto; pointer-events:none; opacity:0; transition: opacity 160ms ease; }
.dhsp-consent-panel.is-open{ pointer-events:auto; opacity:1; }
.dhsp-consent-panel__backdrop{ background: rgba(0,0,0,.35); backdrop-filter: blur(2px); }
.dhsp-consent-panel__panel{
  width: min(560px, 92vw);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--dhsp-bg, #fff) 96%, transparent),
    color-mix(in srgb, var(--dhsp-bg, #fff) 92%, transparent) 40%,
    color-mix(in srgb, var(--dhsp-primary, #0ea5e9) 4%, var(--dhsp-bg, #fff)) 100%);
  border-left: 1px solid color-mix(in srgb, var(--dhsp-border, #e5e7eb) 70%, transparent);
  box-shadow: -16px 0 48px rgba(0,0,0,.18);
  padding: 18px; transform: translateX(100%); transition: transform 200ms ease;
}
.dhsp-consent-panel.is-open .dhsp-consent-panel__panel{ transform: translateX(0); }
.dhsp-consent-panel__close{ position:absolute; top:10px; right:10px; border-radius:10px; }
.dhsp-consent-panel__title{ margin: 0 0 8px; font-size: 22px; }
.dhsp-consent-panel__intro{ margin: 0 0 12px; color: color-mix(in srgb, var(--dhsp-fg, #111) 70%, var(--dhsp-bg, #fff)); }
.dhsp-consent-panel__actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 12px; }

/* Liste / Switches */
.dhsp-consent-list{ list-style:none; padding:0; margin: 10px 0 0; display:grid; gap:10px; }
.dhsp-consent-item{
  border: 1px solid color-mix(in srgb, var(--dhsp-border, #e5e7eb) 70%, transparent);
  border-radius: 12px; padding: 10px 12px;
  background: color-mix(in srgb, var(--dhsp-bg, #fff) 98%, transparent);
}
.dhsp-consent-item__title{ font-weight: 700; margin-left: 10px; }
.dhsp-consent-item__req{ font-weight: 600; color: color-mix(in srgb, var(--dhsp-fg, #111) 60%, var(--dhsp-bg, #fff)); margin-left: 6px; }
.dhsp-consent-item__desc{ margin-top: 6px; color: color-mix(in srgb, var(--dhsp-fg, #111) 70%, var(--dhsp-bg, #fff)); }

/* Switch */
.dhsp-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.dhsp-switch input{ display:none; }
.dhsp-switch__slider{
  --w: 44px; --h: 24px; --r: 12px;
  position:relative; width:var(--w); height:var(--h); border-radius:var(--r);
  background: color-mix(in srgb, var(--dhsp-border, #e5e7eb) 70%, transparent);
  transition: background 160ms ease;
}
.dhsp-switch__slider::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:999px;
  background:#fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform 160ms ease;
}
.dhsp-switch input:checked + .dhsp-switch__slider{
  background: color-mix(in srgb, var(--dhsp-primary, #0ea5e9) 70%, transparent);
}
.dhsp-switch input:checked + .dhsp-switch__slider::after{
  transform: translateX(20px);
}

/* ================== DHSP Consent – Tokenized Overrides ================== */
.dhsp-consent__inner{
  border-radius: var(--dhsp-consent-radius, 14px);
  border: 1px solid var(--dhsp-consent-border, color-mix(in srgb, var(--dhsp-border, #e5e7eb) 70%, transparent));
  background: var(--dhsp-consent-bg,
    linear-gradient(160deg,
      color-mix(in srgb, var(--dhsp-bg, #fff) 96%, transparent),
      color-mix(in srgb, var(--dhsp-bg, #fff) 92%, transparent) 40%,
      color-mix(in srgb, var(--dhsp-primary, #0ea5e9) 5%, var(--dhsp-bg, #fff)) 100%)
  );
  box-shadow: var(--dhsp-consent-shadow, 0 14px 44px rgba(0,0,0,.18));
}
.dhsp-consent__desc{
  color: var(--dhsp-consent-fg, color-mix(in srgb, var(--dhsp-fg, #111) 70%, var(--dhsp-bg, #fff)));
}

/* Switch Maße aus dem Customizer */
.dhsp-switch{
  --w: var(--dhsp-switch-w, 44px);
  --h: var(--dhsp-switch-h, 24px);
  --r: var(--dhsp-switch-r, 999px);
}
.dhsp-switch__slider{
  width: var(--w); height: var(--h); border-radius: var(--r);
}

/* --- END consent.css ----------------------------------- */

/* --- BEGIN photography.css ----------------------------- */

/* ===== DERHALLER – Photography ===== */

/* ---------- Alben: Full-bleed Card mit Overlay + Titel + Slideshow ---------- */
.dhsp-albumcard{
  position:relative; overflow:hidden;
  border-radius: var(--dhsp-radius);
  border: var(--dhsp-border-w) solid color-mix(in srgb, var(--dhsp-border) 80%, transparent);
  background: color-mix(in srgb, var(--dhsp-bg) 96%, transparent);
  box-shadow: 0 8px 26px rgba(0,0,0,.10);
  transform-style: preserve-3d;
}

/* Medienrahmen */
.dhsp-albumcard__media{
  display:block; position:relative; aspect-ratio:16/10; overflow:hidden;
}

/* Cover-Slides (werden von JS gefadet) */
.dhsp-albumcard__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition: opacity 900ms ease;
}
.dhsp-albumcard__img.is-active{ opacity:1; }

/* Album-Cover: S/W als Standard, Cinema-Look auf Hover – KEIN Blur */
.dhsp-albumcard__media img{
  filter: grayscale(100%) contrast(1) brightness(1);
  transition: filter var(--dhsp-transition), transform var(--dhsp-transition);
  will-change: filter, transform;
}
.dhsp-albumcard:hover .dhsp-albumcard__media img{
  /* Farbe + Cinema-Look (leicht warm, mehr Punch) */
  filter: grayscale(0%) contrast(1.1) brightness(1.05) saturate(1.2) sepia(0.12);
}

/* Fallback, wenn kein Cover gefunden wurde */
.dhsp-empty-cover{ aspect-ratio:16/10; background: color-mix(in srgb, var(--dhsp-bg) 94%, transparent); }

/* Glas-Overlay über dem gesamten Bild – ohne Blur, damit das Bild scharf bleibt */
.dhsp-albumcard__overlay{
  position:absolute; inset:0;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--dhsp-bg) 22%, transparent),
    transparent 55%,
    color-mix(in srgb, var(--dhsp-primary) 8%, transparent) 100%);
  /* WICHTIG: kein backdrop-filter: blur(); */
  pointer-events:none;
}

/* Titel mittig, groß, uppercase – mit sanftem Glow statt Hintergrundbalken */
.dhsp-albumcard__title{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-weight:1000; letter-spacing:.6px; text-align:center;
  color: black;
  Opacity: .4;
  font-size: clamp(40px, 3.2vw, var(--dhsp-h4));
  text-transform: uppercase;
  pointer-events: none;
}

/* Subtiles Hover-Lifting */
.dhsp-albumcard:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(0,0,0,.14);
}

/* ---------- Photos: Masonry + s/w → Farbe (Cinema) ---------- */
.dhsp-masonry{
  position: relative;
  --gap: 18px;
}

/* Fallback-Layout ohne JS */
.dhsp-masonry__item{
  position: static;
  margin-bottom: var(--gap);
}

/* Enhanced Layout (JS): absolute + Fade/Slide-in */
.dhsp-masonry.is-enhanced .dhsp-masonry__item{
  position: absolute; left:0; top:0; width:100%;
  will-change: transform, opacity, left, top;
  transition: transform 280ms ease, opacity 280ms ease;
  opacity: 0; transform: translateY(12px);
}
.dhsp-masonry.is-enhanced .dhsp-masonry__item.is-placed{
  opacity: 1; transform: translateY(0);
}

/* Bilder im Masonry – s/w default, Cinema auf Hover */
.dhsp-masonry__media img{
  width:100%; height:auto; display:block;
  border-radius: calc(var(--dhsp-radius) - 4px);
  filter: grayscale(100%) contrast(1) brightness(1);
  transition: filter var(--dhsp-transition), transform var(--dhsp-transition);
  will-change: filter, transform;
}
.dhsp-masonry__media img:hover{
  filter: grayscale(0) contrast(1.07) brightness(1.03) saturate(1.12) sepia(0.08);
  transform: translateY(-1px);
}

/* ----- Lightbox (falls aktiviert) – minimal kompatibel ----- */
.dhsp-lightbox{
  position:fixed; inset:0; z-index:9999; display:none;
}
.dhsp-lightbox.is-open{ display:block; }
.dhsp-lightbox__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.65);
}
.dhsp-lightbox__panel{
  position:absolute; inset:6% 6%;
  display:grid; place-items:center;
}
.dhsp-lightbox__img{
  max-width:100%; max-height:100%; display:block; border-radius:12px;
}
.dhsp-lightbox__close{
  position:absolute; top:10px; right:10px; border:0; background:transparent;
  color:#fff; font-size:24px; cursor:pointer;
}

/* Toast (Uploader Feedback) */
#dhsp-photo-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(4px);
  background: color-mix(in srgb, var(--dhsp-bg) 96%, transparent);
  color: var(--dhsp-fg);
  border: 1px solid color-mix(in srgb, var(--dhsp-border) 70%, transparent);
  padding:10px 12px; border-radius:10px; box-shadow:var(--dhsp-shadow-md);
  opacity:0; pointer-events:none; transition:opacity var(--dhsp-transition), transform var(--dhsp-transition);
  z-index:99999;
}
#dhsp-photo-toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .dhsp-albumcard__img,
  .dhsp-masonry.is-enhanced .dhsp-masonry__item{
    transition: none !important;
  }
  .dhsp-albumcard:hover{ transform:none !important; box-shadow: 0 8px 26px rgba(0,0,0,.10) !important; }
  .dhsp-masonry__media img:hover{ transform:none !important; }
}

.dhsp-masonry__media video {
  width: 100%;
  height: auto;
  border-radius: calc(var(--dhsp-radius) - 4px);
  display: block;
  background: #000; /* visuelle Reserve, bis erstes Frame da ist */
}
/* dezenter Hover */
.dhsp-masonry__media video:hover {
  filter: contrast(1.05) brightness(1.05);
}

/* ===== Video-Support ===== */

/* Kleines Play-Icon auf Video-Previews */
.dhsp-video-badge {
  position:absolute;
  inset:auto 8px 8px auto;
  width:36px; height:36px;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:18px;
  font-weight:600;
  color:#fff;
  background:rgba(0,0,0,.55);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  pointer-events:none;
}

/* Container muss relative sein */
.dhsp-masonry__media {
  position:relative;
}

/* Fallback-Kachel für Videos ohne Poster */
.dhsp-video-fallback {
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb, var(--dhsp-bg) 94%, transparent);
  aspect-ratio:16/10;
  border-radius:calc(var(--dhsp-radius) - 4px);
  color:var(--dhsp-fg);
  font-weight:600;
  font-size:22px;
  text-transform:uppercase;
}

/* Animation: Badge leicht einblenden beim Hover */
.dhsp-masonry__media:hover .dhsp-video-badge {
  background:rgba(0,0,0,.75);
  transform:scale(1.08);
  transition:transform .25s ease, background .25s ease;
}

/* Inline-Videos im Masonry */
.dhsp-video {
  width:100%; height:auto; display:block;
  border-radius:calc(var(--dhsp-radius) - 4px);
  object-fit:cover;
  filter:grayscale(100%) contrast(1) brightness(1);
  transition:filter var(--dhsp-transition);
}

/* Hover-Effekt: Farbe + Cinema */
.dhsp-video:hover {
  filter:grayscale(0) contrast(1.07) brightness(1.03) saturate(1.12) sepia(0.08);
}

/* sorgt dafür, dass das Ziel nicht unterm Sticky-Header klebt */
#dhsp-photos { scroll-margin-top: 72px; }
@media (max-width: 768px){
  #dhsp-photos { scroll-margin-top: 64px; }
}


/* --- END photography.css --------------------------------*/

/* --- BEGIN dhsp-perf.css (Adminbar im Frontend) -------- */

/* DERHALLER Suite – Adminbar (zieht Style aus deiner frontend.css) */
body.has-dhsp-perfbar { padding-bottom: var(--dhsp-perfbar-h); }

/* Scope + Token-Fallbacks */
#dhsp-perf-bar{
  --perf-gap:    max(12px, env(safe-area-inset-bottom));
  --perf-peek-h: var(--dhsp-perf-peek-h, 28px);
  --perf-peek-w: var(--dhsp-perf-peek-w, 112px);
  --perf-pad-x:  .75rem;
  --perf-pad-y:  .6rem;

  --_bg:     var(--card-bg,     var(--surface-bg,     var(--dhsp-bg,        rgba(18,20,26,.85))));
  --_fg:     var(--card-fg,     var(--surface-fg,     var(--dhsp-fg,        #e6edf5)));
  --_muted:  var(--card-fg-dim, var(--surface-muted,  var(--dhsp-muted,     #a7b1c2)));
  --_brd:    var(--card-border, var(--surface-border, var(--dhsp-border,    rgba(255,255,255,.12))));
  --_brd-w:  var(--card-border-w, var(--surface-border-w, var(--dhsp-border-w, 1px)));
  --_rad:    var(--card-radius, var(--surface-radius, var(--dhsp-radius,    .9rem)));
  --_shadow: var(--card-shadow, var(--surface-shadow, var(--dhsp-shadow-md, 0 8px 18px rgba(0,0,0,.35))));
  --_accent: var(--card-accent, var(--accent,         var(--dhsp-primary,   #5cc5ff)));

  /* z-index optional aus Customizer */
  z-index: var(--dhsp-perf-z, 2147483647);
}

/* CLOSED: nur Peek-Chip sichtbar */
.dhsp-perfbar{
  position: fixed;
  left: 12px; right: auto; bottom: var(--perf-gap);
  width: var(--perf-peek-w);
  max-height: var(--perf-peek-h);
  min-height: var(--perf-peek-h);
  overflow: hidden;
  pointer-events: none;

  display: grid; grid-template-columns: 1fr auto auto; gap: .75rem; align-items: center;

  background: transparent;
  border: 0; box-shadow: none; padding: 0;
  color: var(--_fg);

  transition: width .26s ease, max-height .26s ease, padding .16s ease,
              background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

/* OPEN: Glas + leicht transparent */
.dhsp-perfbar.is-open{
  right: 12px; width: auto;
  max-height: calc(100vh - 2*var(--perf-gap) - 24px);
  padding: var(--perf-pad-y) var(--perf-pad-x);

  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--_bg) 86%, transparent) 0%,
      color-mix(in srgb, var(--_bg) 92%, transparent) 55%,
      color-mix(in srgb, var(--_accent) 8%, transparent) 100%);

  backdrop-filter: blur(var(--dhsp-perf-blur, 10px)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--dhsp-perf-blur, 10px)) saturate(120%);

  color: var(--_fg);
  border: var(--_brd-w) solid var(--_brd);
  border-radius: var(--_rad);
  box-shadow: var(--_shadow);
  pointer-events: auto;
}
.dhsp-perfbar.is-public{ grid-template-columns: 1fr auto; }

/* Peek-Chip */
.dhsp-perfbar .peek-head{
  position: absolute; left: 0; bottom: 0;
  width: var(--perf-peek-w); height: var(--perf-peek-h); line-height: var(--perf-peek-h);
  padding: 0 .7rem; text-align: center;

  border-radius: calc(var(--_rad) - .3rem);
  font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--_fg);

  background: color-mix(in srgb, var(--_bg) calc(var(--dhsp-perf-alpha, .85) * 100%), transparent);
  border: var(--_brd-w) solid var(--_brd);
  box-shadow: var(--_shadow);
  backdrop-filter: saturate(120%) blur(var(--dhsp-perf-blur, 6px));
  -webkit-backdrop-filter: saturate(120%) blur(var(--dhsp-perf-blur, 6px));

  pointer-events: auto;
  transition: transform .14s ease, filter .16s ease, opacity .16s ease, box-shadow .16s ease;
}
.dhsp-perfbar .peek-head:hover{
  filter: brightness(1.05);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--_accent) 35%, transparent), var(--_shadow);
}
.dhsp-perfbar.is-open .peek-head{ opacity:0; transform: translateY(6px); pointer-events:none; }

/* Inhalt */
.dhsp-perfbar .row{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; position:relative; }
.dhsp-perfbar .row.left .title{ font-weight:700; letter-spacing:.02em; color: var(--_fg); opacity:.95; }
.dhsp-perfbar .badge{
  padding:.2rem .5rem; border-radius:.5rem; font-size:.8rem; line-height:1; font-weight:700;
  background: color-mix(in srgb, var(--_fg) 8%, transparent);
  border: var(--_brd-w) solid var(--_brd); color: var(--_fg);
}
.dhsp-perfbar .badge.ok   { border-color: color-mix(in srgb, #00d084 45%, var(--_brd)); }
.dhsp-perfbar .badge.warn { border-color: color-mix(in srgb, #ffc400 45%, var(--_brd)); }
.dhsp-perfbar .badge.bad  { border-color: color-mix(in srgb, #ff4d4d 45%, var(--_brd)); }

.dhsp-perfbar .row.mid{ gap:.75rem; }
.dhsp-perfbar .metric{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.18rem .45rem; border-radius:.45rem;
  background: color-mix(in srgb, var(--_fg) 6%, transparent);
  border: var(--_brd-w) solid var(--_brd);
}
.dhsp-perfbar .metric em{ opacity:.75; font-style:normal; font-size:.82rem; color: var(--_muted); }
.dhsp-perfbar .metric b{ font-weight:800; font-size:.96rem; color: var(--_fg); }
.dhsp-perfbar canvas{ width:240px; height:24px; opacity:.9; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }

.dhsp-perfbar .row.right{ gap:.55rem; }
.dhsp-perfbar .pvuv{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.16rem .45rem; border-radius:.45rem;
  background: color-mix(in srgb, var(--_fg) 5%, transparent);
  border: var(--_brd-w) solid var(--_brd);
}
.dhsp-perfbar .pvuv em{ opacity:.72; font-style:normal; font-size:.8rem; color: var(--_muted); }
.dhsp-perfbar .pvuv b{ font-weight:800; font-size:.94rem; color: var(--_fg); }
.dhsp-perfbar .pvuv.dim em{ opacity:.58; } .dhsp-perfbar .pvuv.dim b{ opacity:.92; }

.dhsp-perfbar .button-small{
  padding:.32rem .7rem; font-size:.82rem; line-height:1; border-radius:.55rem;
  border: var(--_brd-w) solid var(--_brd);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--_fg) 8%, transparent), transparent),
    linear-gradient(90deg, color-mix(in srgb, var(--_accent) 55%, transparent), transparent);
  background-size: 100% 100%, 2px 100%;
  background-repeat:no-repeat; background-position:0 0, 0 0;
  color: var(--_fg);
  transition: filter .12s ease, transform .12s ease, border-color .12s ease;
}
.dhsp-perfbar .button-small:hover{
  filter: brightness(1.05);
  border-color: color-mix(in srgb, var(--_accent) 40%, var(--_brd));
}

.dhsp-perfbar .x{
  appearance:none; border:0; background:transparent; color:var(--_fg);
  opacity:.75; font-size:1.12rem; line-height:1; cursor:pointer; padding:.18rem .28rem;
  transition: transform .12s ease, opacity .16s ease;
}
.dhsp-perfbar .x:hover{ opacity:1; transform: translateY(-1px); }

/* Closed-State: nur Peek */
#dhsp-perf-bar.dhsp-perfbar:not(.is-open){
  right: auto; width: var(--perf-peek-w);
  max-height: var(--perf-peek-h); min-height: var(--perf-peek-h);
  padding: 0; background: transparent; border: 0; box-shadow: none;
  overflow: visible; pointer-events: none;
}
#dhsp-perf-bar.dhsp-perfbar:not(.is-open) .row{ display: none !important; }
#dhsp-perf-bar.dhsp-perfbar:not(.is-open) .peek-head{
  display:block !important; visibility:visible !important; opacity:1 !important;
  pointer-events:auto !important; transform:none !important;
  position:absolute; left:0; bottom:0; width:var(--perf-peek-w); height:var(--perf-peek-h); line-height:var(--perf-peek-h);
  z-index:1;
  background: color-mix(in srgb, var(--_bg) calc(var(--dhsp-perf-alpha, .85) * 100%), transparent);
  color: var(--_fg);
  border: var(--_brd-w) solid var(--_brd);
  box-shadow: var(--_shadow);
}

/* Beim Öffnen Peek vollständig verstecken */
#dhsp-perf-bar.dhsp-perfbar.is-open { overflow: hidden; }
#dhsp-perf-bar.dhsp-perfbar.is-open .peek-head{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-160%) translateY(6px) scale(.96) !important;
  width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; box-shadow: none !important;
}

/* Mobile */
@media (max-width: 900px){
  .dhsp-perfbar { left: 8px; }
  .dhsp-perfbar.is-open{ right: 8px; }
  .dhsp-perfbar canvas{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .dhsp-perfbar, .dhsp-perfbar .peek-head, .dhsp-perfbar .button-small{ transition: none !important; }
}

/* =========================================================
   DHSP Perfbar – Mobile Kompaktansicht
   ========================================================= */
@media (max-width: 600px){
  /* Leiste selbst: randloser, breiter */
  .dhsp-perfbar{
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }

  /* Links: nur der Status-Badge (z. B. "Schnell") bleibt sichtbar */
  .dhsp-perfbar .row.left .title,
  .dhsp-perfbar .row.left .muted{
    display: none !important;
  }
  .dhsp-perfbar .row.left{
    gap: 6px;
    padding-right: 6px;
  }
  .dhsp-perfbar .row.left .badge{
    margin: 0;
  }

  /* Mitte: Metriken & Sparkline komplett ausblenden */
  .dhsp-perfbar .row.mid{
    display: none !important;
  }

  /* Rechts: PV/UV ausblenden, Buttons stapeln & voller Breite */
  .dhsp-perfbar .row.right .pvuv{
    display: none !important;
  }
  .dhsp-perfbar .row.right{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 160px;              /* angenehme Breite auf Phone */
  }
  .dhsp-perfbar .row.right .button-small{
    display: inline-flex;
    justify-content: center;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    text-align: center;
    /* keine Farbänderungen – nutzt dein bestehendes Button-Design */
  }
  /* Close-Button als kleine Zeile darunter rechtsbündig */
  .dhsp-perfbar .row.right .x{
    align-self: flex-end;
    margin-top: 2px;
  }
}

/* etwas schmaler auf sehr kleinen Displays */
@media (max-width: 380px){
  .dhsp-perfbar .row.right{ width: 140px; gap: 6px; }
  .dhsp-perfbar .row.right .button-small{ padding: 7px 8px; }
}

/* --- END dhsp-perf.css --------------------------------- */

/* --- BEGIN loader.css ---------------------------------- */

/* =========================================================
   DERHALLER Suite – Loader
   High-tech Look, Glasoptik, Neon-Akzent
   ========================================================= */

#dhsp-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px) saturate(140%);
}

#dhsp-loader.is-on {
  display: flex;
}

/* Panel */
#dhsp-loader .dhsp-loader__panel {
  position: relative;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--dhsp-bg, #fff) 92%, transparent),
    color-mix(in srgb, var(--dhsp-primary, #0ea5e9) 6%, var(--dhsp-bg, #fff)) 100%
  );
  border: 1px solid color-mix(in srgb, var(--dhsp-border, #e5e7eb) 70%, transparent);
  border-radius: var(--dhsp-radius, 14px);
  padding: 28px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  display: grid;
  gap: 16px;
  justify-items: center;
  min-width: 260px;
  max-width: 90vw;
  animation: dhsp-fadein 260ms ease;
}

/* Ladebalken */
.dhsp-loader__bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dhsp-border, #e5e7eb) 50%, transparent);
  overflow: hidden;
  position: relative;
}

.dhsp-loader__barfill {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--dhsp-primary, #0ea5e9),
    color-mix(in srgb, var(--dhsp-accent, #22c55e) 60%, var(--dhsp-primary, #0ea5e9))
  );
  animation: dhsp-slide 1.2s ease-in-out infinite;
}

/* Text */
.dhsp-loader__text {
  font-weight: 600;
  letter-spacing: .3px;
  font-size: 1rem;
  color: var(--dhsp-fg, #111);
}

/* Animations */
@keyframes dhsp-slide {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(50%); width: 60%; }
  100% { transform: translateX(200%); }
}

@keyframes dhsp-fadein {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Dark Mode Anpassungen */
@media (prefers-color-scheme: dark) {
  #dhsp-loader .dhsp-loader__panel {
    background: linear-gradient(
      160deg,
      color-mix(in srgb, var(--dhsp-bg, #111) 92%, transparent),
      color-mix(in srgb, var(--dhsp-primary, #0ea5e9) 8%, var(--dhsp-bg, #111)) 100%
    );
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
  }
  .dhsp-loader__text {
    color: var(--dhsp-heading-fg, #f9fafb);
  }
}

/* --- END loader.css ------------------------------------ */

/* --- BEGIN console.css ---------------------------------- */

/* =========================================================
   DERHALLER Suite – Console (kompletter, bereinigter Block)
   Layout: Head -> Toolbar -> Dateien (Explorer) -> Editor -> Log
   ========================================================= */

.dhsp-console{ max-width: 1200px; margin: 0 auto; }

/* ---------- Head & Toolbar ---------- */
.dhsp-console__header{
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--dhsp-bg) 100%, transparent),
    color-mix(in srgb, var(--dhsp-bg) 96%, transparent));
  border-radius: 16px;
  margin: 8px 0 12px;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--dhsp-shadow) 18%, transparent);
}
.dhsp-console__title{ margin:0; }
.dhsp-console__sub{ font-size:.58em; color:var(--dhsp-muted); font-weight:600; margin-left:.5rem; }

.dhsp-console__toolbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:10px; margin: 0 0 12px;
}
.dhsp-console__tool-right{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Karten-Abstände ---------- */
.dhsp-console__files,
.dhsp-console__editorwrap,
.dhsp-console__logwrap{ margin: 0 0 16px; }

/* =========================================================
   Explorer (Breadcrumb + Suche + Listenansicht auf EINER Ebene)
   ========================================================= */

/* kleine Leiste über der Liste */
.dhsp-explorer{ margin-top: 6px; }
.dhsp-explorer__row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:10px; padding: 6px 0 8px;
  border-bottom: 1px dashed color-mix(in srgb, var(--dhsp-border) 70%, transparent);
}

/* Breadcrumbs */
.dhsp-explorer__crumbs{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dhsp-crumb{
  background: transparent; border:0; color:var(--dhsp-fg); cursor:pointer;
  padding: 2px 6px; border-radius: 8px; font-weight:600;
}
.dhsp-crumb:hover{ background: color-mix(in srgb, var(--dhsp-primary) 12%, transparent); }
.dhsp-crumb.is-last{ color:var(--dhsp-muted); font-weight:500; cursor:default; }
.dhsp-crumb-sep{ color:var(--dhsp-muted); user-select:none; }

/* Tools rechts (Suche + Zurück) */
.dhsp-explorer__tools{ display:flex; align-items:center; gap:6px; }
.dhsp-explorer .dhsp-input.dhsp-explorer__search{
  width: 220px; padding: 6px 10px; font-size:.92rem; border-radius: 10px;
  background: color-mix(in srgb, var(--dhsp-bg) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--dhsp-border) 70%, transparent);
  color: var(--dhsp-fg);
}

/* Dateien-Karte: feste, überschaubare Höhe */
.dhsp-console__files .dhsp-console__tree{
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--dhsp-border) 70%, transparent);
  max-height: 400px; min-height: 240px; overflow: auto;
}

/* Listenansicht: schlank, ohne Icons links */
.dhsp-explorer__list{ display:block; }
.dhsp-explorer__rowitem{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:10px;
  padding: 4px 6px;
  border-radius: 8px;
}
.dhsp-explorer__rowitem + .dhsp-explorer__rowitem{ margin-top: 1px; }
.dhsp-explorer__rowitem:hover{
  background: color-mix(in srgb, var(--dhsp-primary) 10%, transparent);
}
/* das frühere Icon-Element ausblenden (DOM bleibt, stört aber nicht) */
.dhsp-explorer__rowitem .ico{ display:none; }

/* Name */
.dhsp-explorer__rowitem .label{
  display:inline-block; max-width:100%;
  background:transparent; border:0; color:var(--dhsp-fg); text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-weight:540; padding:2px 0;
}

/* Meta (rechts) */
.dhsp-explorer__rowitem .meta{
  color: var(--dhsp-muted);
  font-size: .84rem;
  padding-right: 6px;
}

/* Ordner leicht hervorheben, Dateien minimal schmaler */
.dhsp-explorer__rowitem[data-type="dir"] .label{ letter-spacing:.02em; font-weight:600; }
.dhsp-explorer__rowitem[data-type="file"] .label{ font-weight:520; }

/* =========================================================
   Editor (dunkel) + CodeMirror Theme
   ========================================================= */

.dhsp-console__editorhost{
  min-height: 60vh;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--dhsp-border) 70%, transparent);
  background: color-mix(in srgb, var(--dhsp-bg) 96%, transparent);
}

.dhsp-console .CodeMirror{
  height: 60vh;
  background: color-mix(in srgb, var(--dhsp-bg) 96%, transparent);
  color: #e7e7e7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
}
.dhsp-console .CodeMirror-gutters{ background:#0b0d12; color:#8a8f98; border-right:1px solid #1a1e25; }
.dhsp-console .CodeMirror-cursor{ border-left:1px solid #fff; }
.dhsp-console .cm-s-default .cm-comment{ color:#7b8694; }
.dhsp-console .cm-s-default .cm-string{ color:#c6f6d5; }
.dhsp-console .cm-s-default .cm-number{ color:#fbd38d; }
.dhsp-console .cm-s-default .cm-keyword{ color:#90cdf4; }
.dhsp-console .cm-s-default .cm-variable{ color:#f7fafc; }

/* =========================================================
   Log
   ========================================================= */

.dhsp-console__log{
  margin: 0;
  padding: 12px;
  min-height: 120px;
  max-height: 280px;
  overflow: auto;
  background: color-mix(in srgb, var(--dhsp-bg) 96%, transparent);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--dhsp-border) 70%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .9rem;
  line-height: 1.45;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px){
  .dhsp-console{ padding-inline: 8px; }
  .dhsp-explorer .dhsp-input.dhsp-explorer__search{ width: 160px; }
  .dhsp-console .CodeMirror{ height: 50vh; }
  .dhsp-console__editorhost{ min-height: 50vh; }
}

/* ===== Console: Toolbar – nur Layout/Größe, keine Farb-Overrides ===== */

/* Toolbar-Abstände, ohne Button-Farben anzutasten */
.dhsp-console__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.dhsp-console__tool-right {
  display: flex;
  gap: 8px;              /* Abstand zwischen Buttons */
  flex-wrap: wrap;
}

/* --- END console.css ------------------------------------ */