/* ==========================================================================
   DP-Dynamic · Suche und Assistent

   Nur die beiden neuen Bausteine. Diese Datei definiert bewusst keine
   Farb-, Schrift- oder Formvariablen neu: sie greift auf die Tokens zu,
   die jede Seite bereits in ihrem eigenen <style>-Block setzt
   (--bg, --surface, --glass-border, --t95 … --t25, --line5, --line10).
   Damit passt sich beides automatisch an helles und dunkles Schema an
   und der Bestand bleibt unberührt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Gemeinsame Grundlagen
   -------------------------------------------------------------------------- */
:root {
  --dp-modul-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dp-modul-schatten: 0 24px 60px -24px rgba(18, 38, 64, 0.35);
}
:root[data-theme="dark"] {
  --dp-modul-schatten: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
}

.dp-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   1 · Auslöser in der Kopfleiste
   -------------------------------------------------------------------------- */
.dp-suche-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--surface-inset, rgba(15, 23, 42, 0.05));
  color: var(--t55);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s var(--dp-modul-ease), border-color 0.25s var(--dp-modul-ease);
}
.dp-suche-knopf:hover { color: var(--t95); border-color: var(--t40); }
.dp-suche-knopf svg { width: 15px; height: 15px; flex-shrink: 0; }
.dp-suche-knopf .dp-suche-kuerzel {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  color: var(--t45);
  font-variant-numeric: tabular-nums;
}
.dp-suche-knopf { padding: 0; width: 34px; justify-content: center; }
.dp-suche-knopf .dp-suche-text,
.dp-suche-knopf .dp-suche-kuerzel { display: none; }

/* --------------------------------------------------------------------------
   2 · Suchdialog
   -------------------------------------------------------------------------- */
.dp-suche {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  padding: 12vh 20px 20px;
  justify-content: center;
  align-items: flex-start;
}
.dp-suche[open], .dp-suche.ist-offen { display: flex; }

.dp-suche-grund {
  position: absolute;
  inset: 0;
  background: rgba(12, 22, 33, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
:root[data-theme="dark"] .dp-suche-grund { background: rgba(0, 0, 0, 0.7); }

.dp-suche-feld {
  position: relative;
  width: 100%;
  max-width: 640px;
  border-radius: 20px;
  background: var(--surface-strong, var(--surface));
  border: 1px solid var(--glass-border);
  box-shadow: var(--dp-modul-schatten);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  overflow: hidden;
  animation: dp-auf 0.22s var(--dp-modul-ease);
}
@keyframes dp-auf {
  from { opacity: 0; transform: translateY(-8px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

.dp-suche-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line5);
}
.dp-suche-kopf svg { width: 18px; height: 18px; color: var(--t40); flex-shrink: 0; }
.dp-suche-eingabe {
  flex: 1;
  border: 0;
  background: none;
  outline: none;
  color: var(--t95);
  font-family: inherit;
  font-size: 16px;
}
.dp-suche-eingabe::placeholder { color: var(--t45); }
.dp-suche-feld :focus-visible {
  outline: 2px solid #FF9600;
  outline-offset: 2px;
  border-radius: 6px;
}
.dp-suche-eingabe:focus-visible { outline-offset: 4px; }
.dp-suche-schliessen {
  border: 1px solid var(--glass-border);
  background: none;
  color: var(--t45);
  border-radius: 999px;
  padding: 3px 9px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}
.dp-suche-schliessen:hover { color: var(--t95); border-color: var(--t40); }

.dp-suche-liste {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: min(58vh, 460px);
  overflow-y: auto;
}
.dp-suche-liste:empty { display: none; }

.dp-treffer > a {
  display: block;
  padding: 11px 13px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}
.dp-treffer > a[aria-current="true"],
.dp-treffer > a:hover { background: var(--surface-inset, rgba(15, 23, 42, 0.05)); }
/* Die gewaehlte Zeile braucht mehr als eine Flaechentoenung: die lag bei
   1,1:1 gegen die Karte und war damit praktisch unsichtbar. */
.dp-treffer > a[aria-current="true"] {
  box-shadow: inset 3px 0 0 #FF9600;
  background: rgba(255, 150, 0, 0.09);
}

.dp-treffer-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.dp-treffer-titel { color: var(--t95); font-size: 14.5px; font-weight: 500; }
.dp-treffer-titel mark {
  background: rgba(255, 150, 0, 0.18);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.dp-treffer-kategorie {
  color: var(--t45);
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}
.dp-treffer-text {
  margin: 3px 0 0;
  color: var(--t55);
  font-size: 12.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dp-suche-hinweis {
  padding: 22px 18px;
  color: var(--t55);
  font-size: 13.5px;
  line-height: 1.6;
}
.dp-suche-fuss {
  display: flex;
  gap: 16px;
  padding: 10px 18px;
  border-top: 1px solid var(--line5);
  color: var(--t45);
  font-size: 11px;
}
.dp-suche-fuss span { display: inline-flex; align-items: center; gap: 5px; }
.dp-suche-fuss kbd {
  font-family: inherit;
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 10px;
}
@media (max-width: 560px) { .dp-suche-fuss { display: none; } }

/* --------------------------------------------------------------------------
   3 · Assistent
   -------------------------------------------------------------------------- */
.dp-assistent-knopf {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 190;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #FF9600;
  color: #14161a;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 34px -12px rgba(255, 150, 0, 0.6);
  transition: transform 0.25s var(--dp-modul-ease), box-shadow 0.25s var(--dp-modul-ease);
}

.dp-assistent-knopf:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(255, 150, 0, 0.7); }
.dp-assistent-knopf svg { width: 19px; height: 19px; }
.dp-assistent-knopf[aria-expanded="true"] { display: none; }
@media (max-width: 560px) {
  .dp-assistent-knopf { padding: 0; width: 50px; justify-content: center; }
  .dp-assistent-knopf .dp-assistent-beschriftung { display: none; }
}

.dp-assistent {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 195;
  width: min(380px, calc(100vw - 40px));
  max-height: min(620px, calc(100vh - 40px));
  display: none;
  flex-direction: column;
  border-radius: 20px;
  background: var(--surface-strong, var(--surface));
  border: 1px solid var(--glass-border);
  box-shadow: var(--dp-modul-schatten);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  overflow: hidden;
}
.dp-assistent.ist-offen { display: flex; animation: dp-auf 0.22s var(--dp-modul-ease); }

.dp-assistent-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line5);
}
.dp-assistent-titel { color: var(--t95); font-size: 14px; font-weight: 600; }
.dp-assistent-status { color: var(--t45); font-size: 11px; margin-top: 1px; }
.dp-assistent-zu {
  margin-left: auto;
  border: 1px solid var(--glass-border);
  background: none;
  color: var(--t45);
  width: 28px; height: 28px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.25s, border-color 0.25s;
}
.dp-assistent-zu:hover { color: var(--t95); border-color: var(--t40); }
.dp-assistent-zu svg { width: 13px; height: 13px; }

.dp-assistent-verlauf {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dp-nachricht { max-width: 86%; font-size: 13.5px; line-height: 1.6; }
.dp-nachricht-ich {
  align-self: flex-end;
  background: #FF9600;
  color: #14161a;
  padding: 9px 13px;
  border-radius: 16px 16px 4px 16px;
}

.dp-nachricht-bot {
  align-self: flex-start;
  color: var(--t85);
  background: var(--surface-inset, rgba(15, 23, 42, 0.05));
  padding: 10px 13px;
  border-radius: 16px 16px 16px 4px;
}
.dp-nachricht-bot a { color: #FF9600; text-decoration: none; border-bottom: 1px solid currentColor; }
.dp-nachricht-bot p { margin: 0 0 7px; }
.dp-nachricht-bot p:last-child { margin-bottom: 0; }
.dp-nachricht-bot ul { margin: 7px 0 0; padding-left: 0; list-style: none; display: grid; gap: 5px; }
.dp-nachricht-bot li a { display: block; color: var(--t95); border-bottom: 1px solid rgba(255,150,0,0.45); }
.dp-nachricht-bot li a:hover { color: #FF9600; }
.dp-nachricht-bot li span { display: block; color: var(--t55); font-size: 11.5px; }

.dp-tippt { display: inline-flex; gap: 4px; align-items: center; }
.dp-tippt i {
  width: 5px; height: 5px; border-radius: 999px;
  background: var(--t35);
  animation: dp-puls 1.1s infinite ease-in-out;
}
.dp-tippt i:nth-child(2) { animation-delay: 0.15s; }
.dp-tippt i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dp-puls { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

.dp-vorschlaege {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 16px 12px;
}
.dp-vorschlag {
  border: 1px solid var(--glass-border);
  background: none;
  color: var(--t65);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}
.dp-vorschlag:hover { color: var(--t95); border-color: #FF9600; }

.dp-assistent-eingabe {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line5);
}
.dp-assistent-eingabe input {
  flex: 1;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--input-bg, var(--surface));
  color: var(--t95);
  font-family: inherit;
  font-size: 13.5px;
  padding: 9px 14px;
  outline: none;
  transition: border-color 0.25s;
}
.dp-assistent-eingabe input:focus { border-color: #FF9600; }
.dp-assistent-eingabe input::placeholder { color: var(--t45); }
.dp-assistent-senden {
  border: 0;
  border-radius: 999px;
  width: 38px; height: 38px;
  background: #FF9600;
  color: #14161a;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dp-assistent-senden:disabled { opacity: 0.4; cursor: default; }
.dp-assistent-senden svg { width: 16px; height: 16px; }

.dp-assistent-fuss {
  padding: 0 16px 12px;
  color: var(--t45);
  font-size: 10.5px;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .dp-suche-feld, .dp-assistent.ist-offen { animation: none; }
  .dp-assistent-knopf:hover { transform: none; }
  .dp-tippt i { animation: none; opacity: 0.6; }
}

/* --------------------------------------------------------------------------
   4 · Kompaktmenü
   Die Kopfleiste trägt neun Navigationspunkte, Suche, Schemaumschalter und
   einen Knopf. Das passt erst ab 1280px nebeneinander. Darunter wandern die
   Punkte in ein Menü. Bisher verschwand die Navigation unter 1024px
   ersatzlos; das schließt zugleich diese Lücke.
   -------------------------------------------------------------------------- */
.dp-menue-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--surface-inset, rgba(15, 23, 42, 0.05));
  color: var(--t55);
  cursor: pointer;
  transition: color 0.25s var(--dp-modul-ease), border-color 0.25s var(--dp-modul-ease);
}
.dp-menue-knopf:hover { color: #FF9600; border-color: rgba(255, 150, 0, 0.4); }
.dp-menue-knopf svg { width: 16px; height: 16px; }
.dp-menue-knopf .dp-menue-zu { display: none; }
.dp-menue-knopf[aria-expanded="true"] .dp-menue-auf { display: none; }
.dp-menue-knopf[aria-expanded="true"] .dp-menue-zu { display: block; }

@media (min-width: 1280px) { .dp-menue-knopf { display: none; } }

.dp-menue {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 49;
  background: var(--bg);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--dp-modul-schatten);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.dp-menue[hidden] { display: none; }
.dp-menue-liste {
  max-width: 80rem;
  margin: 0 auto;
  padding: 10px 24px 20px;
  display: grid;
  gap: 2px;
}
@media (min-width: 640px) {
  .dp-menue-liste { grid-template-columns: 1fr 1fr; padding-inline: 40px; }
}
.dp-menue-liste a {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--t75);
  text-decoration: none;
  font-size: 15px;
  transition: color 0.2s, background-color 0.2s;
}
.dp-menue-liste a svg { width: 13px; height: 13px; flex-shrink: 0; }
.dp-menue-liste a:hover { color: var(--t95); background: var(--surface-inset, rgba(15, 23, 42, 0.05)); }
/* Ab 640px steht der Knopf in der Kopfleiste. Zweimal gleichzeitig sichtbar
   wirkt wie ein Versehen, deshalb traegt ihn das Menue nur darunter. */
.dp-menue-liste a.dp-menue-haupt { display: none; }
@media (max-width: 639px) {
  .dp-menue-liste a.dp-menue-haupt { display: flex; }
}
.dp-menue-liste a.dp-menue-haupt {
  grid-column: 1 / -1;
  margin-top: 8px;
  justify-content: center;
  background: #FF9600;
  color: #14161a;
  font-weight: 600;
}
:root[data-theme="dark"] .dp-menue-liste a.dp-menue-haupt { color: #14161a; }
.dp-menue-liste a.dp-menue-haupt:hover { background: #FFA333; color: #14161a; }
:root[data-theme="dark"] .dp-menue-liste a.dp-menue-haupt:hover { color: #14161a; }


/* Hinweislink im Suchdialog. Der Markenton #FF9600 schafft auf hellem Grund
   nur 1,9:1, deshalb zusaetzlich unterstrichen und im hellen Schema
   abgedunkelt (5.1:1). Farbton und Saettigung bleiben dabei unveraendert,
   nur die Helligkeit wandert. */
.dp-suche-link { color: #945700; text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="dark"] .dp-suche-link { color: #FFB852; }

/* Der Tippindikator braucht einen Text, sonst herrscht fuer Screenreader
   zwischen Frage und Antwort Stille. */
.dp-tippt-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   5 · Aufklappmenü in der Kopfleiste
   Die Leiste trug acht Navigationspunkte nebeneinander. Vier davon sind
   jetzt unter "Flotte" und "Verfahren" gebündelt, und die Flotte führt
   direkt auf die Produktseiten, statt nur auf den Abschnitt der Startseite.
   -------------------------------------------------------------------------- */
.dp-auf { position: relative; }

.dp-auf-knopf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 4px 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--t75);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s var(--dp-modul-ease);
}
.dp-auf-knopf:hover,
.dp-auf-knopf[aria-expanded="true"] { color: var(--t95); }
.dp-auf-knopf svg {
  width: 11px; height: 11px;
  transition: transform 0.25s var(--dp-modul-ease);
}
.dp-auf-knopf[aria-expanded="true"] svg { transform: rotate(180deg); }

.dp-auf-feld {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  min-width: 260px;
  padding: 10px;
  border-radius: 18px;
  /* Muss decken: die Startseite hat ein Bild direkt darunter. */
  background: var(--bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--dp-modul-schatten);
  max-width: calc(100vw - 32px);
  /* Bewusst ohne Einblendung: ein Menü soll sofort dastehen, nicht erst
     erscheinen. Die frühere Animation endete zudem auf `transform: none`
     und löschte damit die Zentrierung translateX(-50%). */
}
.dp-auf-feld[hidden] { display: none; }

/* Breites Feld mit Spalten für die Flotte */
.dp-auf-feld-breit { min-width: min(640px, calc(100vw - 48px)); }
.dp-auf-spalten { display: grid; gap: 4px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dp-auf-titel {
  margin: 8px 0 4px;
  padding-inline: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FF9600;
}
.dp-auf-feld a {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--t75);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s, background-color 0.2s;
}
.dp-auf-feld a:hover,
.dp-auf-feld a:focus-visible { color: var(--t95); background: var(--surface-inset, rgba(15,23,42,0.05)); }

.dp-auf-fuss {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line5);
}
.dp-auf-fuss a { color: var(--t95); font-weight: 500; }

/* Im Kompaktmenü wird daraus eine einfache Liste ohne Aufklappen. */
.dp-menue .dp-auf-feld {
  position: static;
  transform: none;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  animation: none;
}

/* --------------------------------------------------------------------------
   6 · Zurück nach oben
   Gegenstück zum Assistenten, links unten. Erscheint erst, wenn weit genug
   gescrollt wurde, und bleibt zurückhaltend: der Assistent führt, dieser
   Knopf hilft nur zurück.
   -------------------------------------------------------------------------- */
.dp-nachoben {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 190;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--surface-strong, var(--surface));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--t65);
  cursor: pointer;
  box-shadow: var(--dp-modul-schatten);

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.3s var(--dp-modul-ease),
              transform 0.3s var(--dp-modul-ease),
              color 0.25s var(--dp-modul-ease),
              border-color 0.25s var(--dp-modul-ease);
}
.dp-nachoben.ist-da { opacity: 1; transform: none; pointer-events: auto; }

.dp-nachoben:hover { color: #FF9600; border-color: rgba(255, 150, 0, 0.45); }
.dp-nachoben svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .dp-nachoben { transition: opacity 0.001ms; transform: none; }
}