/* ==========================================================================
   Digital Dental — Kampagnen-Seiten (nur fuer Ads, nirgends verlinkt)
   Laedt NACH styles.css + pages.css; nutzt deren Tokens und Bausteine.
   Wizard-Optik nach Spectrum-UI-Multistep-Vorlage, nativ umgesetzt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grundgeruest: Logo-only-Header, schmaler Footer
   -------------------------------------------------------------------------- */
.dd-campaign .dd-header-inner { height: 68px; }

.dd-camp-footer {
  border-top: 1px solid var(--color-line);
  background: var(--color-bg);
}
.dd-camp-footer-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 26px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.dd-camp-footer-copy {
  margin: 0;
  font: 400 13px/1.5 var(--font-body);
  color: var(--color-text-secondary);
}
.dd-camp-footer-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.dd-camp-footer-nav .dd-footer-link { margin: 0; }

/* --------------------------------------------------------------------------
   Layout-Helfer
   -------------------------------------------------------------------------- */
/* Nur fuer Screenreader (aria-live-Ansagen) */
.dd-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.dd-camp-narrow {
  max-width: 720px;
  margin: 0 auto;
}
.dd-camp-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.dd-camp-hero .dd-lead { max-width: 40rem; }

/* Kampagnen-Hero als Split (Download-Seiten: Text links, Dokumentkarte rechts) */
.dd-camp-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.dd-camp-split > * { min-width: 0; }

/* Referenz-Layout der Lead-Seiten: zentrierter Kopf, darunter Cover + Formular */
.dd-camp-hero-top {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.dd-camp-hero-top .dd-page-h1 {
  margin-left: auto;
  margin-right: auto;
}
.dd-camp-hero-top .dd-lead {
  margin: 0 auto;
  max-width: 44rem;
}
.dd-camp-bullets {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 26px 0 0;
  padding: 0;
}
.dd-camp-bullets li {
  font: 500 15.5px/1.5 var(--font-body);
  color: var(--color-text);
}
.dd-camp-bullets li::before {
  content: '✓';
  color: var(--color-accent-dark);
  font-weight: 700;
  margin-right: 8px;
}
.dd-camp-hero-grid {
  margin-top: 52px;
  align-items: start;
}
.dd-camp-hero-grid .dd-doc-shot { max-width: 400px; }
.dd-camp-hero-form { min-width: 0; }

/* --------------------------------------------------------------------------
   Wizard (Spectrum-Muster): Punkte + Labels, duenner Balken, Kartenwechsel
   -------------------------------------------------------------------------- */
.dd-wiz-progress { margin-bottom: 28px; }

.dd-wiz-dots {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
}
.dd-wiz-dot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 5px;
  margin: 0;
  cursor: default;
  min-width: 24px;
  min-height: 24px;
}
.dd-wiz-dot-item[data-reachable="true"] { cursor: pointer; }
.dd-wiz-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--color-line);
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
}
.dd-wiz-dot-item[data-state="done"] .dd-wiz-dot { background: var(--color-accent-dark); }
.dd-wiz-dot-item[data-state="current"] .dd-wiz-dot {
  background: var(--color-accent-dark);
  box-shadow: 0 0 0 5px var(--color-accent-tint);
}
.dd-wiz-dot-item[data-reachable="true"]:hover .dd-wiz-dot { transform: scale(1.15); }
.dd-wiz-dot-item:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 2px;
  border-radius: 8px;
}
.dd-wiz-dot-label {
  font: 500 12px/1.3 var(--font-body);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.dd-wiz-dot-item[data-state="current"] .dd-wiz-dot-label {
  color: var(--color-text);
  font-weight: 600;
}

.dd-wiz-track {
  display: block;
  height: 3px;
  background: var(--color-line);
  border-radius: 3px;
  overflow: hidden;
}
.dd-wiz-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.dd-wiz-stepcount {
  margin: 18px 0 0;
  text-align: center;
  font: 500 12px var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
}

/* Kartenwechsel: raus nach links (200 ms), rein von rechts (300 ms) */
.dd-wiz-card { min-width: 0; }
.dd-wiz-card.is-in { animation: dd-wiz-in 0.3s ease-out both; }
.dd-wiz-card.is-out { animation: dd-wiz-out 0.2s ease-in both; }
@keyframes dd-wiz-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes dd-wiz-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-24px); }
}

/* Gestaffeltes Einblenden innerhalb der Karte */
.dd-wiz-card.is-in .dd-wiz-fade { animation: dd-wiz-fadeup 0.3s ease-out both; }
.dd-wiz-card.is-in .dd-wiz-fade:nth-child(2) { animation-delay: 70ms; }
.dd-wiz-card.is-in .dd-wiz-fade:nth-child(3) { animation-delay: 140ms; }
.dd-wiz-card.is-in .dd-wiz-fade:nth-child(4) { animation-delay: 210ms; }
@keyframes dd-wiz-fadeup {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.dd-wiz-title {
  font: 600 clamp(22px, 2.6vw, 28px)/1.25 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0 0 8px;
  text-wrap: balance;
}
/* Tastatur-Fokus sichtbar lassen (Skript-Fokus nach Schrittwechsel), Maus ohne Ring */
.dd-wiz-title:focus:not(:focus-visible) { outline: none; }
.dd-wiz-title:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 4px;
  border-radius: 4px;
}
.dd-wiz-desc {
  margin: 0 0 26px;
  font: 400 15.5px/1.6 var(--font-body);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.dd-wiz-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}
/* "Weiter" bleibt rechts, auch wenn der Zurueck-Button (Frage 1) versteckt ist */
.dd-wiz-actions .dd-btn-primary { margin-left: auto; }
button.dd-btn-primary[disabled] {
  background: var(--color-placeholder);
  cursor: not-allowed;
  transform: none;
}
button.dd-btn-primary[disabled]:hover {
  background: var(--color-placeholder);
  transform: none;
}

/* --------------------------------------------------------------------------
   Frage-Eingabe: grosser Wert + Slider + Zahlenfeld
   -------------------------------------------------------------------------- */
.dd-camp-value {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 6px 0 22px;
}
.dd-camp-value-num {
  font: 700 clamp(44px, 6vw, 68px)/1 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.dd-camp-value-unit {
  font: 500 13px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.dd-camp-slider { display: block; }
.dd-camp-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  background: transparent;
  margin: 0;
  cursor: pointer;
}
.dd-camp-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: var(--color-line);
}
.dd-camp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 2px solid var(--color-accent-dark);
  box-shadow: 0 4px 14px -4px rgba(11, 32, 39, 0.35);
  margin-top: -11px;
  transition: transform 0.15s;
}
.dd-camp-range::-webkit-slider-thumb:hover { transform: scale(1.08); }
.dd-camp-range::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: var(--color-line);
}
.dd-camp-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 2px solid var(--color-accent-dark);
  box-shadow: 0 4px 14px -4px rgba(11, 32, 39, 0.35);
}
.dd-camp-range:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 4px;
  border-radius: 6px;
}

.dd-camp-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font: 400 11.5px var(--font-mono);
  color: var(--color-text-secondary);
}

.dd-camp-numrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.dd-camp-numrow .dd-label { margin: 0; }
.dd-camp-num {
  width: 130px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Inhaltsliste und Dokumentkarten-Reste: die Dokumentvorschau laeuft jetzt
   ueber .dd-doc-shot (echtes Cover-Bild) weiter oben in dieser Datei.
   -------------------------------------------------------------------------- */

/* Inhaltsliste ("Was drin steckt") */
.dd-doc-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-bottom: 1px solid var(--color-line);
}
.dd-doc-list li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--color-line);
}
.dd-doc-list-num {
  font: 500 12.5px var(--font-mono);
  color: var(--color-accent-dark);
}
.dd-doc-list-title {
  font: 500 15.5px/1.45 var(--font-body);
  color: var(--color-text);
}
.dd-doc-list-meta {
  font: 400 12px var(--font-mono);
  color: var(--color-placeholder);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Erfolg / Download
   -------------------------------------------------------------------------- */
/* Das Erfolgspanel ist kuerzer als das ersetzte Formular; mit align-items:start
   klaffte daneben ein weisses Loch. Mindesthoehe plus zentrierter Inhalt fuellt
   die Spalte, ohne die Coverkarte zu strecken. */
.dd-camp-success {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 380px;
}
/* display:flex ueberschreibt sonst das native [hidden] — das Erfolgspanel
   stand dadurch schon VOR dem Absenden sichtbar unter dem Formular. */
.dd-camp-success[hidden] { display: none; }
/* Sichtbares Signal statt nur eines Satzes */
.dd-camp-success::before {
  content: '✓';
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: var(--color-accent-tint);
  color: var(--color-accent-dark);
  font: 700 26px/1 var(--font-body);
}
.dd-camp-success-title {
  font: 700 clamp(26px, 3vw, 38px)/1.1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 12px;
}
.dd-camp-success-title:focus:not(:focus-visible) { outline: none; }
.dd-camp-success-title:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 4px;
  border-radius: 4px;
}
.dd-camp-success .dd-lead { margin: 0 auto; }
.dd-camp-success-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.dd-camp-success-note {
  margin: 16px 0 0;
  font: 400 13.5px/1.6 var(--font-body);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Gratis-Tools-Hub: klickbare Tool-Karten (Hover-Lift + Stretched-Link)
   -------------------------------------------------------------------------- */
.dd-tool-card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: 24px;
  padding: 26px 28px 28px;
  box-shadow: 0 22px 60px -32px rgba(11, 32, 39, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.dd-tool-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-text-secondary);
  box-shadow: 0 30px 74px -30px rgba(11, 32, 39, 0.35);
}
.dd-tool-card:focus-within {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 3px;
}

/* Genau EIN echter Link je Karte (der CTA); sein ::after macht die
   ganze Karte klickbar. Fokus-Ring liegt via :focus-within auf der Karte. */
.dd-tool-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
}
.dd-tool-link:focus-visible { outline: none; }

.dd-tool-card h3 {
  font: 600 21px/1.3 var(--font-display);
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--color-text);
}
.dd-tool-text {
  margin: 0 0 14px;
  font: 400 15.5px/1.6 var(--font-body);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}
.dd-tool-meta {
  font: 500 12px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 18px;
}

/* Kleine CTA-Pill in der Karte (eigene Klasse, nicht die Header-Nav-Pill) */
.dd-tool-cta {
  display: inline-flex;
  align-items: center;
  background: var(--color-text);
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 999px;
  padding: 10px 18px;
  font: 600 13.5px var(--font-body);
  white-space: nowrap;
  transition: background 0.2s;
}
.dd-tool-cta:hover,
.dd-tool-card:hover .dd-tool-cta { background: var(--color-cta-hover); color: #FFFFFF; }

/* Ergebnis-Vorschau: zeigt echte Ausgabe des Tools, keine Deko */
.dd-tool-preview {
  border: 1px solid var(--color-line);
  background: var(--color-bg-secondary);
  border-radius: 16px;
  padding: 22px 24px 24px;
  margin-bottom: 22px;
}
.dd-tool-preview-label {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 10px;
}
.dd-tool-preview-figure {
  font: 700 clamp(34px, 4vw, 46px)/1 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
/* Der Check misst Digitalisierung: hier ist Tuerkis die richtige Farbe */
.dd-tool-preview-figure--digital { color: var(--color-accent-dark); }
.dd-tool-preview-sub {
  margin: 12px 0 0;
  font: 400 14px/1.55 var(--font-body);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}
.dd-tool-preview .dd-check-track { margin: 16px 0 0; }

/* Featured-Karte (Digital-Check): Split-Inhalt, grosszuegiger */
.dd-tool-featured { padding: clamp(28px, 4vw, 44px); }
.dd-tool-featured .dd-section-h2 { margin-top: 14px; }
.dd-tool-featured .dd-tool-preview {
  margin-bottom: 0;
  padding: clamp(24px, 3vw, 34px);
  background: var(--color-bg);
  box-shadow: 0 20px 50px -30px rgba(11, 32, 39, 0.3);
}
.dd-tool-featured .dd-tool-preview-figure { font-size: clamp(30px, 3.4vw, 40px); }

.dd-tool-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* ==========================================================================
   Dokument-Vorschau (.dd-doc-shot)
   Zeigt die ECHTE erste PDF-Seite (scripts/build-covers.sh) als geraden
   Papierstapel: zwei angedeutete Blaetter dahinter, sauberer Schatten,
   keine Rotation und keine Verzerrung. Hub und Landingpages nutzen dasselbe
   Modul, nur die Groesse unterscheidet sich.
   ========================================================================== */
.dd-doc-shot {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}
/* Angedeutete Blaetter darunter: gerade versetzt, nie gedreht */
.dd-doc-shot::before,
.dd-doc-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: #FFFFFF;
  border: 1px solid var(--color-line);
}
.dd-doc-shot::before { transform: translate(7px, 7px); opacity: 0.5; }
.dd-doc-shot::after { transform: translate(14px, 14px); opacity: 0.28; }
.dd-doc-shot img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
  border: 1px solid var(--color-line);
  /* Zwei Schatten: enge Kontaktkante + weicher Raumschatten */
  box-shadow: 0 2px 6px -1px rgba(11, 32, 39, 0.18), 0 34px 60px -28px rgba(11, 32, 39, 0.5);
  transition: transform 0.3s ease;
}

/* Hub-Karte: Vorschau auf dunklem Panel, wie ein Produktfoto */
.dd-tool-cover {
  position: relative;
  margin: -26px -28px 22px;
  padding: 32px 28px 36px;
  border-radius: 24px 24px 0 0;
  background: var(--color-text);
}
.dd-tool-cover .dd-doc-shot { max-width: 176px; }
.dd-tool-cover .dd-doc-shot::before,
.dd-tool-cover .dd-doc-shot::after { border-color: rgba(255, 255, 255, 0.22); }
.dd-tool-cover .dd-doc-shot::before { opacity: 0.32; }
.dd-tool-cover .dd-doc-shot::after { opacity: 0.16; }
.dd-tool-cover .dd-doc-shot img {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 3px 8px -2px rgba(0, 0, 0, 0.5), 0 30px 54px -20px rgba(0, 0, 0, 0.7);
}
.dd-tool-card:hover .dd-doc-shot img { transform: translateY(-5px); }

.dd-tool-proof-link { margin-top: 26px; }

/* --------------------------------------------------------------------------
   Rechner-Ergebnis
   Das Markup stand laengst, ein Stylesheet dazu fehlte: die Jahressumme rendert
   sonst als 16px-Fliesstext, waehrend der Eingabe-Slider davor 68px gross ist.
   Aufbau in drei Zonen: Ergebnis (die Zahl), Beweis (die Posten), Handlung.
   -------------------------------------------------------------------------- */
.dd-camp-result-label {
  margin: 0;
  font: 400 12px/1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
/* Das Skript setzt den Fokus hierher, damit Screenreader das Ergebnis vorlesen.
   Mit der Maus soll deshalb kein Ring erscheinen (gleiches Muster wie .dd-wiz-title). */
.dd-camp-result-label:focus:not(:focus-visible) { outline: none; }
.dd-camp-result-label:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 4px;
  border-radius: 4px;
}
/* Der Payoff: groesser als jede Eingabe davor, sonst verpufft der Count-up. */
.dd-camp-result-figure {
  margin: 14px 0 0;
  font: 700 clamp(52px, 7vw, 88px)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.dd-camp-result-sub {
  margin: 14px 0 0;
  font: 400 17px/1.6 var(--font-body);
  color: var(--color-text-secondary);
  max-width: 52ch;
}
.dd-camp-result-sub strong { color: var(--color-text); font-weight: 600; }

/* Beweiszone: die Posten belegen die Zahl. Als Bulletliste waren die Werte
   nicht vergleichbar, deshalb zwei Spalten mit gemeinsamer Ziffernbreite. */
.dd-camp-breakdown {
  list-style: none;
  margin: 26px 0 0;
  padding: 4px 0 0;
  border-top: 1px solid var(--color-line);
}
.dd-camp-breakdown li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--color-line);
  font: 400 15.5px/1.5 var(--font-body);
  color: var(--color-text-secondary);
}
.dd-camp-breakdown li span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-text);
  text-align: right;
  white-space: nowrap;
}

/* Anpasszone: eigene Flaeche, damit sie nicht wie Teil des Ergebnisses wirkt. */
.dd-camp-adjust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 26px 0 0;
  padding: 20px;
  background: var(--color-accent-tint);
  border-radius: 16px;
}
.dd-camp-adjust > div { display: grid; gap: 7px; }
.dd-camp-adjust .dd-label { font-size: 13px; }
.dd-camp-adjust .dd-input { font-variant-numeric: tabular-nums; }

/* Annahmen: bisher komplett ungestylt (details/summary kommen sonst nirgends vor) */
.dd-camp-annahmen {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
  font: 400 14.5px/1.6 var(--font-body);
  color: var(--color-text-secondary);
}
.dd-camp-annahmen summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
}
.dd-camp-annahmen summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.dd-camp-annahmen ul { margin: 12px 0 0; padding-left: 20px; }
.dd-camp-annahmen li { margin-top: 5px; }

/* --------------------------------------------------------------------------
   Reduced Motion: harte Schnitte statt Slides
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dd-wiz-card.is-in,
  .dd-wiz-card.is-out,
  .dd-wiz-card.is-in .dd-wiz-fade { animation: none; }
  .dd-wiz-bar { transition: none; }
  .dd-wiz-dot { transition: none; }
  .dd-tool-card { transition: none; }
  .dd-tool-card:hover { transform: none; }
  .dd-tool-cover img { transition: none; }
  .dd-tool-card:hover .dd-tool-cover img { transform: none; }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .dd-camp-split {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .dd-doc-shot { max-width: 300px; }
  /* Mobil: Formular direkt nach dem Kopf, Cover darunter (Referenz-Verhalten) */
  .dd-camp-hero-grid { gap: 36px; }
  .dd-camp-hero-grid .dd-doc-shot { order: 2; }
  .dd-camp-footer-inner { padding: 22px 24px; }
  /* Gratis-Tools-Hub mobil */
  .dd-tool-grid3 { grid-template-columns: 1fr; }
  .dd-tool-featured .dd-split { display: flex; flex-direction: column; gap: 28px; }
  .dd-tool-cover { height: 210px; }
}

@media (max-width: 560px) {
  .dd-wiz-dot-label { display: none; }
  .dd-wiz-dots { margin-bottom: 10px; }
  .dd-camp-adjust { grid-template-columns: 1fr; }
  .dd-camp-value-num { font-size: 40px; }
  .dd-camp-numrow { flex-wrap: wrap; }
  .dd-wiz-actions { flex-wrap: wrap-reverse; }
  .dd-wiz-actions .dd-btn-primary { flex: 1 1 100%; }
  .dd-doc-list li { grid-template-columns: 28px 1fr; }
  .dd-doc-list-meta { display: none; }
}