/* Drachenheld Frontend – Komponenten.
   Alles hängt unter .dhf (bzw. .dhf-layer für Sheet/Toast am <body>).
   Scope-Muster: :is(.dhf,#dhf-scope) – die nie vorhandene ID hebt jede Regel auf Spezifität
   (1,x,y). So gewinnen wir gegen Theme-/Page-Builder-Regeln wie „.elementor-kit-13 button:focus“
   (0,2,1), „.elementor-kit-13 input:not([type=button]):not([type=submit])“ (0,3,1) oder
   „.ast-single-post .entry-content a“ (0,2,1) – ohne !important. Neue Module schreiben ihre
   Regeln genauso: :is(.dhf,#dhf-scope) .mein-baustein { … } */

:is(.dhf,#dhf-scope),:is(.dhf-layer,#dhf-scope){
  font-family:var(--dh-font-body);font-size:var(--dh-text-base);line-height:var(--dh-leading);
  color:var(--dh-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
:is(.dhf,#dhf-scope) *,:is(.dhf,#dhf-scope) *::before,:is(.dhf,#dhf-scope) *::after,:is(.dhf-layer,#dhf-scope) *,:is(.dhf-layer,#dhf-scope) *::before,:is(.dhf-layer,#dhf-scope) *::after{box-sizing:border-box}
:is(.dhf,#dhf-scope) .dhf-icon,:is(.dhf-layer,#dhf-scope) .dhf-icon{display:inline-block;flex:none;vertical-align:middle}
:is(.dhf,#dhf-scope) [hidden],:is(.dhf-layer,#dhf-scope) [hidden]{display:none!important}

/* Bildschirmleser-Text */
:is(.dhf,#dhf-scope) .dhf-sr,:is(.dhf-layer,#dhf-scope) .dhf-sr,.dhf-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Fokus: sichtbar nur bei Tastatur */
:is(.dhf,#dhf-scope) :focus-visible,:is(.dhf-layer,#dhf-scope) :focus-visible{outline:var(--dh-focus-outline);outline-offset:2px;box-shadow:var(--dh-focus-ring)}
:is(.dhf,#dhf-scope) :focus:not(:focus-visible),:is(.dhf-layer,#dhf-scope) :focus:not(:focus-visible){outline:none}

/* Überschriften */
:is(.dhf,#dhf-scope) .dhf-display,:is(.dhf-layer,#dhf-scope) .dhf-display{font-family:var(--dh-font-display);font-weight:600;letter-spacing:.01em;line-height:var(--dh-leading-tight);color:var(--dh-text);margin:0}

/* ───── Buttons ───── */
:is(.dhf,#dhf-scope) .dhf-btn,:is(.dhf-layer,#dhf-scope) .dhf-btn{
  -webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--dh-space-2);
  min-height:var(--dh-hit);padding:0 var(--dh-space-5);margin:0;border:1px solid transparent;border-radius:var(--dh-radius);
  font-family:var(--dh-font-body);font-size:var(--dh-text-base);font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none;text-decoration:none;
  cursor:pointer;user-select:none;white-space:nowrap;box-shadow:none;
  transition:background-color var(--dh-dur-1) var(--dh-ease),border-color var(--dh-dur-1) var(--dh-ease),color var(--dh-dur-1) var(--dh-ease),transform var(--dh-dur-1) var(--dh-ease);
}
:is(.dhf,#dhf-scope) .dhf-btn:active,:is(.dhf-layer,#dhf-scope) .dhf-btn:active{transform:scale(.98)}
:is(.dhf,#dhf-scope) .dhf-btn--primary,:is(.dhf-layer,#dhf-scope) .dhf-btn--primary{background:var(--dh-accent);border-color:var(--dh-accent);color:var(--dh-on-accent)}
:is(.dhf,#dhf-scope) .dhf-btn--primary:hover,:is(.dhf-layer,#dhf-scope) .dhf-btn--primary:hover{background:var(--dh-accent-hover);border-color:var(--dh-accent-hover);color:var(--dh-on-accent)}
:is(.dhf,#dhf-scope) .dhf-btn--secondary,:is(.dhf-layer,#dhf-scope) .dhf-btn--secondary{background:var(--dh-surface);border-color:var(--dh-border-strong,#bdb5ae);color:var(--dh-accent)}
:is(.dhf,#dhf-scope) .dhf-btn--secondary:hover,:is(.dhf-layer,#dhf-scope) .dhf-btn--secondary:hover{background:var(--dh-accent-soft);border-color:var(--dh-accent);color:var(--dh-accent)}
:is(.dhf,#dhf-scope) .dhf-btn--ghost,:is(.dhf-layer,#dhf-scope) .dhf-btn--ghost{background:transparent;border-color:transparent;color:var(--dh-accent)}
:is(.dhf,#dhf-scope) .dhf-btn--ghost:hover,:is(.dhf-layer,#dhf-scope) .dhf-btn--ghost:hover{background:var(--dh-accent-soft);color:var(--dh-accent)}
:is(.dhf,#dhf-scope) .dhf-btn--block,:is(.dhf-layer,#dhf-scope) .dhf-btn--block{display:flex;width:100%}
:is(.dhf,#dhf-scope) .dhf-btn--sm,:is(.dhf-layer,#dhf-scope) .dhf-btn--sm{min-height:36px;padding:0 var(--dh-space-3);font-size:var(--dh-text-sm);border-radius:10px}
:is(.dhf,#dhf-scope) .dhf-btn[disabled],:is(.dhf,#dhf-scope) .dhf-btn[aria-disabled="true"],:is(.dhf-layer,#dhf-scope) .dhf-btn[disabled],:is(.dhf-layer,#dhf-scope) .dhf-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
:is(.dhf,#dhf-scope) .dhf-btn.is-busy,:is(.dhf-layer,#dhf-scope) .dhf-btn.is-busy{position:relative;color:transparent!important;pointer-events:none}
:is(.dhf,#dhf-scope) .dhf-btn.is-busy::after,:is(.dhf-layer,#dhf-scope) .dhf-btn.is-busy::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-color:var(--dh-on-accent) var(--dh-on-accent) transparent transparent;animation:dhf-spin .7s linear infinite}
:is(.dhf,#dhf-scope) .dhf-btn--secondary.is-busy::after,:is(.dhf-layer,#dhf-scope) .dhf-btn--secondary.is-busy::after{border-color:var(--dh-accent) var(--dh-accent) transparent transparent}
@keyframes dhf-spin{to{transform:rotate(360deg)}}

/* Icon-Button (rund, 44 px Trefferfläche) */
:is(.dhf,#dhf-scope) .dhf-iconbtn,:is(.dhf-layer,#dhf-scope) .dhf-iconbtn{
  -webkit-appearance:none;appearance:none;display:inline-grid;place-items:center;width:var(--dh-hit);height:var(--dh-hit);min-height:0;
  padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:var(--dh-text-2);cursor:pointer;box-shadow:none;
  transition:background-color var(--dh-dur-1) var(--dh-ease),color var(--dh-dur-1) var(--dh-ease);
}
@media (hover:hover){:is(.dhf,#dhf-scope) .dhf-iconbtn:hover,:is(.dhf-layer,#dhf-scope) .dhf-iconbtn:hover{background:var(--dh-surface-3);color:var(--dh-text)}}
:is(.dhf,#dhf-scope) .dhf-iconbtn--filled,:is(.dhf-layer,#dhf-scope) .dhf-iconbtn--filled{background:var(--dh-surface-2)}

/* ───── Chips (Filter) ───── */
:is(.dhf,#dhf-scope) .dhf-chip,:is(.dhf-layer,#dhf-scope) .dhf-chip{
  -webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:var(--dh-space-2);flex:none;
  min-height:36px;padding:0 var(--dh-space-3) 0 10px;margin:0;border:1px solid var(--dh-border);border-radius:var(--dh-radius-pill);
  background:var(--dh-surface);color:var(--dh-text-2);font:600 var(--dh-text-sm)/1 var(--dh-font-body);letter-spacing:0;text-transform:none;
  cursor:pointer;box-shadow:none;transition:background-color var(--dh-dur-1) var(--dh-ease),border-color var(--dh-dur-1) var(--dh-ease);
}
@media (hover:hover){:is(.dhf,#dhf-scope) .dhf-chip:hover,:is(.dhf-layer,#dhf-scope) .dhf-chip:hover{border-color:var(--dh-border-strong,#bdb5ae);background:var(--dh-surface);color:var(--dh-text)}}
:is(.dhf,#dhf-scope) .dhf-chip__dot,:is(.dhf-layer,#dhf-scope) .dhf-chip__dot{width:10px;height:10px;border-radius:50%;background:var(--chip-color,var(--dh-accent));flex:none}
:is(.dhf,#dhf-scope) .dhf-chip[aria-pressed="true"],:is(.dhf-layer,#dhf-scope) .dhf-chip[aria-pressed="true"]{border-color:var(--chip-color,var(--dh-accent));color:var(--dh-text);
  background:var(--dh-surface);background:color-mix(in srgb,var(--chip-color,var(--dh-accent)) 12%,#fff)}
:is(.dhf,#dhf-scope) .dhf-chip--all[aria-pressed="true"],:is(.dhf-layer,#dhf-scope) .dhf-chip--all[aria-pressed="true"]{background:var(--dh-text);border-color:var(--dh-text);color:var(--dh-white)}

/* ───── Segmented Control ───── */
:is(.dhf,#dhf-scope) .dhf-seg,:is(.dhf-layer,#dhf-scope) .dhf-seg{display:inline-flex;padding:2px;border-radius:10px;background:var(--dh-surface-3);gap:2px}
:is(.dhf,#dhf-scope) .dhf-seg__btn,:is(.dhf-layer,#dhf-scope) .dhf-seg__btn{
  -webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 var(--dh-space-3);margin:0;
  border:0;border-radius:8px;background:transparent;color:var(--dh-text-2);font:600 var(--dh-text-sm)/1 var(--dh-font-body);
  cursor:pointer;box-shadow:none;letter-spacing:0;text-transform:none;
}
:is(.dhf,#dhf-scope) .dhf-seg__btn:hover,:is(.dhf-layer,#dhf-scope) .dhf-seg__btn:hover{color:var(--dh-text);background:transparent}
:is(.dhf,#dhf-scope) .dhf-seg__btn[aria-pressed="true"],:is(.dhf-layer,#dhf-scope) .dhf-seg__btn[aria-pressed="true"]{background:var(--dh-surface);color:var(--dh-text);box-shadow:var(--dh-shadow-1)}

/* ───── Badges / Meter ───── */
:is(.dhf,#dhf-scope) .dhf-badge,:is(.dhf-layer,#dhf-scope) .dhf-badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;margin:0;border-radius:var(--dh-radius-pill);
  font:600 var(--dh-text-xs)/1 var(--dh-font-body);background:var(--dh-surface-3);color:var(--dh-text-2);white-space:nowrap}
:is(.dhf,#dhf-scope) .dhf-badge--success,:is(.dhf-layer,#dhf-scope) .dhf-badge--success{background:var(--dh-success-soft);color:var(--dh-success)}
:is(.dhf,#dhf-scope) .dhf-badge--warning,:is(.dhf-layer,#dhf-scope) .dhf-badge--warning{background:var(--dh-warning-soft);color:var(--dh-warning)}
:is(.dhf,#dhf-scope) .dhf-badge--danger,:is(.dhf-layer,#dhf-scope) .dhf-badge--danger{background:var(--dh-danger-soft);color:var(--dh-danger)}
:is(.dhf,#dhf-scope) .dhf-badge--info,:is(.dhf-layer,#dhf-scope) .dhf-badge--info{background:var(--dh-info-soft);color:var(--dh-info)}
:is(.dhf,#dhf-scope) .dhf-badge--accent,:is(.dhf-layer,#dhf-scope) .dhf-badge--accent{background:var(--dh-accent-soft);color:var(--dh-accent)}
:is(.dhf,#dhf-scope) .dhf-meter,:is(.dhf-layer,#dhf-scope) .dhf-meter{height:6px;border-radius:3px;background:var(--dh-surface-3);overflow:hidden}
:is(.dhf,#dhf-scope) .dhf-meter__fill,:is(.dhf-layer,#dhf-scope) .dhf-meter__fill{height:100%;border-radius:3px;background:var(--dh-accent);transition:width var(--dh-dur-3) var(--dh-ease-out)}
:is(.dhf,#dhf-scope) .dhf-meter__fill.is-high,:is(.dhf-layer,#dhf-scope) .dhf-meter__fill.is-high{background:var(--dh-highlight)}

/* ───── Karten / Leerzustand / Skeleton ───── */
:is(.dhf,#dhf-scope) .dhf-card,:is(.dhf-layer,#dhf-scope) .dhf-card{background:var(--dh-surface);border:1px solid var(--dh-border);border-radius:var(--dh-radius-lg);padding:var(--dh-space-5);box-shadow:var(--dh-shadow-1)}
:is(.dhf,#dhf-scope) .dhf-empty,:is(.dhf-layer,#dhf-scope) .dhf-empty{color:var(--dh-text-muted);text-align:center;padding:var(--dh-space-8) var(--dh-space-4)}
:is(.dhf,#dhf-scope) .dhf-skel,:is(.dhf-layer,#dhf-scope) .dhf-skel{background:linear-gradient(90deg,var(--dh-surface-3) 0,var(--dh-surface-2) 40%,var(--dh-surface-3) 80%);background-size:200% 100%;animation:dhf-shimmer 1.2s linear infinite;border-radius:8px}
@keyframes dhf-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){:is(.dhf,#dhf-scope) .dhf-skel,:is(.dhf-layer,#dhf-scope) .dhf-skel{animation:none}}

/* ───── Formularfelder ───── */
:is(.dhf-layer,#dhf-scope) .dhf-field,:is(.dhf,#dhf-scope) .dhf-field{display:grid;gap:6px;margin:0;align-content:start}
:is(.dhf-layer,#dhf-scope) .dhf-field__label,:is(.dhf,#dhf-scope) .dhf-field__label{font:600 var(--dh-text-sm)/1.3 var(--dh-font-body);color:var(--dh-text);margin:0}
:is(.dhf-layer,#dhf-scope) .dhf-field__opt,:is(.dhf,#dhf-scope) .dhf-field__opt{font-weight:400;color:var(--dh-text-muted)}
:is(.dhf-layer,#dhf-scope) .dhf-input,:is(.dhf,#dhf-scope) .dhf-input{
  -webkit-appearance:none;appearance:none;display:block;width:100%;min-height:var(--dh-hit);padding:10px 14px;margin:0;
  border:1px solid var(--dh-ink-400);border-radius:10px;background:var(--dh-surface);color:var(--dh-text);
  font:400 16px/1.3 var(--dh-font-body);box-shadow:none;transition:border-color var(--dh-dur-1) var(--dh-ease),box-shadow var(--dh-dur-1) var(--dh-ease);
}
:is(.dhf-layer,#dhf-scope) .dhf-input::placeholder,:is(.dhf,#dhf-scope) .dhf-input::placeholder{color:var(--dh-text-muted);opacity:1}
:is(.dhf-layer,#dhf-scope) .dhf-input:hover,:is(.dhf,#dhf-scope) .dhf-input:hover{border:1px solid var(--dh-ink-500,#7d746d)}
/* Themes (z. B. Astra-Fokusstil) setzen bei :focus „border-style:dotted“ – Rahmen hier vollständig festlegen. */
:is(.dhf-layer,#dhf-scope) .dhf-input:focus,:is(.dhf,#dhf-scope) .dhf-input:focus{outline:none;border:1px solid var(--dh-accent);box-shadow:var(--dh-focus-ring)}
:is(.dhf-layer,#dhf-scope) .dhf-input[aria-invalid="true"],:is(.dhf,#dhf-scope) .dhf-input[aria-invalid="true"],:is(.dhf-layer,#dhf-scope) .dhf-input[aria-invalid="true"]:focus,:is(.dhf,#dhf-scope) .dhf-input[aria-invalid="true"]:focus{border:1px solid var(--dh-danger)}
:is(.dhf-layer,#dhf-scope) .dhf-field__help,:is(.dhf,#dhf-scope) .dhf-field__help{font-size:var(--dh-text-xs);color:var(--dh-text-muted);margin:0}
:is(.dhf-layer,#dhf-scope) .dhf-field__error,:is(.dhf,#dhf-scope) .dhf-field__error{font-size:var(--dh-text-xs);font-weight:600;color:var(--dh-danger);margin:0}
:is(.dhf,#dhf-scope) .dhf-check,:is(.dhf-layer,#dhf-scope) .dhf-check{display:flex;gap:10px;align-items:flex-start;font-size:var(--dh-text-sm);color:var(--dh-text-2)}
:is(.dhf,#dhf-scope) .dhf-check input,:is(.dhf-layer,#dhf-scope) .dhf-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--dh-accent);flex:none}

/* ───── Hinweisbox ───── */
:is(.dhf,#dhf-scope) .dhf-note,:is(.dhf-layer,#dhf-scope) .dhf-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--dh-radius);background:var(--dh-info-soft);color:var(--dh-text-2);font-size:var(--dh-text-sm);margin:0}
:is(.dhf,#dhf-scope) .dhf-note .dhf-icon,:is(.dhf-layer,#dhf-scope) .dhf-note .dhf-icon{color:var(--dh-info);margin-top:1px}
:is(.dhf,#dhf-scope) .dhf-note--warning,:is(.dhf-layer,#dhf-scope) .dhf-note--warning{background:var(--dh-warning-soft)}
:is(.dhf,#dhf-scope) .dhf-note--warning .dhf-icon,:is(.dhf-layer,#dhf-scope) .dhf-note--warning .dhf-icon{color:var(--dh-warning)}
:is(.dhf,#dhf-scope) .dhf-note a,:is(.dhf-layer,#dhf-scope) .dhf-note a{color:var(--dh-accent);font-weight:600}

/* ───── Sheet (Dialog; mobil als Bottom-Sheet) ───── */
:is(.dhf-layer,#dhf-scope).dhf-sheet{position:fixed;inset:0;z-index:var(--dh-z-sheet);display:flex;align-items:center;justify-content:center;padding:var(--dh-space-6)}
:is(.dhf-layer,#dhf-scope) .dhf-sheet__backdrop{position:absolute;inset:0;background:var(--dh-backdrop);opacity:0;transition:opacity var(--dh-dur-2) var(--dh-ease);-webkit-tap-highlight-color:transparent}
:is(.dhf-layer,#dhf-scope) .dhf-sheet__panel{
  position:relative;display:flex;flex-direction:column;width:100%;max-width:560px;max-height:min(88vh,860px);
  background:var(--dh-surface);border-radius:var(--dh-radius-xl);box-shadow:var(--dh-shadow-3);overflow:hidden;
  opacity:0;transform:translateY(12px) scale(.98);transition:opacity var(--dh-dur-2) var(--dh-ease),transform var(--dh-dur-3) var(--dh-ease-out);
}
:is(.dhf-layer,#dhf-scope) .dhf-sheet__panel:focus{outline:none;box-shadow:var(--dh-shadow-3)}   /* Fokus nur zur Ansage, kein Rahmen um das Fenster */
:is(.dhf-layer,#dhf-scope).is-open .dhf-sheet__backdrop{opacity:1}
:is(.dhf-layer,#dhf-scope).is-open .dhf-sheet__panel{opacity:1;transform:none}
:is(.dhf-layer,#dhf-scope) .dhf-sheet__grab{display:none}
:is(.dhf-layer,#dhf-scope) .dhf-sheet__head{position:relative;display:flex;align-items:flex-start;gap:var(--dh-space-3);padding:var(--dh-space-5) var(--dh-space-5) var(--dh-space-3) var(--dh-space-6);flex:none}
:is(.dhf-layer,#dhf-scope) .dhf-sheet__title{flex:1;min-width:0;font-family:var(--dh-font-display);font-weight:600;font-size:var(--dh-text-xl);line-height:1.25;margin:6px 0 0;color:var(--dh-text);overflow-wrap:anywhere}
:is(.dhf-layer,#dhf-scope) .dhf-sheet__close{margin:-4px -8px 0 0}
:is(.dhf-layer,#dhf-scope) .dhf-sheet__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--dh-space-6) var(--dh-space-6);-webkit-overflow-scrolling:touch}
:is(.dhf-layer,#dhf-scope) .dhf-sheet__foot{flex:none;padding:var(--dh-space-4) var(--dh-space-6) max(var(--dh-space-4),env(safe-area-inset-bottom));border-top:1px solid var(--dh-border);background:var(--dh-surface)}
:is(.dhf-layer,#dhf-scope) .dhf-sheet__foot:empty{display:none}
@media (max-width:699px){
  :is(.dhf-layer,#dhf-scope).dhf-sheet{align-items:flex-end;padding:0}
  :is(.dhf-layer,#dhf-scope) .dhf-sheet__panel{max-width:none;max-height:92vh;border-radius:20px 20px 0 0;transform:translateY(100%)}
  :is(.dhf-layer,#dhf-scope).is-open .dhf-sheet__panel{transform:none}
  :is(.dhf-layer,#dhf-scope) .dhf-sheet__grab{display:block;width:36px;height:5px;border-radius:3px;background:var(--dh-ink-300);margin:8px auto 0;flex:none}
  :is(.dhf-layer,#dhf-scope) .dhf-sheet__head{padding:var(--dh-space-3) var(--dh-space-4) var(--dh-space-2) var(--dh-space-5)}
  :is(.dhf-layer,#dhf-scope) .dhf-sheet__body{padding:0 var(--dh-space-5) var(--dh-space-5)}
  :is(.dhf-layer,#dhf-scope) .dhf-sheet__foot{padding:var(--dh-space-3) var(--dh-space-5) max(var(--dh-space-3),env(safe-area-inset-bottom))}
}
html.dhf-scroll-lock{overflow:hidden!important}
html.dhf-scroll-lock body{overflow:hidden!important}

/* ───── Toast ───── */
:is(.dhf-layer,#dhf-scope).dhf-toasts{position:fixed;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom));z-index:var(--dh-z-toast);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
:is(.dhf-layer,#dhf-scope) .dhf-toast{display:flex;align-items:center;gap:12px;max-width:520px;width:auto;padding:12px 12px 12px 16px;border-radius:14px;background:var(--dh-ink-900);color:var(--dh-white);
  box-shadow:var(--dh-shadow-2);font:600 var(--dh-text-sm)/1.35 var(--dh-font-body);pointer-events:auto;opacity:0;transform:translateY(8px);transition:opacity var(--dh-dur-2) var(--dh-ease),transform var(--dh-dur-2) var(--dh-ease)}
:is(.dhf-layer,#dhf-scope) .dhf-toast.is-in{opacity:1;transform:none}
:is(.dhf-layer,#dhf-scope) .dhf-toast .dhf-icon{color:var(--dh-gold-300)}
:is(.dhf-layer,#dhf-scope) .dhf-toast--error .dhf-icon{color:#ffb4a9}
:is(.dhf-layer,#dhf-scope) .dhf-toast__msg{flex:1}
:is(.dhf-layer,#dhf-scope) .dhf-toast__act{color:var(--dh-gold-300);font-weight:700;text-decoration:none;white-space:nowrap;background:none;border:0;padding:6px 8px;margin:0;border-radius:8px;cursor:pointer;font:inherit}
:is(.dhf-layer,#dhf-scope) .dhf-toast__act:hover{color:#fff;background:rgba(255,255,255,.08)}

/* ───── Admin-Hub ───── */
.dhf-admin .dhf-admin__head{margin:8px 0 20px}
.dhf-admin .dhf-admin__title{font-family:var(--dh-font-display);font-size:26px;font-weight:600;margin:0 0 4px;color:var(--dh-wine-700);padding:0}
.dhf-admin .dhf-admin__lead{color:var(--dh-text-muted);margin:0}
.dhf-admin .dhf-admin__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-bottom:24px}
.dhf-admin .dhf-admin__module{display:flex;gap:14px;align-items:flex-start}
.dhf-admin .dhf-admin__module-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--dh-accent-soft);color:var(--dh-accent);flex:none}
.dhf-admin .dhf-admin__module-body{flex:1;min-width:0}
.dhf-admin .dhf-admin__module-name{font-size:16px;margin:0 0 4px;padding:0}
.dhf-admin .dhf-admin__module-version{font-weight:400;color:var(--dh-text-muted);font-size:13px;margin-left:6px}
.dhf-admin .dhf-admin__module-desc{margin:0 0 8px;color:var(--dh-text-2)}
.dhf-admin .dhf-admin__h2{font-size:16px;margin:0 0 12px;padding:0}
.dhf-admin .dhf-admin__settings{max-width:760px}

/* Auswahlfelder: eigener Pfeil (appearance:none entfernt den des Browsers/Themes) */
:is(.dhf,#dhf-scope) select.dhf-input,:is(.dhf-layer,#dhf-scope) select.dhf-input{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b625c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px}

/* ───────── [0.2.0] Lightbox (Produktbild-Ansicht) ───────── */
:is(.dhf-layer,#dhf-scope).dhf-lightbox { position: fixed; inset: 0; z-index: var(--dh-z-layer, 99999); background: rgba(18, 8, 8, .92); display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: auto 1fr auto; }
html.dhf-lightbox-open { overflow: hidden; }
:is(.dhf,#dhf-scope) .dhf-lightbox__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #f5efe7; }
:is(.dhf,#dhf-scope) .dhf-lightbox__alt { flex: 1; font-size: 14px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.dhf,#dhf-scope) .dhf-lightbox__count { font-variant-numeric: tabular-nums; opacity: .85; }
:is(.dhf,#dhf-scope) .dhf-lightbox__stage { grid-row: 2; grid-column: 2; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
:is(.dhf,#dhf-scope) .dhf-lightbox__img { max-width: 92vw; max-height: calc(100vh - 170px); object-fit: contain; transition: opacity .15s ease; cursor: zoom-in; user-select: none; border-radius: 6px; background: #fff; }
:is(.dhf,#dhf-scope) .dhf-lightbox__prev,
:is(.dhf,#dhf-scope) .dhf-lightbox__next { grid-row: 2; align-self: center; margin: 0 10px; width: 48px; height: 48px; font-size: 30px; line-height: 1; color: #f5efe7; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; }
:is(.dhf,#dhf-scope) .dhf-lightbox__prev { grid-column: 1; }
:is(.dhf,#dhf-scope) .dhf-lightbox__next { grid-column: 3; }
@media (hover: hover) {
  :is(.dhf,#dhf-scope) .dhf-lightbox__prev:hover,
  :is(.dhf,#dhf-scope) .dhf-lightbox__next:hover { background: rgba(255,255,255,.2); }
}
:is(.dhf,#dhf-scope) .dhf-lightbox__close { color: #f5efe7; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; width: 42px; height: 42px; font-size: 18px; }
:is(.dhf,#dhf-scope) .dhf-lightbox__thumbs { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: center; padding: 10px 16px 14px; overflow-x: auto; }
:is(.dhf,#dhf-scope) .dhf-lightbox__thumb { width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; flex: 0 0 auto; }
:is(.dhf,#dhf-scope) .dhf-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
:is(.dhf,#dhf-scope) .dhf-lightbox__thumb[aria-current="true"] { border-color: var(--dh-gold, #c9a227); }
.dhf-lightbox-source img { cursor: zoom-in; }
@media (max-width: 700px) {
  :is(.dhf,#dhf-scope) .dhf-lightbox__prev, :is(.dhf,#dhf-scope) .dhf-lightbox__next { width: 42px; height: 42px; margin: 0 4px; }
  :is(.dhf,#dhf-scope) .dhf-lightbox__img { max-width: 100vw; max-height: calc(100vh - 150px); border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.dhf,#dhf-scope) .dhf-lightbox__img { transition: none; }
}

/* ───────── [0.2.0] Fremde Admin-Notices eingeklappt ───────── */
/* Die Details-Hülse trägt selbst .dhf — sie muss auch OHNE .dhf-Vorfahren stylen
   (Modulseiten, deren wrap kein .dhf hat). */
details.dhf.dhf-notices, :is(.dhf,#dhf-scope) details.dhf-notices { margin: 8px 0 16px; }
details.dhf.dhf-notices > summary, :is(.dhf,#dhf-scope) details.dhf-notices > summary { cursor: pointer; font-weight: 600; color: var(--dh-text-out, #766d67); padding: 6px 0; }
details.dhf.dhf-notices .notice, :is(.dhf,#dhf-scope) details.dhf-notices .notice { margin: 8px 0; }
/* [0.11.2 UI] Übersicht: Status umbricht (Seite nicht breiter als der Bildschirm), Felder mit sichtbarem Label */
.dhf-admin .dhf-admin__grid{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
:is(.dhf,#dhf-scope) .dhf-badge.dhf-admin__status{white-space:normal;line-height:1.35;padding:4px 10px;height:auto;max-width:100%}
.dhf-admin .dhf-admin__status-list{margin:6px 0 0 18px;padding:0;list-style:disc;color:var(--dh-text-2);font-size:13px}
.dhf-admin .dhf-admin__status-list li{margin:2px 0;overflow-wrap:anywhere}
.dhf-admin .dhf-admin__field{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin:6px 0 12px;max-width:100%}
.dhf-admin .dhf-admin__field label{font-weight:600}
.dhf-admin .dhf-admin__field input{width:100%;max-width:25em;box-sizing:border-box}
@media (max-width:600px){.dhf-admin .dhf-admin__module{flex-wrap:wrap}.dhf-admin .dhf-admin__module .dhf-btn{min-height:44px}}