/* DeskHub Tickets: bewusst schlicht, damit sich das Formular dem Theme anpasst. Farben lassen sich über CSS-Variablen ändern. */
.dht-wrap {
  --dht-accent: var(--dht-theme-accent, var(--dht-server-accent, var(--wp--preset--color--primary, #0f6f6a)));
  --dht-on-accent: var(--dht-theme-on-accent, #fff);
  --dht-border: #d6dde5;
  --dht-muted: #5b6b7b;
  --dht-field-bg: #fff;
  --dht-radius: 8px;
  max-width: 640px;
  margin: 1.5em 0;
}
.dht-wrap * { box-sizing: border-box; }
.dht-title { margin: 0 0 .6em; }
.dht-form p { margin: 0 0 1em; }
.dht-form label { display: block; font-weight: 600; margin-bottom: .25em; }
.dht-form input[type="text"],
.dht-form input[type="email"],
.dht-form select,
.dht-form textarea {
  width: 100%;
  padding: .6em .75em;
  border: 1px solid var(--dht-border);
  border-radius: var(--dht-radius);
  font: inherit;
  background: var(--dht-field-bg);
  color: inherit;
}
.dht-form textarea { resize: vertical; min-height: 9em; }
.dht-form input:focus,
.dht-form select:focus,
.dht-form textarea:focus { outline: 2px solid var(--dht-accent); outline-offset: 1px; border-color: var(--dht-accent); }
.dht-consent label { font-weight: 400; display: flex; gap: .6em; align-items: flex-start; }
.dht-consent input { margin-top: .3em; flex: none; }
.dht-button {
  appearance: none;
  background: var(--dht-accent) !important;
  color: var(--dht-on-accent) !important;
  border: 0;
  border-radius: var(--dht-radius);
  padding: .7em 1.4em;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.dht-button:hover { filter: brightness(1.08); }
.dht-button:focus-visible { outline: 2px solid var(--dht-accent); outline-offset: 2px; }

/* Falle für Roboter: für Menschen unsichtbar, aber nicht mit display:none (das erkennen manche Roboter) */
.dht-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.dht-notice { padding: .8em 1em; border-radius: var(--dht-radius); margin: 0 0 1.2em; border: 1px solid; }
.dht-notice p { margin: 0 0 .4em; }
.dht-notice p:last-child { margin-bottom: 0; }
.dht-notice ul { margin: 0; padding-left: 1.2em; }
.dht-success { background: #ecfdf3; border-color: #86efac; color: #14532d; }
.dht-error { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }

.dht-ticket { margin: 0 0 2em; }
.dht-meta { color: var(--dht-muted); margin: 0 0 1em; }
.dht-badge { display: inline-block; padding: .1em .65em; border-radius: 999px; font-size: .85em; font-weight: 600; background: #e2e8f0; color: #1e293b; }
.dht-status-open { background: #dbeafe; color: #1e3a8a; }
.dht-status-pending { background: #fef3c7; color: #78350f; }
.dht-status-answered, .dht-status-resolved { background: #dcfce7; color: #14532d; }
.dht-msg { border: 1px solid var(--dht-border); border-radius: var(--dht-radius); padding: .7em .9em; margin: 0 0 .7em; }
.dht-msg-staff { background: #f1f8f7; border-color: #bfdcd9; }
.dht-msg-head { color: var(--dht-muted); font-size: .88em; margin-bottom: .3em; }
.dht-msg-body { overflow-wrap: anywhere; }

/* Eigene Felder aus DeskHub */
.dht-intro { margin: 0 0 1em; color: var(--dht-muted); }
.dht-fields { display: flex; flex-wrap: wrap; gap: 0 1em; }
.dht-field { flex: 1 1 100%; min-width: 0; margin: 0 0 1em; }
.dht-field label { display: block; font-weight: 600; margin-bottom: .25em; }
.dht-field input[type="text"],
.dht-field input[type="number"],
.dht-field input[type="date"],
.dht-field select,
.dht-field textarea {
  width: 100%;
  padding: .6em .75em;
  border: 1px solid var(--dht-border);
  border-radius: var(--dht-radius);
  font: inherit;
  background: var(--dht-field-bg);
  color: inherit;
}
.dht-field input:focus, .dht-field select:focus, .dht-field textarea:focus { outline: 2px solid var(--dht-accent); outline-offset: 1px; border-color: var(--dht-accent); }
.dht-field .dht-check { display: flex; gap: .6em; align-items: flex-start; font-weight: 400; margin: .25em 0; }
.dht-field .dht-check input { margin-top: .3em; flex: none; }
.dht-radios { border: 0; margin: 0; padding: 0; }
/* Themes machen "legend" und Überschriften oft groß und setzen Linien darunter: Hier bewusst auf Normalgröße zurückgesetzt */
.dht-wrap .dht-radios > legend {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 0 0 .25em !important;
  padding: 0 !important;
  border: 0 !important;
  font: inherit !important;
  font-size: 1em !important;
  font-weight: 600 !important;
  line-height: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.dht-form label > span { font-weight: inherit; font-size: inherit; }
.dht-wrap .dht-group { font-size: 1.1em !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: normal !important; text-transform: none !important; }
.dht-radios.dht-inline { display: flex; flex-wrap: wrap; gap: 0 1.4em; }
.dht-radios.dht-inline legend { flex: 1 1 100%; }
.dht-attach input[type="file"] { width: 100%; padding: .5em 0; font: inherit; color: inherit; }
.dht-attach .dht-help { display: block; }
.dht-help { margin: .3em 0 0; font-size: .88em; color: var(--dht-muted); }
.dht-req { color: #b91c1c; }
.dht-group { margin: 1.2em 0 .6em; }
@media (min-width: 600px) {
  .dht-w-half { flex: 1 1 calc(50% - .5em); }
  .dht-w-third { flex: 1 1 calc(33.333% - .67em); }
  .dht-w-twothirds { flex: 1 1 calc(66.666% - .33em); }
}
/* Bei einer Themenauswahl zeigt form.js nur die Felder des gewählten Themas (ohne JavaScript bleibt alles sichtbar) */
.dht-js .dht-topic-fields { display: none; }
.dht-js .dht-topic-fields.dht-topic-active { display: block; }
.dht-form [hidden] { display: none !important; }

/* Einheitliche Felder: Themes geben Beschriftungen, Textfeldern und Auswahllisten oft verschiedene Schriften und Höhen.
   Hier bekommen alle Beschriftungen und alle einzeiligen Felder dieselbe Schrift, Größe und Höhe. */
.dht-wrap .dht-fields { align-items: flex-start; }
.dht-wrap .dht-form label:not(.dht-check),
.dht-wrap .dht-radios > legend {
  display: block !important;
  font-family: inherit !important;
  font-size: 1em !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin: 0 0 .35em !important;
}
.dht-wrap .dht-form input[type="text"],
.dht-wrap .dht-form input[type="email"],
.dht-wrap .dht-form input[type="number"],
.dht-wrap .dht-form input[type="date"],
.dht-wrap .dht-form select {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 2.9em !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 .75em !important;
  font-family: inherit !important;
  font-size: 1em !important;
  line-height: 1.4 !important;
}
.dht-wrap .dht-form select { padding-right: 2em !important; }
.dht-wrap .dht-form textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: .6em .75em !important;
  font-family: inherit !important;
  font-size: 1em !important;
  line-height: 1.5 !important;
}
.dht-wrap .dht-form .dht-field { margin-bottom: 1em; }

/* Der rote Stern und andere Textteile in Beschriftungen dürfen die Zeile nicht höher machen (Themes setzen für span oft eigene Schrift und Zeilenhöhe):
   Sonst stehen Felder mit Stern tiefer als Felder ohne Stern. */
.dht-wrap .dht-form label > span,
.dht-wrap .dht-radios > legend > span,
.dht-wrap .dht-req {
  font: inherit !important;
  line-height: 0 !important;
  vertical-align: baseline !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.dht-wrap .dht-form .dht-check > span { line-height: 1.4 !important; }
.dht-wrap .dht-form label:not(.dht-check),
.dht-wrap .dht-radios > legend { min-height: 1.4em; box-sizing: content-box !important; }
.dht-wrap .dht-fields > .dht-field { align-self: flex-start; }

/* Nebeneinander stehende Ja/Nein-Optionen: so hoch wie ein Textfeld und mittig, damit sie neben Textfeldern und Auswahllisten nicht herausfallen */
.dht-wrap .dht-radios.dht-inline .dht-check { min-height: 2.9em; align-items: center; margin: 0 !important; }

/* Farben vom Theme: Rahmen, Hinweistext und Feldhintergrund werden aus der Schriftfarbe der Seite gemischt,
   so passen sie sich hellen und dunklen Themes an. Ältere Browser behalten die festen Farben oben. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .dht-success { background: color-mix(in srgb, #16a34a 16%, transparent); border-color: color-mix(in srgb, #16a34a 55%, transparent); color: inherit; }
  .dht-error { background: color-mix(in srgb, #dc2626 14%, transparent); border-color: color-mix(in srgb, #dc2626 55%, transparent); color: inherit; }
  .dht-badge { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
  .dht-status-open { background: color-mix(in srgb, #2563eb 20%, transparent); }
  .dht-status-pending { background: color-mix(in srgb, #d97706 22%, transparent); }
  .dht-status-answered, .dht-status-resolved { background: color-mix(in srgb, #16a34a 20%, transparent); }
  .dht-msg-staff { background: color-mix(in srgb, var(--dht-accent) 10%, transparent); border-color: color-mix(in srgb, var(--dht-accent) 40%, transparent); }
}
/* Felder: Aussehen kommt nur aus Hintergrund und Schriftfarbe der Seite (theme.js), nicht aus Akzent- oder Theme-Farben der Eingabefelder */
.dht-wrap .dht-form input[type="text"], .dht-wrap .dht-form input[type="email"], .dht-wrap .dht-form input[type="number"],
.dht-wrap .dht-form input[type="date"], .dht-wrap .dht-form select, .dht-wrap .dht-form textarea {
  background: var(--dht-field-bg) !important;
  border-color: var(--dht-border) !important;
  color: var(--dht-fg, inherit) !important;
}
.dht-wrap .dht-form input:focus, .dht-wrap .dht-form select:focus, .dht-wrap .dht-form textarea:focus { border-color: var(--dht-accent) !important; }
/* Auswahllisten öffnen sich mit Systemfarben: an den Hintergrund der Seite angleichen (Werte setzt theme.js) */
.dht-wrap option { background: var(--dht-bg, Canvas); color: var(--dht-fg, CanvasText); }