.elementor-5044 .elementor-element.elementor-element-14a9abe{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS *//* =========================================================================
   VdH Donaueschingen — Design-Komponenten (Phase 1, PRO SEITE)
   Einbau: NUR auf Seiten, die auf das neue Design umgestellt werden.
   Elementor-Seiteneditor öffnen → Symbol unten links → Reiter „Erweitert"
   → Feld „Custom CSS" (Elementor Pro) → diesen kompletten Inhalt einfügen.

   NICHT in die sitenweiten Website-Einstellungen einfügen, solange der
   Umstieg noch läuft — sonst ändert sich sofort das Aussehen aller
   Seiten, auch der noch nicht überarbeiteten. Voraussetzung: die Datei
   design-tokens-global.css ist bereits sitenweit eingefügt (liefert die
   --vdh-* Variablen, die hier verwendet werden).

   Sobald ALLE Seiten umgestellt sind: diesen Inhalt einmalig in die
   sitenweiten Website-Einstellungen → Custom CSS verschieben und von den
   einzelnen Seiten wieder entfernen — einfacher zu pflegen als 12x
   dieselbe Kopie.
   ========================================================================= */

body{ background: var(--vdh-fog); }

/* -------------------------------------------------------------------------
   1. Buttons — bestehende Pillenform beibehalten, nur neu eingefärbt.
   ------------------------------------------------------------------------- */
.elementor-button, .elementor-button-wrapper .elementor-button{
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  border-radius: 100px !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.elementor-button:hover{ transform: translateY(-1px); }

.elementor-button.vdh-btn-primary{
  background-color: var(--vdh-marigold) !important;
  color: var(--vdh-marigold-ink) !important;
}
.vdh-btn-outline{
  background: transparent !important;
  color: var(--vdh-moss) !important;
  border: 1.5px solid var(--vdh-moss) !important;
}
.vdh-btn-ghost{
  background: transparent !important;
  color: #EEF0F8 !important;
  border: 1.5px solid rgba(238, 240, 248, 0.4) !important;
}

/* -------------------------------------------------------------------------
   2. Tags / Labels — für Kategorien wie "Nasenarbeit", "Prüfung" etc.
   Klasse "vdh-tag" (bzw. "vdh-tag vdh-tag-rope") im Erweitert-Tab des
   jeweiligen Text-Widgets eintragen.
   ------------------------------------------------------------------------- */
.vdh-tag{
  display: inline-flex;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--vdh-fog);
  color: var(--vdh-moss);
  border: 1px solid var(--vdh-line);
}
.vdh-tag-rope{
  background: color-mix(in srgb, var(--vdh-rope) 16%, var(--vdh-parchment));
  color: var(--vdh-marigold-ink);
  border-color: transparent;
}

/* -------------------------------------------------------------------------
   3. Signpost-Karten — für "Unser Angebot"-Raster auf der Startseite.
   Klasse "vdh-signpost" auf den Karten-Container.
   ------------------------------------------------------------------------- */
.vdh-signpost{
  background: var(--vdh-surface);
  border: 1px solid var(--vdh-line);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  padding: 20px 18px 18px;
  box-shadow: var(--vdh-shadow);
}

/* -------------------------------------------------------------------------
   4. Dunkle Bänder — für "Warum wir", Hero, Footer-nahe Abschnitte.
   Klasse "vdh-band-moss" auf die jeweilige Elementor-Section/Container.
   ------------------------------------------------------------------------- */
.vdh-band-moss{
  background: var(--vdh-moss-deep) !important;
  color: #EEF0F8;
}
.vdh-band-moss h1, .vdh-band-moss h2, .vdh-band-moss h3, .vdh-band-moss h4{
  color: #F1F3FA !important;
}
.vdh-band-moss p{ color: #C9CEDE; }

/* -------------------------------------------------------------------------
   5. Eyebrow-Label (kleine Überschrift über H1/H2). Klasse "vdh-eyebrow".
   ------------------------------------------------------------------------- */
.vdh-eyebrow{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--vdh-rope);
}
.vdh-band-moss .vdh-eyebrow{ color: var(--vdh-marigold); }

/* -------------------------------------------------------------------------
   6. Fokus-Zustände — Tastatur-Bedienbarkeit für Buttons/Links.
   ------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible, .elementor-button:focus-visible{
  outline: 2px solid var(--vdh-moss);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .elementor-button, .elementor-button:hover{ transition: none !important; transform: none !important; }
}/* End custom CSS */