/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme.
Version: 2.1
Author: klicklabor.de
Author URI: http://www.klicklabor.de
Template: enfold
*/

/* ============================================================
   1. GLOBALE TYPOGRAFIE
   ============================================================ */

body, p, .av-special-font {
  font-family: 'DM Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.av-special-heading {
  font-family: 'Fraunces', serif !important;
}

h1, .av-special-heading-tag {
  font-weight: 400 !important;
}

.special_amp {
  font-family: inherit;
  font-style: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: normal;
  color: inherit !important;
}

/* ============================================================
   2. FONTS (Fraunces + DM Sans selbst gehostet)
   Variable Fonts — konsolidiert (ehemals separate fonts.css).
   Einzige Font-Quelle. Google Fonts in Enfold nicht aktiv
   (per Live-Check 15.07.2026 bestätigt: keine googleapis-Requests).
   ============================================================ */

/* Fraunces Variable — Normal */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/wp-content/themes/enfold-child/fonts/fraunces-latin-opsz-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fraunces Variable — Italic */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/wp-content/themes/enfold-child/fonts/fraunces-latin-opsz-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Sans Variable — Normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/wp-content/themes/enfold-child/fonts/dm-sans-latin-opsz-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   3. FARBPALETTE & GLOBALE VARIABLEN
   ============================================================ */

:root {
  --gf-forest:  #1F3D2F;
  --gf-ochre:   #B57628;
  --gf-red:     #971b1b;
  --gf-teal:    #2F6F73;
  --gf-cream:   #F8F6F0;
  --gf-border:  #E2DCCE;
}

/* ============================================================
   4. EYEBROW / LABEL
   ============================================================ */

.gf-eyebrow p,
.gf-eyebrow {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: #B57628 !important;
  margin-bottom: 16px !important;
}

/* Schulen-spezifisch: Brand Red */
.gf-eyebrow-schulen p,
.gf-eyebrow-schulen {
  color: #971b1b !important;
}

/* Eyebrow auf dunklem Hintergrund */
.gf-eyebrow-light p,
.gf-eyebrow-light {
  color: #E2DCCE !important;
}

/* ============================================================
   5. HEADING-VARIANTEN
   ============================================================ */

/* Schulen H2 */
.gf-h2-schulen .av-special-heading-tag {
  color: #1F3D2F !important;
  font-size: 36px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
}
.gf-h2-schulen .special-heading-border { display: none !important; }

/* B2C H1 (Hero, dunkler Hintergrund) */
.gf-h1-b2c .av-special-heading-tag,
.gf-h1-b2c h1.av-special-heading-tag {
  color: #F8F6F0 !important;
  font-size: 48px !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
}
.gf-h1-b2c .special-heading-border { display: none !important; }

/* B2C H2 (heller Hintergrund) */
.gf-h2-b2c .av-special-heading-tag,
.gf-h2-b2c h2.av-special-heading-tag {
  color: #1F3D2F !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
}
.gf-h2-b2c .special-heading-border { display: none !important; }

/* B2C H2 auf dunklem Hintergrund (CTA-Sektionen) */
.gf-h2-light .av-special-heading-tag,
.gf-h2-light h2.av-special-heading-tag {
  color: #F8F6F0 !important;
  font-size: 34px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
}
.gf-h2-light .special-heading-border { display: none !important; }

/* B2C H3 Kacheln */
.gf-h3-b2c .av-special-heading-tag,
.gf-h3-b2c h3.av-special-heading-tag {
  color: #1F3D2F !important;
  font-size: 20px !important;
  font-weight: 400 !important;
}
.gf-h3-b2c .special-heading-border { display: none !important; }

/* ============================================================
   6. HERO / LEAD
   ============================================================ */

.gf-hero-lead p,
.gf-hero-lead.av_inherit_color p {
  color: #E2DCCE !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
}

/* ============================================================
   7. BUTTONS
   ============================================================ */

/* B2C CTA — Ochre */
.gf-cta-btn .avia-button {
  background: #B57628 !important;
  color: #fff !important;
  border: none !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 14px 32px !important;
}
.gf-cta-btn .avia-button:hover {
  background: #1F3D2F !important;
}

/* Schulen CTA — Brand Red */
.gf-cta-btn-schulen .avia-button {
  background: #971b1b !important;
  color: #fff !important;
  border: none !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 14px 32px !important;
}
.gf-cta-btn-schulen .avia-button:hover {
  background: #1F3D2F !important;
}

/* ============================================================
   8. KACHELN / TILES
   ============================================================ */

.gf-tile-nr p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #B57628 !important;
  margin-bottom: 8px !important;
}

/* ============================================================
   9. SCHULEN-SEITE SPEZIFISCH
   ============================================================ */

/* Zielgruppen-Sektion */
.gf-zielgruppen-section .av-layout-column-title { display: none !important; }

/* AI-Cards B2B */
.flex_column_table .flex_column.gf-ai-card-schulen {
  border-top: 3px solid #971b1b !important;
  border-left: 1px solid #E2DCCE !important;
  padding: 24px 20px !important;
  margin-top: 16px !important;
}

.flex_column_table .flex_column.gf-ai-card-institute {
  border-top: 3px solid #971b1b !important;
  border-left: 1px solid #E2DCCE !important;
  padding: 24px 20px !important;
  margin-top: 16px !important;
}

/* Birne im Hero verkleinern */
.gf-hero-birne img {
  max-width: 60% !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Prozess & Modul-Nummern: Abstand zum Heading */
section:has(.gf-module-nr) + .av-special-heading {
  margin-top: 8px !important;
}

/* ============================================================
   10. PRESSE-SEKTION — Schulen
   ============================================================ */

.gf-presse-section { background: #F8F6F0; }

.gf-presse-section .flex_column.gf-presse-card {
  background: #fff !important;
  border: 1px solid #E2DCCE !important;
  padding: 28px 24px 32px !important;
}

.gf-presse-quelle {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B57628;
  margin: 0 0 14px;
}

.gf-presse-placeholder-video,
.gf-presse-placeholder-img {
  background: #E2DCCE;
  color: #1F3D2F;
  font-size: 14px;
  padding: 20px;
  margin: 0 0 18px;
  min-height: 80px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.gf-presse-headline {
  font-family: 'Fraunces', serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #1F3D2F !important;
  line-height: 1.35;
  margin: 0 0 10px;
}

.gf-presse-card-inner p {
  font-size: 14px;
  line-height: 1.65;
  color: #555;
}

.gf-presse-link {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #B57628;
  text-decoration: underline;
  margin-top: 14px;
}
.gf-presse-link:hover { color: #1F3D2F; }

/* ARD Link underline */
.gf-presse-section a[href*="ardmediathek"] {
  text-decoration: underline !important;
}

/* Weber-Zitat */
.gf-weber-zitat-wrap,
.gf-weber-zitat-wrap .flex_column,
.gf-weber-zitat-wrap .flex_column_table {
  background-color: #1F3D2F !important;
}

.gf-zitat-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px;
  align-items: center;
}

.gf-zitat-foto-placeholder {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(226,220,206,0.25);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: 12px;
  color: rgba(226,220,206,0.55);
  text-align: center;
  line-height: 1.5;
}

.gf-zitat-text {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  color: #F8F6F0 !important;
  border-left: 2px solid #B57628;
  padding-left: 24px;
  margin: 0 0 20px;
}

.gf-zitat-person {
  font-size: 13px;
  color: #E2DCCE !important;
  line-height: 1.6;
  padding-left: 24px;
}

.gf-zitat-person strong { color: #F8F6F0 !important; font-weight: 500; }
.gf-zitat-person em { color: rgba(226,220,206,0.6) !important; font-style: normal; }

@media (max-width: 767px) {
  .gf-zitat-grid { grid-template-columns: 1fr; }
  .gf-zitat-foto-placeholder { min-height: 100px; }
}

/* ============================================================
   11. RESERVIERT
   ============================================================ */

/* .gf-pill { ... } */
/* .gf-pill-dot { ... } */

/* ============================================================
   12. B2C SEGMENT-FARBEN
   ============================================================ */

/* Berufsstarter — Teal-Blau #6B9AB0 */
.gf-hero-berufsstarter .gf-eyebrow p,
.gf-hero-berufsstarter .gf-eyebrow { color: #d4eaf5 !important; }

.gf-hero-berufsstarter .gf-cta-btn .avia-button {
  background: #fff !important;
  color: #6B9AB0 !important;
}
.gf-hero-berufsstarter .gf-cta-btn .avia-button:hover {
  background: #1F3D2F !important;
  color: #fff !important;
}

/* Ladies Edition — Rose #9A6878 */
.gf-hero-ladies .gf-eyebrow p,
.gf-hero-ladies .gf-eyebrow { color: #f5dde5 !important; }

.gf-hero-ladies .gf-cta-btn .avia-button {
  background: #fff !important;
  color: #9A6878 !important;
}
.gf-hero-ladies .gf-cta-btn .avia-button:hover {
  background: #1F3D2F !important;
  color: #fff !important;
}

/* Geschenk — Salbeigrün #7A9E88 */
.gf-hero-geschenk .gf-eyebrow p,
.gf-hero-geschenk .gf-eyebrow { color: #e0f0e6 !important; }

.gf-hero-geschenk .gf-cta-btn .avia-button {
  background: #fff !important;
  color: #7A9E88 !important;
}
.gf-hero-geschenk .gf-cta-btn .avia-button:hover {
  background: #1F3D2F !important;
  color: #fff !important;
}

/* ============================================================
   13. ÜBER RITA — Zitat
   ============================================================ */

/* Zitat — allgemein (Startseite, heller Hintergrund) */
.gf-quote p {
  font-family: 'Fraunces', serif !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.55 !important;
  color: #1F3D2F !important;
  text-align: center !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}

/* Zitat — auf dunklem Hintergrund (Über Rita Seite) */
.gf-rita-section .gf-quote p {
  color: #F8F6F0 !important;
}

/* ============================================================
   14. STARTSEITE — Inhalte/Preise Sektion (gf-rita-section)
   ============================================================ */

.gf-rita-section h2.av-special-heading-tag,
.gf-rita-section .av-special-heading-tag {
  color: #F8F6F0 !important;
}

.gf-rita-section .special-heading-border {
  display: none !important;
}

.gf-rita-section .gf-section-label p {
  color: #B57628 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

.gf-rita-section .avia_textblock p {
  color: #E2DCCE !important;
}

.gf-rita-section .avia-button.avia-color-theme-color {
  background: #B57628 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
}

.gf-rita-section .avia-button.avia-color-theme-color:hover {
  background: #F8F6F0 !important;
  color: #1F3D2F !important;
}


/* ============================================================
   15. B2C CTA-SEKTIONEN — Segment-Buttons
   ============================================================ */

/* Berufsstarter (ID 211) */
.page-id-211 [aria-label="CTA"] .gf-cta-btn .avia-button {
  background: #6B9AB0 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
}
.page-id-211 [aria-label="CTA"] .gf-cta-btn .avia-button:hover {
  background: #fff !important;
  color: #6B9AB0 !important;
}

/* Frauen im Umbruch / Ladies Edition (ID 220) */
.page-id-220 [aria-label="CTA"] .gf-cta-btn .avia-button {
  background: #9A6878 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
}
.page-id-220 [aria-label="CTA"] .gf-cta-btn .avia-button:hover {
  background: #fff !important;
  color: #9A6878 !important;
}

/* Geschenk-Idee (ID 223) */
.page-id-223 [aria-label="CTA"] .gf-cta-btn .avia-button {
  background: #7A9E88 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
}
.page-id-223 [aria-label="CTA"] .gf-cta-btn .avia-button:hover {
  background: #fff !important;
  color: #7A9E88 !important;
}

/* ============================================================
   16. B2C CTA-SEKTIONEN — Button linksbündig
   ============================================================ */

.page-id-211 [aria-label="CTA"] .avia-button-wrap,
.page-id-220 [aria-label="CTA"] .avia-button-wrap,
.page-id-223 [aria-label="CTA"] .avia-button-wrap {
  text-align: left !important;
}


/* ============================================================
   17. STARTSEITE — Weiße Boxen (KI/Rita + Modul-Karten)
   ============================================================ */

/* Weiße Boxen auf allen Seiten — Presse-Karten ausgenommen */
.flex_column.gf-ai-card:not(.gf-presse-card) {
  background: #fff !important;
  border: 1px solid #E2DCCE !important;
  padding: 28px 24px !important;
}

/* ============================================================
   18. STARTSEITE — Preiskalkulation-Satz
   ============================================================ */

.gf-preiskalkulation p,
.gf-preiskalkulation {
  font-family: 'Fraunces', serif !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: #B57628 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  padding: 24px 0 !important;
  border-top: 1px solid #E2DCCE !important;
  border-bottom: 1px solid #E2DCCE !important;
  margin: 24px 0 !important;
  max-width: 100% !important;
}

/* ============================================================
   19. STARTSEITE — HERO (Redesign: Text links, Rita rechts)
   ============================================================ */

.gf-hero-startseite { background: var(--gf-cream); padding: 64px 0; }

.gf-hero-startseite .gf-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(0,0.88fr);
  gap: 56px;
  align-items: stretch;
}

/* Textspalte */
.gf-hero-text { display: flex; flex-direction: column; justify-content: center; }

.gf-hero-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 500; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gf-ochre); margin: 0 0 18px;
}

.gf-hero-title {
  font-family: 'Fraunces', serif !important;
  font-weight: 400 !important;
  font-size: 46px !important;
  line-height: 1.06 !important;
  letter-spacing: -0.01em;
  color: var(--gf-forest) !important;
  margin: 0 0 18px !important;
}
.gf-hero-title em { font-style: italic; color: var(--gf-ochre); }

.gf-hero-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px; font-weight: 300; line-height: 1.6;
  color: #4a584d; max-width: 460px; margin: 0 0 28px;
}

/* Stats */
.gf-hero-stats { display: flex; align-items: flex-start; margin: 0 0 30px; }
.gf-hero-stats .gf-hs {
  padding-right: 26px; margin-right: 26px; border-right: 1px solid var(--gf-border);
}
.gf-hero-stats .gf-hs:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.gf-hs-n {
  display: block; font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 26px; line-height: 1; color: var(--gf-forest);
}
.gf-hs-l {
  display: block; font-family: 'DM Sans', sans-serif; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: #8a978d; margin-top: 6px;
}

/* CTA */
.gf-hero-cta { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; flex-wrap: wrap; }
.gf-hero-cta .gf-btn-primary {
  background: var(--gf-ochre); color: #fff !important; font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 15px 30px; text-decoration: none !important; transition: background .2s ease;
}
.gf-hero-cta .gf-btn-primary:hover { background: var(--gf-forest); color: #fff !important; }
.gf-hero-cta .gf-btn-ghost {
  color: var(--gf-forest); font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 15px 26px; text-decoration: none; border: 1px solid var(--gf-border);
  transition: border-color .2s ease;
}
.gf-hero-cta .gf-btn-ghost:hover { border-color: var(--gf-forest); }

/* Trust */
.gf-hero-trust {
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: #5b6f63; margin: 0;
}
.gf-hero-trust span { color: var(--gf-ochre); margin: 0 4px; }

/* Bildspalte */
.gf-hero-media {
  position: relative; min-height: 480px; border-radius: 6px;
  overflow: hidden; background: var(--gf-border);
}
.gf-hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%; display: block;
}
.gf-hero-media-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 22px 20px;
  background: linear-gradient(to top, rgba(31,61,47,0.82), rgba(31,61,47,0));
}
.gf-cap-name {
  display: block; font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 19px; color: #fff; line-height: 1.1;
}
.gf-cap-role {
  display: block; font-family: 'DM Sans', sans-serif; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #d7e0d7; margin-top: 6px;
}

/* Responsive */
@media (max-width: 989px) {
  .gf-hero-startseite { padding: 0 0 40px; }
  .gf-hero-startseite .gf-hero-inner { grid-template-columns: 1fr; gap: 28px; padding: 0; }
  .gf-hero-media {
    min-height: 0; height: 46vh; max-height: 460px; border-radius: 0;
  }
  .gf-hero-media img { object-position: center 22%; }
  .gf-hero-text { padding: 0 26px; }
  .gf-hero-title { font-size: 38px !important; }
}
@media (max-width: 768px) {
  .gf-hero-media { height: 40vh; }
  .gf-hero-title { font-size: 32px !important; }
  .gf-hero-sub { font-size: 15px; }
  .gf-hero-stats .gf-hs { padding-right: 18px; margin-right: 18px; }
  .gf-hs-n { font-size: 22px; }
}

/* Anker-Offset: Sprungziel unter dem Sticky-Header positionieren */
#weg { scroll-margin-top: 50px; }

/* ============================================================
   20. STARTSEITE — Hero Secondary-Button + Anker + Zielgruppen-H2
   ============================================================ */

/* Ghost-Button härten: Enfold überschreibt sonst die Link-Farbe.
   Optische Gleichwertigkeit zum Primary durch Forest-Outline. */
.gf-hero-cta a.gf-btn-ghost,
.gf-hero-cta a.gf-btn-ghost:link,
.gf-hero-cta a.gf-btn-ghost:visited {
  display: inline-block;
  line-height: 1.2;
  border: 1px solid var(--gf-forest);
  color: var(--gf-forest) !important;
  background: transparent;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gf-hero-cta a.gf-btn-ghost:hover,
.gf-hero-cta a.gf-btn-ghost:focus {
  background: var(--gf-forest);
  border-color: var(--gf-forest);
  color: #fff !important;
}

/* Primary optisch auf gleiche Höhe bringen (1px Border des Ghost ausgleichen) */
.gf-hero-cta a.gf-btn-primary {
  display: inline-block;
  line-height: 1.2;
  border: 1px solid var(--gf-ochre);
}
.gf-hero-cta a.gf-btn-primary:hover {
  border-color: var(--gf-forest);
}

/* Zweiter Anker: „Für wen ist das?" → Zielgruppen-Sektion */
#wen { scroll-margin-top: 50px; }

/* Übergeordnete Headline über den fünf Einsatzbereichen */
.gf-zielgruppen-h2 .av-special-heading-tag,
.gf-zielgruppen-h2 h2.av-special-heading-tag {
  font-family: 'Fraunces', serif !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--gf-forest) !important;
  margin: 0 0 8px !important;
}
.gf-zielgruppen-h2 .special-heading-border { display: none !important; }

/* Mobil: CTAs volle Breite, sauber gestapelt */
@media (max-width: 600px) {
  .gf-hero-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .gf-hero-cta a.gf-btn-primary,
  .gf-hero-cta a.gf-btn-ghost { text-align: center; }
}

/* ============================================================
   21. SEKTIONS-LABELS + POSITIONIERUNGS-SEKTION ABGRENZEN
   ============================================================ */

/* Section-Labels waren ausserhalb von .gf-rita-section komplett ungestylt
   ("Fuer Privatpersonen" erschien als schwarzer Fliesstext). */
.gf-section-label p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #8a978d !important;   /* gedaempft: darf die Kachel-Eyebrows nicht ueberstrahlen */
  margin: 0 !important;
}

/* Gruppen-Label unter der H2: Luft nach oben, kein Kleben an der Headline */
.gf-zielgruppen-section .gf-section-label,
.gf-positionierung .gf-section-label {
  margin-top: 14px !important;
}

/* Positionierung / KI-Zeitalter: eigene Buehne.
   Weisse Flaeche statt Creme -> klare Kante zum Zielgruppen-Block darueber.
   !important, weil Enfold custom_bg als Inline-Style rendert. */
.gf-positionierung {
  background: #fff !important;
  border-top: 1px solid var(--gf-border);
  border-bottom: 1px solid var(--gf-border);
}

/* Karten invertieren: Creme auf Weiss statt Weiss auf Creme */
.gf-positionierung .flex_column.gf-ai-card:not(.gf-presse-card) {
  background: var(--gf-cream) !important;
  border-color: var(--gf-border) !important;
}

/* Intro-Absatz unter der Headline etwas ruhiger stellen */
.gf-positionierung .gf-section-intro p {
  font-size: 17px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: #4a584d !important;
  max-width: 720px !important;
}

/* ============================================================
   22. ZIELGRUPPEN + POSITIONIERUNG — Vertikalen Rhythmus schliessen
   ============================================================ */

/* Enfold addiert hier zwei Abstaende: Bottom-Margin des Label-Textblocks
   + Top-Margin der Equal-Height-Spalten. Beide auf null, dann einen
   einzigen, definierten Abstand setzen. */

.gf-zielgruppen-section .gf-section-label,
.gf-positionierung .gf-section-label {
  margin-bottom: 0 !important;
}
.gf-zielgruppen-section .gf-section-label .avia_textblock,
.gf-positionierung .gf-section-label .avia_textblock {
  margin: 0 !important;
  padding: 0 !important;
}

/* Spalten-Container: Enfolds Default-Vorlauf entfernen */
.gf-zielgruppen-section .flex_column_table,
.gf-zielgruppen-section .flex_column,
.gf-positionierung .flex_column_table,
.gf-positionierung .flex_column {
  margin-top: 0 !important;
}

/* Der eine, bewusst gesetzte Abstand Label -> Kacheln */
.gf-zielgruppen-section .flex_column_table,
.gf-zielgruppen-section > .entry-content-wrapper > .flex_column,
.gf-positionierung .flex_column_table {
  margin-top: 34px !important;
}

/* Erstes Element in der Kachel darf keinen eigenen Vorlauf mitbringen */
.gf-zielgruppen-section .flex_column > *:first-child,
.gf-positionierung .flex_column > *:first-child {
  margin-top: 0 !important;
}

/* Eyebrow -> Kachel-Headline enger fassen */
.gf-zielgruppen-section .gf-eyebrow p,
.gf-zielgruppen-section .gf-eyebrow {
  margin-bottom: 10px !important;
}
.gf-zielgruppen-section .av-special-heading {
  margin-top: 0 !important;
  padding-bottom: 6px !important;
}

/* ============================================================
   23. MODUL-NUMMERN + PREISKACHELN
   ============================================================ */

/* Modul-Nummern (01-06) waren vollstaendig ungestylt -> Fliesstext */
.gf-module-nr p,
.gf-module-nr {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  color: var(--gf-ochre) !important;
  margin: 0 0 10px !important;
}

/* Preis: das wichtigste Element der Kachel, bisher kleiner als der Fliesstext */
.gf-price p,
.gf-price {
  font-family: 'Fraunces', serif !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--gf-forest) !important;
  margin: 4px 0 14px !important;
}

/* Leistungsliste: bewusst leise, klare Zeilenfuehrung */
.gf-price-features p,
.gf-price-features {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  color: #6a776d !important;
  margin: 0 0 20px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--gf-border) !important;
}

/* ============================================================
   24. BILDUNGSINSTITUTE (ID 96) — Hero-Abstand + Bildflaechen
   ============================================================ */

/* H1 lief ohne Abstand in die Subline.

   URSACHE: Enfold floatet das H1 (heading.css: .av-special-heading-tag
   { float: left }) und clearet den Float ueber das nachfolgende
   .special-heading-border-Div. Wird dieses Div ausgeblendet, enthaelt der
   Wrapper den Float nicht mehr, kollabiert auf Hoehe 0 und jedes
   padding/margin laeuft ins Leere.

   FIX: display:flow-root am Wrapper -> schliesst den Float ein.
   Erst dann wirkt padding-bottom. */
.av-special-heading.av-special-heading-h1 {
  display: flow-root !important;
  padding-bottom: 28px !important;
  margin-bottom: 0 !important;
}
.av-special-heading.av-special-heading-h1 .av-special-heading-tag {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.15 !important;
}

/* Trenner darf jetzt weg, der Float wird vom Wrapper gehalten */
.av-special-heading-h1 .special-heading-border {
  display: none !important;
}

/* Folgender Textblock startet auf eigener Zeile */
.av-special-heading.av-special-heading-h1 + .av_textblock_section {
  clear: both;
}

/* Erster Absatz im Textblock ohne eigenen Vorlauf */
#Hero .avia_textblock > p:first-child {
  margin-top: 0 !important;
}

/* Fotos wurden von .gf-hero-birne auf 60% gekappt (Klasse stammt aus dem
   alten Logo-Kontext). Auf Seite 96 volle Spaltenbreite. */
.page-id-96 .gf-hero-birne img {
  max-width: 100% !important;
  width: 100% !important;
  border-radius: 4px;
  display: block !important;
}

/* Presse-Galerie: Thumbnails erschienen ausgewaschen und ohne Rahmen */
.gf-presse-section .avia-gallery img {
  border: 1px solid var(--gf-border) !important;
  border-radius: 2px;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
}
.gf-presse-section .avia-gallery-thumb {
  margin-top: 16px;
}

/* ============================================================
   25. BERUFSSTARTER (ID 211) — Segmentfarbe + Prozess-Outro
   ============================================================ */

/* Rita 6.2: Modulkacheln in der Zielgruppenfarbe akzentuieren.
   Segmentfarbe Berufsstarter = #6B9AB0.

   Robuster Anker: die gf-berufsstarter-Klasse am Modulbereich statt
   aria-label (das Enfold nicht zuverlaessig ins Frontend rendert).
   Setze dazu custom_class='gf-seg-berufsstarter' an der Modul-Section. */
.gf-seg-berufsstarter .gf-module-nr p,
.gf-seg-berufsstarter .gf-module-nr,
.page-id-211 .gf-module-nr p,
.page-id-211 .gf-module-nr {
  color: #6B9AB0 !important;
}

/* Schmaler vertikaler Streifen an den Modulkacheln */
.gf-seg-berufsstarter .flex_column.gf-ai-card,
.page-id-211 [aria-label="Inhalte-Preise"] .flex_column.gf-ai-card {
  border-left: 3px solid #6B9AB0 !important;
}

/* Prozess-Abschlusssatz zentriert und ruhig abgesetzt */
.gf-how-outro .avia_textblock {
  text-align: center;
  max-width: 640px;
  margin: 32px auto 0 !important;
  font-style: italic;
  color: #4a584d;
}

/* ============================================================
   26. LADIES-EDITION (ID 220) — Segmentfarbe Rosé #9A6878
   ============================================================ */

/* Rita 7.3: Modulkacheln in der Zielgruppenfarbe akzentuieren.
   Anker: gf-seg-ladies an der Modul-Section (nicht page-id/aria-label). */
.gf-seg-ladies .gf-module-nr p,
.gf-seg-ladies .gf-module-nr,
.page-id-220 .gf-module-nr p,
.page-id-220 .gf-module-nr {
  color: #9A6878 !important;
}

/* Schmaler vertikaler Streifen an den Modulkacheln */
.gf-seg-ladies .flex_column.gf-ai-card {
  border-left: 3px solid #9A6878 !important;
}

/* ============================================================
   27. GESCHENKIDEE (ID 223) — Segmentfarbe Salbei + Statement
   ============================================================ */

/* Rita 8.2: Modulkacheln in Zielgruppenfarbe (Salbeigrün #7A9E88) */
.gf-seg-geschenk .gf-module-nr p,
.gf-seg-geschenk .gf-module-nr,
.page-id-223 .gf-module-nr p,
.page-id-223 .gf-module-nr {
  color: #7A9E88 !important;
}
.gf-seg-geschenk .flex_column.gf-ai-card {
  border-left: 3px solid #7A9E88 !important;
}

/* Modul-Vertrauenszeile (Rita 8.2): leise, mittig unter der Subline */
.gf-modul-trust p,
.gf-modul-trust {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #8a978d !important;
  margin: 6px 0 0 !important;
}

/* Warum 8.1: Zusatz (klein unter Headline) + Subline (Lead) */
.gf-zusatz p,
.gf-zusatz {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: #7A9E88 !important;
  margin: 0 0 14px !important;
}
.gf-subline p,
.gf-subline {
  font-family: 'Fraunces', serif !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  color: #1F3D2F !important;
  margin: 0 0 24px !important;
}

/* Statement 8.3: markanter Forest-Block mit Kompass-Emblem */
.gf-statement {
  text-align: center;
}
.gf-statement .gf-compass {
  display: flex;
  justify-content: center;
  margin: 0 0 24px !important;
}
.gf-statement .gf-compass svg { display: block; }

.gf-statement-h2 .av-special-heading-tag,
.gf-statement-h2 h2.av-special-heading-tag {
  font-family: 'Fraunces', serif !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.45 !important;
  color: #F8F6F0 !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.gf-statement-h2 .special-heading-border { display: none !important; }

.gf-statement-sub p,
.gf-statement-sub {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: #B5C4B8 !important;
  margin: 20px auto 0 !important;
  text-align: center !important;
}

/* ============================================================
   28. ÜBER RITA (ID 145) — Hero-Subtext + Bio-Textmaß
   ============================================================ */

/* Bio "Wer ich bin": volle Spaltenbreite war zu breit (~110 Zeichen/Zeile).
   Auf lesbares Maß begrenzen, linksbündig unter der Headline. */
.page-id-145 [aria-label="WER ICH BIN"] .avia_textblock {
  max-width: 720px !important;
}
.page-id-145 [aria-label="WER ICH BIN"] .av-special-heading {
  max-width: 720px !important;
}
.page-id-145 [aria-label="WER ICH BIN"] .hr-invisible,
.page-id-145 [aria-label="WER ICH BIN"] .avia-divider-wrap {
  max-width: 720px !important;
  margin-left: 0 !important;
}

/* Enfold-Textblock rendert den Text in einem inneren <p>, das die
   globale Absatz-Typografie erbt. gf-hero-sub muss daher auch das <p>
   treffen, sonst weicht Schriftschnitt/Groesse vom Startseiten-Hero ab. */
.avia_textblock.gf-hero-sub p,
.gf-hero-sub p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: #4a584d !important;
}

/* ============================================================
   29. VISUELLE ANKER — Trenner, Ziffern, Zitatband
   Rita-Feedback: Unterseiten brauchen Ruhepunkte in langen
   Textstrecken. Bewusst drei Elemente, kein Bebilderungssystem.
   ============================================================ */

/* --- 29.1 Kompass-Trenner -----------------------------------
   Zaesur zwischen Sinnabschnitten. Markup: Code-Block enthaelt
   nur das SVG, die Haarlinien kommen aus CSS. */

.gf-trenner {
  display: flex !important;
  align-items: center;
  gap: 16px;
  margin: 8px 0 34px !important;
}
.gf-trenner::before,
.gf-trenner::after {
  content: '' !important;
  visibility: visible !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important;
  height: 1px !important;
  background: var(--gf-border);
}
.gf-trenner svg {
  display: block;
  flex: 0 0 auto;
}

/* Auf dunklem Grund (Forest-Sektionen) */
.gf-trenner-light::before,
.gf-trenner-light::after {
  background: rgba(226,220,206,0.28);
}

/* --- 29.2 Ziffern-Wasserzeichen -----------------------------
   Grosse Fraunces-Ziffer als stille Flaeche in Modul- und
   Prozesskacheln. Klasse gf-wm-01 ... gf-wm-06 zusaetzlich zu
   gf-ai-card an der Spalte setzen. */

.flex_column.gf-ai-card[class*='gf-wm-'] {
  position: relative !important;
  overflow: hidden !important;
}

/* WICHTIG: Enfold definiert .flex_column::before selbst (Clearfix-
   Mechanik) und setzt dort visibility:hidden plus Nullmasse. Wird
   das hier nicht explizit ueberschrieben, ist die Ziffer zwar im
   DOM und korrekt eingefaerbt, aber unsichtbar. */
.flex_column[class*='gf-wm-']::before {
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  position: absolute;
  right: 14px;
  top: -6px;
  font-family: 'Fraunces', serif;
  font-size: 78px;
  font-weight: 500;
  line-height: 1;
  color: var(--gf-ochre);
  opacity: 0.15;
  pointer-events: none;
  user-select: none;
}

.flex_column.gf-wm-01::before { content: '01'; }
.flex_column.gf-wm-02::before { content: '02'; }
.flex_column.gf-wm-03::before { content: '03'; }
.flex_column.gf-wm-04::before { content: '04'; }
.flex_column.gf-wm-05::before { content: '05'; }
.flex_column.gf-wm-06::before { content: '06'; }

/* Segmentfarben uebernehmen die Ziffer mit.
   Deckkraft je Farbe nachjustiert: die hellen Segmentfarben
   verschwinden bei gleicher Opacity, die das Ocker noch traegt.
   Berufsstarter und Geschenk sind am hellsten -> hoechster Wert. */
.gf-seg-berufsstarter .flex_column[class*='gf-wm-']::before,
.page-id-211 .flex_column[class*='gf-wm-']::before {
  color: #6B9AB0;
  opacity: 0.26;
}

.gf-seg-ladies .flex_column[class*='gf-wm-']::before,
.page-id-220 .flex_column[class*='gf-wm-']::before {
  color: #9A6878;
  opacity: 0.22;
}

.gf-seg-geschenk .flex_column[class*='gf-wm-']::before,
.page-id-223 .flex_column[class*='gf-wm-']::before {
  color: #7A9E88;
  opacity: 0.26;
}

/* Inhalt muss ueber der Ziffer liegen */
.flex_column[class*='gf-wm-'] > * {
  position: relative;
  z-index: 1;
}

/* Mobil: Ziffer kleiner, sonst dominiert sie die schmale Kachel */
@media (max-width: 767px) {
  .flex_column[class*='gf-wm-']::before {
    font-size: 56px;
    right: 10px;
  }
}

/* --- 29.3 Zitatband -----------------------------------------
   Einmal pro Unterseite, mittig in der laengsten Textstrecke.
   Staerkste Zaesur, weil Farbflaechenwechsel. */

.gf-zitatband {
  background: var(--gf-forest) !important;
}

.gf-zitatband .gf-zitatband-text p,
.gf-zitatband-text p {
  font-family: 'Fraunces', serif !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  color: #F8F6F0 !important;
  border-left: 2px solid var(--gf-ochre) !important;
  padding-left: 24px !important;
  margin: 0 !important;
  max-width: 760px !important;
}

.gf-zitatband .gf-zitatband-autor p,
.gf-zitatband-autor p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #B5C4B8 !important;
  padding-left: 26px !important;
  margin: 16px 0 0 !important;
}

/* Segment-Varianten: Akzentlinie in der Zielgruppenfarbe */
.gf-zitatband-berufsstarter .gf-zitatband-text p { border-left-color: #6B9AB0 !important; }
.gf-zitatband-ladies       .gf-zitatband-text p { border-left-color: #9A6878 !important; }
.gf-zitatband-geschenk     .gf-zitatband-text p { border-left-color: #7A9E88 !important; }

@media (max-width: 767px) {
  .gf-zitatband .gf-zitatband-text p,
  .gf-zitatband-text p {
    font-size: 20px !important;
    padding-left: 18px !important;
  }
  .gf-zitatband .gf-zitatband-autor p,
  .gf-zitatband-autor p { padding-left: 20px !important; }
}

/* ============================================================
   30. ANGEBOTSBLOCK (Einzelpreis, Segmentseiten)
   Preis wandert von der Startseite auf die jeweilige
   Segmentseite. Nicht das 3-Spalten-Raster der Startseite,
   sondern EIN Preis, EIN Moment: zentrierte Karte, vor dem
   Abschluss-CTA. Rahmungssatz macht die Zahl klein, bevor
   sie genannt wird.
   ============================================================ */

.gf-angebot { text-align: center; }

/* Zentrierte Karte. max-width + Enfold-Spaltenlayout entkoppeln,
   damit die volle Spalte nicht die ganze Breite einnimmt. */
.gf-angebot .gf-angebot-inner {
  max-width: 560px !important;
  width: 100% !important;
  margin: 0 auto !important;
  float: none !important;
  display: block !important;
  background: #fff !important;
  border: 1px solid var(--gf-border) !important;
  border-top: 3px solid var(--gf-ochre) !important;
  padding: 40px 40px 44px !important;
}

/* Rahmungssatz ueber dem Preis */
.gf-angebot .gf-angebot-frame p,
.gf-angebot .gf-angebot-frame {
  font-family: 'Fraunces', serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  color: var(--gf-ochre) !important;
  text-align: center !important;
  margin: 0 0 22px !important;
}

/* Preis: der Fokus. Groesser als in den Startseiten-Kacheln. */
.gf-angebot .gf-price p,
.gf-angebot .gf-price {
  font-family: 'Fraunces', serif !important;
  font-size: 46px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--gf-forest) !important;
  text-align: center !important;
  margin: 0 0 8px !important;
}

/* Leistungsliste: leise, mittig, ohne die Sektion-23-Trennlinie */
.gf-angebot .gf-price-features p,
.gf-angebot .gf-price-features {
  border-top: none !important;
  padding-top: 0 !important;
  text-align: center !important;
  max-width: 440px !important;
  margin: 0 auto 30px !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: #6a776d !important;
}

/* Button zentriert */
.gf-angebot .avia-button-wrap { text-align: center !important; }

/* Segment-Varianten: Akzentkante + Rahmungssatz in Segmentfarbe,
   damit der Block in der Farbwelt der jeweiligen Seite bleibt. */
.gf-angebot-berufsstarter .gf-angebot-inner { border-top-color: #6B9AB0 !important; }
.gf-angebot-berufsstarter .gf-angebot-frame p { color: #6B9AB0 !important; }

.gf-angebot-ladies .gf-angebot-inner { border-top-color: #9A6878 !important; }
.gf-angebot-ladies .gf-angebot-frame p { color: #9A6878 !important; }

.gf-angebot-geschenk .gf-angebot-inner { border-top-color: #7A9E88 !important; }
.gf-angebot-geschenk .gf-angebot-frame p { color: #7A9E88 !important; }

@media (max-width: 767px) {
  .gf-angebot .gf-angebot-inner { padding: 32px 24px 36px !important; }
  .gf-angebot .gf-price p,
  .gf-angebot .gf-price { font-size: 38px !important; }
}

/* ============================================================
   31. KONTAKTFORMULAR (B2B, Forest-Grund)
   Enfold-Ajax-Formular direkt auf Forest. Helle Felder,
   sichtbare Labels in Creme, Teal-Button (B2B-Akzentfarbe).
   Voraussetzung im Formular-Element:
   - "Labels ausblenden" DEAKTIVIEREN (sonst Label = Placeholder)
   - custom_class 'gf-form' setzen
   ============================================================ */

/* Feldabstand: Enfold rendert jedes Feld in einem <p> */
.gf-form form p,
.gf-form.avia_ajax_form p,
.gf-form .avia_ajax_form p { margin-bottom: 18px !important; }

/* Labels sichtbar, Creme auf Forest */
.gf-form label {
  display: block !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: var(--gf-border) !important;
  margin-bottom: 7px !important;
  text-transform: none !important;
}

/* Felder: hell, groesser als Enfold-Default, ruhig */
.gf-form input.text_input,
.gf-form textarea.text_area,
.gf-form input[type=text],
.gf-form input[type=email],
.gf-form textarea {
  background: #F8F6F0 !important;
  border: 1px solid rgba(226,220,206,0.45) !important;
  border-radius: 0 !important;
  color: #1F3D2F !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  padding: 14px 16px !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  transition: border-color .2s ease, background .2s ease !important;
}

.gf-form textarea.text_area,
.gf-form textarea { min-height: 140px !important; }

/* Placeholder gedaempft (falls doch gesetzt) */
.gf-form ::placeholder { color: #8a978d !important; opacity: 1 !important; }

/* Fokus: Teal-Kante, Feld wird rein weiss */
.gf-form input.text_input:focus,
.gf-form textarea.text_area:focus,
.gf-form input[type=text]:focus,
.gf-form input[type=email]:focus,
.gf-form textarea:focus {
  border-color: #2F6F73 !important;
  background: #FFFFFF !important;
  outline: none !important;
}

/* Submit: Teal (B2B-Akzent), Marken-Kante */
.gf-form .button,
.gf-form input[type=submit] {
  background: #2F6F73 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 16px 34px !important;
  width: auto !important;
  transition: background .2s ease, color .2s ease !important;
}
.gf-form .button:hover,
.gf-form input[type=submit]:hover {
  background: #F8F6F0 !important;
  color: #1F3D2F !important;
}

/* Pflichtfeld-Stern in Teal, dezent */
.gf-form label abbr,
.gf-form abbr { color: #2F6F73 !important; text-decoration: none !important; border: none !important; }

/* Formular-Ueberschrift: Enfold rendert sie als <h3> im Formular,
   in Forest -> auf Forest-Grund unsichtbar. Auf Creme heben. */
.gf-form h3 {
  color: #F8F6F0 !important;
  font-family: 'Fraunces', serif !important;
  font-weight: 400 !important;
  margin-bottom: 24px !important;
}