/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 28 2026 | 12:30:03 */
/* Füge hier Dein eigenes CSS ein */
#quadmenu.quadmenu-divi .widget a, #quadmenu.quadmenu-divi .widget ul li {
    font-family: Open Sans;
    font-size: 13px;
    font-weight: 600;
	line-height: 1.4em;
       letter-spacing: inherit;
}
.meinenu li.quadmenu-item > a{
	 font-family: Open Sans;
    font-size: 12px;
    font-weight: 600;
       letter-spacing: inherit;
}
#quadmenu.quadmenu-divi .quadmenu-navbar-nav .quadmenu-dropdown-menu li.quadmenu-item > a > .quadmenu-item-content {
/*    color: #3b6ccb; */
	 font-size: 14px;
	line-height: 1.2em;
	padding: 0px 0px 15px 0px;
    text-transform: none;
}
/* Subtitle unter dem Hauptmenu*/
#quadmenu.quadmenu-divi .quadmenu-navbar-nav > li:not(.quadmenu-item-type-button) > a > .quadmenu-item-content > .quadmenu-subtitle {
    color: #0066FF;
	  font-size: 14px;
	font-weight: normal;
}
/* Texte und Subtitel in Submenüs */
#quadmenu.quadmenu-divi 
{
    background-color: transparent;
	color: #364e6e;
}

/* Obere Titelleiste anprechen */
#top-header, #top-header a, #et-secondary-nav li li a, #top-header .et-social-icon a:before  {
  background-color:#0AF6B8; 
	color: #4d4d4d;
	padding-top: 2px;
	padding-bottom: 1px;
}
 #top-header #et-secondary-nav a:hover, #top-header #et-secondary-nav #top-header a:focus {
	color: #FF00FF;
	text-decoration: underline;
}

/* Style the separators */
.et_header_style_left #et-secondary-nav> .menu-item + .menu-item:before,
.et_header_style_centered #et-secondary-nav > .menu-item + .menu-item:before,
.et_header_style_split #et-secondary-nav > .menu-item + .menu-item:before
{
		position: absolute;
		left: -10px; /* Half of default 22px right padding and 4px adjust to center (to compensate for space char between li) */
		content: '|';
		font-size: smaller;
		color: #000000;
	padding-top: 2px;
	padding-bottom: 1px;
}
	
/* Texte unter dem Dropdown Menü */
#quadmenu.quadmenu-divi .quadmenu-navbar-nav .quadmenu-dropdown-menu li.quadmenu-item > a > .quadmenu-item-content > .quadmenu-subtitle, #quadmenu.quadmenu-divi .quadmenu-navbar-nav .quadmenu-dropdown-menu li.quadmenu-item > a > .quadmenu-item-content > .quadmenu-description {
    color: #637EEF;
	font-family: Open Sans;
    font-size: 12px;
	font-weight: normal;
}

/* Anpassung 19.04.24 Play Button für Video Gallery PlugIn */
.ayg-thumbnail .ayg-thumbnail-icon-play {
    fill: red !important;
}


/*Anpassung für den NAS-Konfigurator */

.nas-step {
  color:#e5e7eb;
}

.nas-tagline {
  font-size:14px;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:6px;
}

.nas-step h2 {
  font-size:28px;
  margin-bottom:18px;
}

/* NEU: Flexbox statt Grid */
.nas-grid {
  display:flex;
  flex-wrap:wrap;
  margin:-9px; /* für gleichmäßigen Abstand */
}

.nas-option {
  display:block;
  padding:18px 20px;
  border-radius:18px;
  border:1px solid #1f2937;
  background:#020617;
  text-decoration:none;
  color:#e5e7eb;
  transition:.15s all ease;
  margin:9px;
  width:100%; 
/* Standard: 1 Spalte auf Handy */
}

/* Ab Tablet: 2 Spalten */
@media (min-width: 600px) {
  .nas-option {
    width:calc(50% - 18px);
  }
}

/* Ab Desktop: 3 Spalten */
@media (min-width: 980px) {
  .nas-option {
    width:calc(33.333% - 18px);
  }
}

.nas-option span {
  font-size:13px;
  color:#9ca3af;
}

.nas-option:hover {
  border-color:#0ea5e9;
  transform:translateY(-2px);
}

/* Wrapper, damit der Button schön mittig sitzt */
.nas-restart-wrapper {
  margin-top: 30px;
  text-align: center;
}

/* Schöner Restart-Button im Dark-Theme */
.nas-btn-restart {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid #334155;
  background: #020617;
  color: #e5e7eb;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.6),
    0 0 18px rgba(56, 189, 248, 0.25);
  transition: all 0.15s ease;
}

/* kleines Icon vor dem Text */
.nas-btn-restart .nas-restart-icon {
  font-size: 15px;
  margin-right: 8px;
}

/* Hover-Effekt */
.nas-btn-restart:hover {
  border-color: #0ea5e9;
  box-shadow:
    0 0 0 1px #0ea5e9,
    0 0 24px rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
}

/* Wrapper für Abstand über dem Coaching-Link */
.nas-coaching-link-wrapper {
  margin-top: 14px;
}

/* Coaching-Link wie der Detail-Link, aber mit Icon */
.nas-coaching-link {
  color: #38bdf8;              /* Hellblau – wie Detail-Link */
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;        /* Icon + Text sauber in einer Reihe */
  align-items: center;
  transition: color 0.15s ease;
}

/* Coaching-Link Hover */
.nas-coaching-link:hover {
  color: #0ea5e9;              /* etwas dunkleres Blau beim Hover */
}

/* Icon vor dem Text */
.nas-coaching-link .nas-icon {
  margin-right: 6px;
  font-size: 16px;
}

/* Ergebnisbereich: Mobile untereinander, Desktop 2 + 2 */
.nas-grid.nas-grid-vertical {
  display: flex;
  flex-direction: column;  /* auf Handy alles untereinander */
  gap: 24px;
  margin-top: 24px;
  align-items: stretch;
}

/* ab Desktop: 1+2 nebeneinander, 3+4 darunter */
@media (min-width: 900px) {
  .nas-grid.nas-grid-vertical {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}


/* Allgemeine Karten-Optik (Ergebnis-Boxen) */
.nas-result-card {
  background: #0b0f1a;
  border: 1px solid #1e293b;
  border-radius: 16px;
  padding: 22px;
  max-width: 900px;   /* etwas breiter, damit Bild + Text Platz haben */
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}

/* Hover: leicht angehoben */
.nas-result-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

/* große Karten mit Bild rechts (Geräte-Empfehlungen) */
.nas-result-card-large {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.nas-result-content {
  flex: 1;
}

.nas-result-image-right {
  flex: 0 0 240px;
}

.nas-result-image-right img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid #1e293b;
}

/* Ab Tablet: Text links, Bild rechts nebeneinander */
@media (min-width: 900px) {
  .nas-result-card-large {
    flex-direction: row;
    align-items: stretch;
  }
}

/* Kleine Badge für "Empfehlung / Alternative" */
.nas-rolle {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #818cf8;
  margin-bottom: 4px;
}

/* Full-Width-Karten (Mail + Kurse) */
.nas-result-card-full {
  max-width: 900px;
  margin: 0 auto;
}

/* Titel in Karten */
.nas-result-card h3 {
  margin-top: 0;
  font-size: 20px;
  color: #e2e8f0;
}

/* Texte in Karten */
.nas-result-card p {
  margin-top: 4px;
  color: #cbd5f5;
}

/* Liste in Karten */
.nas-result-card ul {
  margin: 16px 0;
  padding-left: 18px;
  color: #a8b2c9;
  font-size: 14px;
}

/* Detail-Link (blau, wie vorher) */
.nas-btn-secondary {
  display: inline-block;
  margin-top: 12px;
}

/* Standard-Karte */
.nas-result-card {
  background: #0b0f1a;
  border: 1px solid #1e293b;
  border-radius: 16px;
  padding: 22px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}



  /* Alle 4 Boxen: je 50% Breite */
  .nas-result-card-large,
  .nas-result-card-full {
    width: calc(50% - 24px);
    max-width: none;  /* wichtig, damit sie wirklich nebeneinander passen */
    margin: 0;        /* Zentrierung macht das Flex-Layout */
  }

  /* Bei den großen Karten zusätzlich: Bild rechts, Text links */
  .nas-result-card-large {
    flex-direction: row;
    align-items: stretch;
  }
/* große Karten (Box 1+2) – KEIN Flex mehr */
.nas-result-card-large {
  margin: 0;
  padding: 22px;
  display: block; /* ganz wichtig */
}

/* Desktop: 2 Spalten nebeneinander */
@media (min-width: 900px) {
  .nas-result-card-large {
    width: calc(50% - 24px);
    max-width: none;
  }
}


/* Kopf: Text links + Bild rechts */
.nas-result-head {
  display: flex;
  flex-direction: row;
}

/* linker Bereich */
.nas-result-head-left {
  flex: 1;
  margin-right: 20px; /* ersetzt gap */
}

/* Bild rechts */
.nas-result-head-right img {
  max-width: 180px;
  height: auto;
  border-radius: 12px;
  border: 1px solid #1e293b;
}

/* Vollbreite unterhalb des Kopfbereichs */
.nas-result-full {
  margin-top: 16px;
}

/* Mobile Ansicht */
@media (max-width: 900px) {
  .nas-result-head {
    flex-direction: column;
  }

  .nas-result-head-left {
    margin-right: 0;
    margin-bottom: 16px;
  }

  .nas-result-head-right img {
    max-width: 100%;
  }
}
/* Ergebnis-Seite: Zusammenfassung dunkler färben */
.nas-summary {
    color: #3e6393 !important; /* dunkler als Standard-Grau */
    font-size: 15px;
    line-height: 1.55;
}


/* ============================================
   Alle Fragen (Step 1–4): Überschrift zentrieren
   ============================================ */

.nas-step h2,
.nas-step h3 {
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}
/* ============================================
   Fragen-Seiten 1–4 – Kachel-Design
   (gilt für alle .nas-step, aber NICHT Ergebnis)
   ============================================ */

/* Container zentrieren */
.nas-step:not(.nas-result) .nas-grid {
  display: block;
  max-width: 900px;
  margin: 24px auto 0;
}

/* Kachel-Stil für die Optionen in allen Schritten */
.nas-step:not(.nas-result) .nas-option {
  position: relative;
  display: block;
  width: 100% !important;       /* überschreibt das Spalten-Grid */
  max-width: 900px;
  margin: 0 auto 14px auto;     /* unten Abstand zwischen den Kacheln */
  padding: 16px 18px 14px 62px; /* links mehr Platz wegen Icon-Kreis */
  border-radius: 18px;
  border: 1px solid #1f2937;
  background: radial-gradient(circle at top left, #020617, #020617 45%, #020617 100%);
  color: #e5e7eb;
  text-decoration: none;
  text-align: left;
  box-shadow: 0 10px 25px rgba(0,0,0,0.6);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

/* kleiner „Icon-Kreis“ links (nur als optischer Akzent) */
.nas-step:not(.nas-result) .nas-option::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid #38bdf8;
  background: radial-gradient(circle at 30% 30%, rgba(56,189,248,0.4), rgba(15,23,42,0.9));
  box-shadow: 0 0 12px rgba(56,189,248,0.5);
}

/* Titel / Untertitel in der Kachel */
.nas-step:not(.nas-result) .nas-option strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.nas-step:not(.nas-result) .nas-option span {
  display: block;
  font-size: 13px;
  color: #9ca3af;
}

/* Hover-Effekt: leicht „anheben“ und mehr Glow */
.nas-step:not(.nas-result) .nas-option:hover {
  border-color: #0ea5e9;
  background: radial-gradient(circle at top left, #020617, #020617 35%, #020617 100%);
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.6),
    0 12px 30px rgba(56,189,248,0.25);
  transform: translateY(-2px);
}

/* Desktop-Layout – zwei Kachel-Spalten */
@media (min-width: 900px) {
  .nas-step:not(.nas-result) .nas-grid {
    display: flex;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 24px auto 0;
  }

  .nas-step:not(.nas-result) .nas-option {
    width: calc(50% - 20px) !important; /* zwei Spalten */
    max-width: none;
    margin: 0 10px 18px 10px;          /* seitlicher Abstand zwischen den Spalten */
  }
}

/* ==========================================
   NAS-Konfigurator – Startseite / Landing
   ========================================== */

.nas-landing {
  max-width: 1100px;
  margin: 0 auto 40px auto;
  padding: 10px 0 40px 0;
}

/* Hero: Text + Bild nebeneinander */
.nas-landing-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
}

.nas-landing-hero-text h1 {
  font-size: 30px;
  line-height: 1.25;
  margin-bottom: 14px;
}

.nas-landing-sub {
  color: #94a3b8;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 18px;
}

/* Buttons im Hero */
.nas-landing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.nas-landing-actions a {
  text-decoration: none;
  font-weight: 600;
}

/* Primärer Start-Button */
.nas-landing-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid #38bdf8;
  background: linear-gradient(135deg, #0f172a, #0369a1);
  color: #e5e7eb;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.9),
    0 0 24px rgba(56, 189, 248, 0.35);
  margin-right: 12px;
  margin-bottom: 8px;
  transition: all 0.15s ease;
}

.nas-landing-btn-primary:hover {
  border-color: #0ea5e9;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.8),
    0 0 28px rgba(56, 189, 248, 0.5);
  transform: translateY(-1px);
}

/* Zweiter, zurückhaltender Button */
.nas-landing-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid #1f2937;
  background: #020617;
  color: #cbd5f5;
  font-size: 14px;
  margin-bottom: 8px;
  transition: all 0.15s ease;
}

.nas-landing-btn-ghost:hover {
  border-color: #334155;
  background: #020617;
  transform: translateY(-1px);
}

/* Hinweistext unter den Buttons */
.nas-landing-hint {
  font-size: 13px;
  color: #64748b;
}

/* Vorteile / 3 Kacheln */
.nas-landing-benefits {
  display: flex;
  flex-direction: column;
  margin: 10px 0 26px 0;
}

.nas-landing-benefit {
  border-radius: 16px;
  border: 1px solid #1f2937;
  background: #020617;
  padding: 16px 18px;
  margin-bottom: 10px;
}

/* Titel in den Vorteils-Boxen in Coaching-Link-Farbe */
.nas-landing-benefit h3 {
  color: #38bdf8; /* wie .nas-coaching-link */
}

/* Coaching-Link in der Landing-Box etwas dezenter */
.nas-landing-coaching .nas-coaching-link {
  color: #38bdf8;
  font-weight: 500;
  text-decoration: none;
}

.nas-landing-coaching .nas-coaching-link:hover {
  text-decoration: underline;
}


.nas-landing-benefit p {
  margin: 0;
  font-size: 14px;
  color: #9ca3af;
}

/* Coaching-Block unten */
.nas-landing-coaching {
  border-radius: 18px;
  border: 1px solid #1f2937;
  background: #020617;
  padding: 18px 18px 16px 18px;
}

.nas-landing-coaching h3 {
  margin-top: 0;
  margin-bottom: 6px;
}

.nas-landing-coaching p {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 14px;
  color: #cbd5f5;
}

/* Bestehender Coaching-Link-Stil wird wiederverwendet */
.nas-landing-coaching .nas-coaching-link {
  color: #38bdf8;
}

/* Responsive Anpassungen */
@media (min-width: 900px) {
  .nas-landing-hero {
    flex-direction: row;
    align-items: center;
  }

  .nas-landing-hero-text {
    flex: 1;
  }

  .nas-landing-hero-image {
    flex: 0 0 auto;
  }

  .nas-landing-benefits {
    flex-direction: row;
  }

  .nas-landing-benefit {
    flex: 1;
    margin-right: 10px;
  }

  .nas-landing-benefit:last-child {
    margin-right: 0;
  }
}

/* ==========================================
   NAS-Landing – Hero mit NAS-Box
   ========================================== */

.nas-landing-hero {
  max-width: 1100px;
  margin: 0 auto 40px auto;
}

/* Headline-Zeile */
.nas-landing-hero-headline h1 {
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 16px 0;
}

/* Zeile 2: Text links, Box rechts */
.nas-landing-hero-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

/* linker Bereich (Text + Button) */
.nas-landing-hero-text {
  flex: 1 1 50%;
  margin-right: 24px;
}

/* rechter Bereich (NAS-Box) */
.nas-landing-hero-image {
  flex: 1 1 50%;
  display: flex;
  justify-content: flex-end;
}

/* Hinweiszeile unter allem */
.nas-landing-hero-hint {
  margin-top: 10px;
}

.nas-landing-hint {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

/* Gemeinsame Box für die drei NAS-Geräte im Hero (mit Glow) */
.nas-hero-box {
  background: #0b0f1a;
  border: 1px solid #1e293b;
  border-radius: 18px;
  padding: 20px 24px;
  box-shadow:
    0 0 22px rgba(56, 189, 248, 0.18),
    0 6px 24px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
  display: inline-block;
}

/* innerer Glow oben links */
.nas-hero-box::before {
  content: "";
  position: absolute;
  top: -40px;
  left: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(
    circle at center,
    rgba(56, 189, 248, 0.30),
    rgba(56, 189, 248, 0.05) 60%,
    transparent 100%
  );
  filter: blur(18px);
  opacity: 0.45;
  pointer-events: none;
}

/* Zeile mit den drei NAS-Geräten */
.nas-hero-nas-row {
  display: flex;
  align-items: flex-end;
}

/* Bilder in der Box */
.nas-hero-nas-row img {
  max-width: 150px;
  height: auto;
  display: block;
  margin-right: 16px;
  transition: transform 0.2s ease;
}

.nas-hero-nas-row img:last-child {
  margin-right: 0;
}

/* mittleres NAS leicht hervorgehoben */
.nas-hero-nas-row img:nth-child(2) {
  transform: translateY(-6px);
}

/* leichter Hover-Effekt pro Bild */
.nas-hero-nas-row img:hover {
  transform: translateY(-10px);
}

/* Mobil: alles untereinander */
@media (max-width: 900px) {
  .nas-landing-hero-row {
    flex-direction: column;
    align-items: flex-start;
  }
		
/* Fix: Äußerer Hero-Container soll kein Flex-Layout mehr sein */
.nas-landing-hero {
  display: block !important;
  flex-direction: initial !important;
  align-items: initial !important;
}


  .nas-landing-hero-text {
    margin-right: 0;
    margin-bottom: 16px;
  }

  .nas-landing-hero-image {
    width: 100%;
    justify-content: flex-start;
  }

  .nas-landing-hero-headline h1 {
    font-size: 24px;
  }

  .nas-hero-box {
    padding: 14px 18px;
  }

  .nas-hero-nas-row img {
    max-width: 110px;
    margin-right: 12px;
  }
}
/* Hero-Kinder als eigene Zeilen anordnen,
   auch wenn .nas-landing-hero ein Flex-Container ist */
.nas-landing-hero {
  display: flex;        /* darf flex bleiben */
  flex-wrap: wrap;      /* mehrere Zeilen zulassen */
}

/* Headline, Mittelblock und Hinweis jeweils als "eigene Zeile" */
.nas-landing-hero-headline,
.nas-landing-hero-row,
.nas-landing-hero-hint {
  flex: 0 0 100%;       /* immer 100% Breite */
  max-width: 100%;
}

/* ==========================================
   NAS-Konfigurator – Fortschrittsbalken
   ========================================== */

.nas-progress {
  max-width: 900px;
  margin: 0 auto 26px auto;
  font-size: 12px;
  color: #e5e7eb;
}

/* Linie + Füllung */
.nas-progress-bar {
  position: relative;
  height: 9px;
  border-radius: 999px;
  background: #020617;
  border: 1px solid #1f2937;
  overflow: hidden;
  margin-bottom: 12px;
}

.nas-progress-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #0ea5e9, #22c55e);
  transition: width 0.25s ease;
}

/* Füllstand pro Schritt */
.nas-progress-step1 .nas-progress-bar-fill { width: 25%; }
.nas-progress-step2 .nas-progress-bar-fill { width: 50%; }
.nas-progress-step3 .nas-progress-bar-fill { width: 75%; }
.nas-progress-step4 .nas-progress-bar-fill { width: 100%; }

/* Schritte unter der Linie */
.nas-progress-steps {
  display: flex;
  justify-content: space-between;
}

/* Einzelner Schritt */
.nas-progress-step-item {
  text-align: center;
  flex: 1 1 auto;
}

/* runder Step-Indikator */
.nas-progress-step-circle {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #1f2937;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px auto;
  font-size: 11px;
  color: #9ca3af;
}

/* Label unter der Zahl */
.nas-progress-step-label {
  font-size: 11px;
  color: #64748b;
}

/* erledigte + aktive Schritte hervorheben */
.nas-progress-step-item.is-done .nas-progress-step-circle,
.nas-progress-step-item.is-active .nas-progress-step-circle {
  border-color: #38bdf8;
  background: radial-gradient(circle at 30% 30%, rgba(56,189,248,0.5), #020617);
  color: #e5e7eb;
}

.nas-progress-step-item.is-done .nas-progress-step-label,
.nas-progress-step-item.is-active .nas-progress-step-label {
  color: #cbd5f5;
}

/* Mobile: etwas kompakter */
@media (max-width: 600px) {
  .nas-progress {
    font-size: 11px;
  }

  .nas-progress-step-label {
    font-size: 10px;
  }
}

/* ==========================================
   NAS-Konfigurator – Header-Block über den Fragen
   ========================================== */

.nas-step-header {
  max-width: 900px;
  margin: 18px auto 26px auto;
}

.nas-step-header-inner {
  position: relative;
  padding: 16px 18px 14px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #020617, #020617 55%, #0b1120);
  border: 1px solid #1e293b;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}

/* kleiner farbiger Balken links als Akzent */
.nas-step-header-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #0ea5e9, #22c55e);
}

/* Eyebrow-Tag oben */
.nas-step-header-tag {
  margin: 0 0 4px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #38bdf8;
}

/* Titel im Header-Block */
.nas-step-header-title {
  margin: 0 0 6px 0;
  font-size: 18px;
  line-height: 1.4;
  color: #e5e7eb;
}

/* Subtext / Erklärung */
.nas-step-header-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #94a3b8;
}

/* Mobil: etwas kompakter */
@media (max-width: 600px) {
  .nas-step-header-inner {
    padding: 14px 14px 12px 14px;
  }

  .nas-step-header-title {
    font-size: 16px;
  }

  .nas-step-header-sub {
    font-size: 12px;
  }
}

/* Eyebrow-Tag („NAS-Konfigurator“) größer & präsenter */
.nas-step-header-tag {
  margin: 0 0 6px 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #38bdf8;
  font-weight: 600;
}

/* Hauptüberschrift subtiler */
.nas-step-header-title {
  margin: 0 0 6px 0;
  font-size: 16px;
  line-height: 1.4;
  color: #e5e7eb;
  font-weight: 500;
           /* weniger dominant */
}

/* Abstand zwischen Header-Section und Kachel-Section optimieren */

.nas-step-header-section {
  margin-bottom: 12px !important;   /* kleiner „Luft“-Abstand unter der Header-Card */
  padding-bottom: 0 !important;
}

.nas-step-content-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Auch Rows in der Kachel-Section schlank machen */
.nas-step-content-section .et_pb_row {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ===============================
   Globale Abstände für Step-Seiten
   =============================== */
/* Header-Section mit Abstand nach oben & unten */
.nas-step-header-section {
  margin-top: 10px !important;      /* 🆕 kleiner Abstand unter der Menüzeile */
  margin-bottom: 24px !important;   /* Abstand zum Kachelbereich */
  padding: 0 !important;
}


/* Content-Section dicht darunter */
.nas-step-content-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Rows innerhalb der Header- und Content-Section:
   zentriert + keine Extra-Polster innen */
.nas-step-header-section .et_pb_row,
.nas-step-content-section .et_pb_row {
  margin: 0 auto !important;   /* wieder mittig zentriert */
  padding: 0 !important;
  max-width: 1080px;           /* kannst du bei Bedarf anpassen */
}

/* =========================================
   MOBILE FIX – Ergebnis-Seite Layout korrigieren
   ========================================= */

/* Grid einspaltig auf iPhone */
@media (max-width: 768px) {

    /* Grid der Ergebnis-Boxen auf 1 Spalte setzen */
    .nas-result .nas-grid {
        display: flex;
        flex-direction: column;
        gap: 26px; /* schöner Abstand */
        width: 100% !important;
    }

    /* Ergebnis-Karten sollen volle Breite einnehmen */
    .nas-result-card,
    .nas-result-card-large,
    .nas-result-card-full {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Kopfbereich (links + rechts) untereinander */
    .nas-result-head {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .nas-result-head-right img {
        max-width: 180px;
        margin: 12px 0 0 0;
    }

    /* Faktenliste aufräumen */
    .nas-result-full ul {
        padding-left: 20px;
    }
}
/* Zurück-Button Wrapper */
.nas-back-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

/* Styling des Buttons */
.nas-btn-back {
    display: inline-block;
    padding: 8px 18px;
    font-size: 15px;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: all 0.15s ease;
}

.nas-btn-back:hover {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.4);
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(-2px);
}

/* Mobile */
@media (max-width: 900px) {
    .nas-back-wrapper {
        margin-top: 28px;
    }
}

/* =========================================================
   MASTERCLASS – Divi-sicher (ohne Grid/Gap/1fr)
   ========================================================= */

/* -------- Wrapper -------- */
.hero-wrap,
.preview-wrap,
.intro-wrap,
.kap-wrap,
.cta-wrap{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
  font-family: inherit;
}

/* =========================================================
   HERO
   ========================================================= */
.hero-card{
  background: #ffffff;
  border: 1px solid #E6EAF0;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
  overflow: hidden;
}

.hero-inner{
  display: flex;
  align-items: stretch;
}

.hero-left{
  flex: 1 1 auto;
  min-width: 0;
  padding: 34px 34px 28px 34px;
}

.hero-right{
  flex: 0 0 380px;
  padding: 34px;
  background: #F5F7FA;
  border-left: 1px solid #EEF2F7;
}

.hero-kicker{
  display: inline-block;
  background: rgba(24,166,201,0.12);
  color: #0F6F86;
  font-weight: 800;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.hero-title-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.hero-h1{
  margin: 0 !important;
  font-size: 34px;
  font-weight: 900;
  color: #111827;
  line-height: 1.15;
}

.hero-badge{
  display: inline-block;
  margin-top: 6px;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(135deg, #18A6C9 0%, #1493B1 100%);
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(24,166,201,0.45);
}

.hero-sub{
  margin: 0 0 18px 0 !important;
  font-size: 17px;
  line-height: 1.45;
  color: #374151;
  max-width: 760px;
}

/* Listen im Hero: Divi-Overrides */
.hero-bullets{
  margin: 0 0 22px 0 !important;
  padding-left: 18px !important;
  color: #111827;
  font-size: 15.5px;
}
.hero-bullets li{
  margin: 6px 0 !important;
  line-height: 1.35 !important;
}

/* Hero Buttons */
.hero-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

.hero-btn{
  display: inline-block;
  background: #18A6C9;
  color: #ffffff !important;
  font-weight: 900;
  font-size: 16px;
  padding: 14px 22px;
  border-radius: 12px;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(24,166,201,0.25);
  transition: transform .2s ease, box-shadow .2s ease;
  margin-right: 12px;
  margin-bottom: 10px;
}

.hero-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(24,166,201,0.35);
}

.hero-btn-secondary{
  display: inline-block;
  background: #ffffff;
  color: #18A6C9 !important;
  font-weight: 900;
  font-size: 16px;
  padding: 12px 20px;
  border-radius: 12px;
  text-decoration: none !important;
  border: 2px solid rgba(24,166,201,0.45);
  margin-bottom: 10px;
}

/* Right box */
.hero-side-title{
  margin: 0 0 10px 0 !important;
  font-size: 18px;
  font-weight: 900;
  color: #111827;
}

.hero-side-list{
  margin: 0 0 16px 0 !important;
  padding-left: 18px !important;
  color: #111827;
  font-size: 14.5px;
}
.hero-side-list li{
  margin: 6px 0 !important;
  line-height: 1.35 !important;
}

.hero-mini{
  font-size: 14px;
  color: #6B7280;
  line-height: 1.4;
}

/* =========================================================
   VIDEO PREVIEW (Divi + Firefox sicher)
   ========================================================= */
.preview-wrap{
  margin: 28px auto 40px auto;
}

.preview-card{
  background: #ffffff;
  border: 1px solid #E6EAF0;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  padding: 26px;
}

.preview-title{
  margin: 0 0 10px 0 !important;
  font-size: 22px;
  font-weight: 800;
  color: #111827;
}

.preview-text{
  margin: 0 0 18px 0 !important;
  font-size: 16px;
  line-height: 1.45;
  color: #374151;
  max-width: 760px;
}

/* aspect-ratio statt padding-top => keine doppelte Höhe */
.preview-video{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  line-height: 0;
}

.preview-video iframe,
.preview-video video{
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block;
}

.preview-note{
  margin-top: 14px !important;
  font-size: 14.5px;
  color: #6B7280;
}

/* =========================================================
   EINLEITUNG
   ========================================================= */
.intro-card{
  background: #ffffff;
  border: 1px solid #E6EAF0;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  padding: 26px 28px;
  margin-bottom: 32px;
}

.intro-title{
  margin: 0 0 10px 0 !important;
  font-size: 24px;
  font-weight: 800;
  color: #111827;
}

.intro-text{
  margin: 0 0 18px 0 !important;
  font-size: 16px;
  line-height: 1.45;
  color: #111827;
  max-width: 900px;
}

.intro-subtitle{
  margin: 0 0 8px 0 !important;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

.intro-list{
  margin: 0 !important;
  padding-left: 18px !important;
  font-size: 15.5px;
  color: #111827;
}
.intro-list li{
  margin: 6px 0 !important;
  line-height: 1.35 !important;
}

/* =========================================================
   KAPITELÜBERSICHT
   ========================================================= */
.kap-card{
  background: #ffffff;
  border: 1px solid #E6EAF0;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  overflow: hidden;
}

.kap-head{
  padding: 22px 24px;
  font-size: 22px;
  font-weight: 800;
  color: #111827;
  border-bottom: 1px solid #EEF2F7;
}

.kap-item{
  position: relative;
  padding: 24px;
}

.kap-item + .kap-item::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: #EEF2F7;
}

.kap-row{
  display: flex;
  align-items: flex-start;
}

.kap-col-left{
  width: 64px;
  flex: 0 0 64px;
}

.kap-col-right{
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 16px;
}

.kap-nr{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #18A6C9;
  color: #ffffff;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(24,166,201,0.25);
  margin-top: 4px;
}

.kap-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}

.kap-title{
  margin: 0 16px 0 0 !important;
  font-size: 22px;
  font-weight: 800;
  color: #111827;
}

.kap-sub{
  margin: 0 !important;
  font-size: 15.5px;
  color: #6B7280;
}

/* Divi-Overrides für Listenabstände in Kapiteln */
.kap-list{
  margin: 10px 0 0 0 !important;
  padding-left: 18px !important;
  font-size: 15.5px;
  color: #111827;
}
.kap-list li{
  margin: 4px 0 !important;
  line-height: 1.32 !important;
}

.kap-link{
  color: #18A6C9 !important;
  font-weight: 700;
  text-decoration: underline !important;
  margin-left: 6px;
  white-space: nowrap;
}

.kap-note{
  margin: 10px 0 0 0 !important;
  font-size: 15px;
  color: #6B7280;
}

/* =========================================================
   CTA
   ========================================================= */
.cta-wrap{
  margin-top: 40px;
}

.cta-card{
  background: linear-gradient(135deg, #18A6C9 0%, #1493B1 100%);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(24,166,201,0.35);
  padding: 36px 40px;
  color: #ffffff;
}

.cta-grid{
  display: flex;
  align-items: center;
}

.cta-left{
  flex: 1 1 auto;
  min-width: 0;
}

.cta-right{
  flex: 0 0 auto;
  margin-left: 24px;
}

.cta-title{
  margin: 0 0 10px 0 !important;
  font-size: 26px;
  font-weight: 800;
  color: #ffffff !important;
}

.cta-text{
  margin: 0 !important;
  font-size: 16.5px;
  line-height: 1.45;
  max-width: 760px;
}

.cta-btn{
  display: inline-block;
  background: #ffffff;
  color: #18A6C9 !important;
  font-weight: 800;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  transition: transform .2s ease, box-shadow .2s ease;
}

.cta-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.cta-note{
  margin-top: 12px !important;
  font-size: 14.5px;
  opacity: 0.9;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .hero-inner{ flex-direction: column; }
  .hero-right{
    flex: 1 1 auto;
    border-left: none;
    border-top: 1px solid #EEF2F7;
  }
}

@media (max-width: 700px){
  .cta-grid{ flex-direction: column; align-items: flex-start; }
  .cta-right{ margin-left: 0; margin-top: 18px; }
  .cta-card{ padding: 28px 22px; }
}

@media (max-width: 520px){
  .hero-left, .hero-right{ padding: 22px 18px; }
  .hero-h1{ font-size: 28px; }

  .preview-card{ padding: 20px 18px; }

  .kap-item{ padding: 18px 16px; }
  .kap-head{ padding: 18px 16px; }
  .kap-col-left{ width: 54px; flex: 0 0 54px; }
  .kap-col-right{ margin-left: 14px; }
  .kap-nr{ width: 40px; height: 40px; font-size: 16px; }

  .intro-card{ padding: 20px 18px; }
  .intro-title{ font-size: 22px; }
}

.hero-badge-right{
  display: inline-block;
  margin-top: 16px;
}

/* Footer Kursbilder – Mobile kürzen */
@media (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
  }
}

/*  =========================================
 * MEIN MEGA MENUE
 * ==============================================*/
/* ==============================
   Brand Logo – Frank-Hilft (Header)
   ============================== */

.fh-brand{
  position: relative;
  top: -2px;   /* minimal höher, safe für Desktop & Sticky */
  align-items: center;
  text-decoration: none !important;
  line-height: 1;
}

.fh-brand-icon{
  width: 30px;         /* Icon-Größe */
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;   /* statt 8px */
	position: relative;
  top: 1px;   /* Icon minimal nach unten */
}

.fh-brand-icon svg{
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #18A6C9;     /* dein Türkis */
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .95;
}

.fh-brand-text{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #18A6C9;
  white-space: nowrap;
	position: relative;
  top: -5px;   /* ← DAS ist der entscheidende Feinschliff */

}

/* Hover: minimal, ohne Effekthascherei */
.fh-brand:hover .fh-brand-icon svg{
  opacity: 1;
}

.fh-brand:hover .fh-brand-text{
  color: #3fc3de; /* helleres Türkis */
}

/* Mobile etwas kleiner */
@media (max-width: 980px){
  .fh-brand-text{
    font-size: 16px;
  }
  .fh-brand{
    top: -1px;
  }
}


/* =========================================================
   HEADER / HAUPTMENÜ – fh-header (Section-basiert, Divi-safe)
   ========================================================= */

/* -------------------------
   STELLSCHRAUBEN (CSS-Variablen)
   ------------------------- */
/* TEST */

:root{
  --header-pad-y: 26px;         /* Höhe der blauen Leiste */
  --menu-item-pad-x: 14px;      /* Abstand der Menüeinträge */
  --logo-col: 140px;            /* Breite Logo-Spalte */
  --right-col: 300px;           /* Breite rechte Spalte */
  --btn-login-space: 14px;      /* Abstand Button ↔ Login */
}


/* -------------------------
   BLAUE HEADER-SECTION
   ------------------------- */
.fh-header{
  padding-top: var(--header-pad-y) !important;
  padding-bottom: var(--header-pad-y) !important;
}

/* Divi legt gern extra Luft in Rows */
.fh-header .et_pb_row{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* -------------------------
   HEADER-NAV-ROW
   ------------------------- */
.fh-header .fh-navrow{
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* -------------------------
   SPALTEN im Hauptmenue
   ------------------------- */

/* Logo links */
.fh-header .fh-navrow .et_pb_column_1_5{
  flex: 0 0 var(--logo-col);
}

/* Menü mittig */
.fh-header .fh-navrow .et_pb_column_3_5{
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
}

/* Button + Login rechts */
.fh-header .fh-navrow .et_pb_column_1_5.et-last-child{
  flex: 0 0 var(--right-col);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Abstand Button ↔ Login (statt gap) */
.fh-header .fh-navrow .et_pb_column_1_5.et-last-child
.et_pb_button_module_wrapper{
  margin-right: var(--btn-login-space);
}


/* -------------------------
   MENÜ
   ------------------------- */
.fh-header .fh-mainmenu .et-menu > li{
  padding-left: var(--menu-item-pad-x);
  padding-right: var(--menu-item-pad-x);
}

.fh-header .fh-mainmenu .et-menu > li > a{
  font-size: 18px;          /* vorher effektiv ~16px */
  font-weight: 600;
  letter-spacing: .1px;    /* leicht kompakter */
}

/* Pfeil bei Mega-Menü-Punkten */
.fh-header li.menu-mega > a::after{
  content: " ▾";
  margin-left: 3px;
	font-size: .9em;
  opacity: .9;
}


/* -------------------------
   CTA BUTTON
   ------------------------- */
.fh-header .fh-cta{
  padding: 10px 22px !important;
  border-radius: 999px;
	 font-size: 15px;     /* entscheidend gegen Umbruch */
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: .3px;
  background: linear-gradient(135deg, #2f6bff, #4f8dff);
  border: none;
  box-shadow: 0 6px 18px rgba(47,107,255,.35);
  transition: transform .2s ease, box-shadow .2s ease;
  color: #ffffff !important;
  text-decoration: none;
}

.fh-header .fh-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(47,107,255,.45);
}


/* ==============================
   Header Download – dezent, grün/türkis
   ============================== */

.fh-header-download{
  display: inline-block;

  font-size: 14px;
  font-weight: 500;
/*  letter-spacing: .25px; */

  color: rgba(64, 220, 200, 0.85);   /* türkis-grün */
  text-decoration: none;

  /* leicht höher als Menülinie */
  transform: translateY(-3px);

  transition:
    color .2s ease,
    transform .2s ease,
    opacity .2s ease;
}

/* Hover: minimal heller */
.fh-header-download:hover{
  color: #6ff0dc;
  opacity: 1;
  transform: translateY(-4px);
}


/* ===== Orgamax Menü – Basis ===== */
/* =========================================================
   MEGA MENÜ – PANEL CSS (AUFGERÄUMT)
   Stand: Panels + Kurse-Tiles
   ========================================================= */


/* =========================================================
   A) STELLSCHRAUBEN (hier drehst du künftig am schnellsten)
   ========================================================= */
:root{
  /* Panel-Breite */
  --mega-maxw: 1400px;
  --mega-w: 92%;

  /* Panel-Optik */
  --mega-z: 999999;
  --mega-col-pad-x: 18px;
  --mega-col-sep: rgba(0,0,0,0.06);

  /* Klassische (alte) Spalten-Panels */
  --om-icon-size: 26px;
  --om-gap-icon-title: 12px;
  --om-gap-title-intro: 8px;
  --om-gap-intro-links: 8px;
  --om-links-gap: 3px;

  /* Kurse-Tiles Panel */
  --kurse-pad-top: 10px;
  --kurse-pad-bottom: 18px;
  --kurse-head-mb: 10px;

  --kurse-tile-minh: 170px;
  --kurse-col-pad-y: 6px;
  --kurse-col-pad-x: 10px;

  --kurse-imgbox-h: 82px;
  --kurse-img-h: 78px;

  --kurse-desc-color: #0073aa; /* Unterüberschrift blau */
}


/* =========================================================
   B) GENERISCHES PANEL-VERHALTEN (für alle Mega-Panels)
   ========================================================= */

/* Panel aus dem Layoutfluss nehmen */
.mega-panel{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--fh-header-h, 0px) !important;
  z-index: var(--mega-z) !important;

  margin: 0 !important;
  width: 100% !important;
}

/* Standard: versteckt */
.mega-panel.mega-hidden{
  display: none !important;
}

/* Divi Section Padding im Panel neutralisieren */
.mega-panel.et_pb_section{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Row im Panel breit + zentriert */
.mega-panel .et_pb_row{
  width: var(--mega-w) !important;
  max-width: var(--mega-maxw) !important;
}

/* =========================================================
   C) ORGAMAX-STYLE “ALTE” PANELS (Icon/Titel/Intro/Liste)
   Nutzt: om-icon, om-title, om-sub, om-list, om-cta
   ========================================================= */

/* Spalte als Grid (Icon+Titel oben, Intro mittig, Links unten) */
.mega-panel .et_pb_column{
  display: grid !important;
  grid-template-columns: 44px 1fr;
  grid-template-areas:
    "icon title"
    "intro intro"
    "links links";
  align-content: start;

  padding-left: var(--mega-col-pad-x) !important;
  padding-right: var(--mega-col-pad-x) !important;

  border-right: 1px solid var(--mega-col-sep);
}
.mega-panel .et_pb_column:last-child{
  border-right: none;
}

/* Icon */
.mega-panel .et_pb_column .om-icon{ grid-area: icon; margin: 0 !important; }
.mega-panel .et_pb_column .om-icon .et_pb_icon{ font-size: var(--om-icon-size); }

/* Titel */
.mega-panel .et_pb_column .om-title{
  grid-area: title;
  margin: 0 !important;
  margin-left: var(--om-gap-icon-title) !important;
  text-align: left !important;
  font-weight: 700;
  line-height: 1.2;
  align-self: center;
}

/* Intro */
.mega-panel .et_pb_column .om-sub{
  grid-area: intro;
  margin: 0 !important;
  margin-top: var(--om-gap-title-intro) !important;
  text-align: center !important;
  line-height: 1.45;
  font-size: 0.95em;
  color: rgba(0,0,0,0.75);
}

/* Linkliste */
.mega-panel .et_pb_column .om-list{
  grid-area: links;
  margin: 0 !important;
  margin-top: var(--om-gap-intro-links) !important;
  padding: 0 !important;
  text-align: left !important;
  line-height: 1.2 !important;
}

/* Divi-Absätze/Br im Listenblock neutralisieren */
.mega-panel .et_pb_column .om-list p{ margin: 0 !important; padding: 0 !important; }
.mega-panel .et_pb_column .om-list br{ display: none !important; }

/* Links kompakt */
.mega-panel .et_pb_column .om-list a{
  display: block;
  margin: var(--om-links-gap) 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  text-decoration: none;
}
.mega-panel .et_pb_column .om-list a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* CTA */
.mega-panel .et_pb_column .om-cta{ font-weight: 700; }


/* =========================================================
   D) KURSE PANEL (Tiles 2x4) – mega-kurse-tiles
   Nutzt: kurse-headline, kurse-grid, kurse-tile
   ========================================================= */

.mega-kurse-tiles{
  background: #fff;
  padding-top: var(--kurse-pad-top) !important;
  padding-bottom: var(--kurse-pad-bottom) !important;
}

/* keine wilden Umbrüche */
.mega-kurse-tiles,
.mega-kurse-tiles *{
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Kurse: Kurse-Panel darf NICHT das alte Column-Grid erben */
.mega-kurse-tiles .et_pb_column{
  display: block !important;
  grid-template-columns: unset !important;
  grid-template-areas: unset !important;
  align-content: unset !important;

  border-right: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Headline */
.mega-kurse-tiles .kurse-headline{
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto var(--kurse-head-mb) !important;

  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.2px;
  max-width: 900px;
}
.mega-kurse-tiles .kurse-headline p{ margin: 0 !important; }

.mega-kurse-tiles .kurse-headline:after{
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: rgba(0,0,0,0.15);
  margin: 12px auto 0;
}

/* Grid Rows: 4 Spalten Desktop */
.mega-kurse-tiles .et_pb_row.kurse-grid{
  width: var(--mega-w) !important;
  max-width: var(--mega-maxw) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Columns: Breite + Box-Sizing + kompakte Abstände */
.mega-kurse-tiles .et_pb_row.kurse-grid > .et_pb_column{
  box-sizing: border-box !important;
  margin: 0 !important;

  padding: var(--kurse-col-pad-y) var(--kurse-col-pad-x) !important;
  float: none !important;
  position: relative !important;

  flex: 0 0 25% !important;
  max-width: 25% !important;
  width: 25% !important;
}

/* Tablet: 2 Spalten */
@media (max-width: 980px){
  .mega-kurse-tiles .et_pb_row.kurse-grid > .et_pb_column{
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

/* Mobile: 1 Spalte */
@media (max-width: 560px){
  .mega-kurse-tiles .et_pb_row.kurse-grid > .et_pb_column{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Tile */
.mega-kurse-tiles .kurse-tile{
  min-height: var(--kurse-tile-minh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  padding: 0 !important; /* Tile selbst bleibt clean, Padding kommt von Column */
}

/* Bildbox: gleiche Höhe für PNGs */
.mega-kurse-tiles .kurse-tile .et_pb_main_blurb_image{
  height: var(--kurse-imgbox-h) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px 0 !important;
}
.mega-kurse-tiles .kurse-tile img{
  max-height: var(--kurse-img-h) !important;
  width: auto;
  height: auto;
  display: block;
}

/* Titel */
.mega-kurse-tiles .kurse-tile .et_pb_module_header{
  margin: 0 0 6px !important;
  font-weight: 700;
  line-height: 1.25;
  font-size: 1.05rem;
  text-align: center;
}

/* Unterüberschrift / Description */
.mega-kurse-tiles .kurse-tile .et_pb_blurb_description{
  margin: 0 !important;
  margin-top: 8px !important;
  line-height: 1.35;
  opacity: .95;
  text-align: center;

  color: var(--kurse-desc-color);
}

/* Trennlinie wie Orgamax */
.mega-kurse-tiles .kurse-tile:after{
  content: "";
  display: block;
  width: 72%;
  height: 1px;
  margin: 14px auto 0;
  background: rgba(0,0,0,.12);
}

/* 2. Reihe optional etwas Abstand (wenn du willst) */
.mega-kurse-tiles .kurse-row-2{ margin-top: 6px !important; }

/* =========================================================
   TUNING: Kurse-Panel (mega-kurse / mega-kurse-tiles)
   ========================================================= */

.mega-panel.mega-kurse.mega-kurse-tiles{
  padding-top: 6px !important;
  padding-bottom: 16px !important;
}

.mega-panel.mega-kurse.mega-kurse-tiles .kurse-headline{
  margin-bottom: 8px !important;
}

.mega-panel.mega-kurse.mega-kurse-tiles .kurse-tile .et_pb_blurb_description,
.mega-panel.mega-kurse.mega-kurse-tiles .kurse-tile .et_pb_blurb_description a{
  color: #2f6bff !important;
  opacity: 1 !important;
}

/* =========================================================
   COACHING PANEL – 4 Karten wie orgaMAX (ohne Banderolle)
   Klassen:
   Section: mega-panel mega-coaching mega-cards mega-hidden
   Row:     mega-cards-row
   Card:    mega-card   (Blurb oder Textmodul)
   ========================================================= */

/* Panel Grundfläche */
.mega-panel.mega-coaching.mega-cards{
  background: #ffffff;
  padding: 18px 0 !important;
}

/* Row breit + mittig */
.mega-panel.mega-coaching.mega-cards .et_pb_row.mega-cards-row{
  width: 92% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4 Spalten stabil */
@media (min-width: 981px){
  .mega-panel.mega-coaching.mega-cards .et_pb_row.mega-cards-row > .et_pb_column{
    width: 25% !important;
  }
}

/* Spalten-Padding = „Abstand zwischen Karten“ (statt gap) */
.mega-panel.mega-coaching.mega-cards .et_pb_row.mega-cards-row > .et_pb_column{
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  margin: 0 !important;
}

/* Tablet: 2 pro Reihe */
@media (max-width: 980px){
  .mega-panel.mega-coaching.mega-cards .et_pb_row.mega-cards-row > .et_pb_column{
    width: 50% !important;
  }
}

/* Mobile: 1 pro Reihe */
@media (max-width: 560px){
  .mega-panel.mega-coaching.mega-cards .et_pb_row.mega-cards-row > .et_pb_column{
    width: 100% !important;
    padding: 8px 10px !important;
  }
}

/* ---------------------------------------------------------
   Variante A: Blurb-Modul als Karte (empfohlen)
   --------------------------------------------------------- */
.mega-panel.mega-coaching.mega-cards .mega-card{
  background: #ffffff;
  border: 1px solid rgba(15, 27, 55, 0.10);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(15, 27, 55, 0.06);
  padding: 22px 22px 18px !important;
  height: 100%;
}

/* Hover wie orgaMAX: leicht „anheben“ */
.mega-panel.mega-coaching.mega-cards .mega-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(15, 27, 55, 0.10);
}

/* Blurb-Icon optional kleiner & clean */
.mega-panel.mega-coaching.mega-cards .mega-card .et_pb_main_blurb_image{
  margin-bottom: 10px !important;
}

.mega-panel.mega-coaching.mega-cards .mega-card .et_pb_main_blurb_image img{
  max-height: 46px;
  width: auto;
}

/* Titel */
.mega-panel.mega-coaching.mega-cards .mega-card .et_pb_module_header{
  margin: 0 0 8px !important;
  font-weight: 700;
  line-height: 1.25;
}

/* Beschreibung */
.mega-panel.mega-coaching.mega-cards .mega-card .et_pb_blurb_description{
  margin: 0 !important;
  opacity: .85;
  line-height: 1.35;
}

/* Trennlinie wie Beispiel */
.mega-panel.mega-coaching.mega-cards .mega-card:after{
  content: "";
  display: block;
  width: 70%;
  height: 1px;
  margin: 14px auto 0;
  background: rgba(0,0,0,.12);
}

/* CTA-Link/Button im Blurb */
.mega-panel.mega-coaching.mega-cards .mega-card a{
  text-decoration: none;
}

/* ---------------------------------------------------------
   Variante B: Wenn du Spalte als Karte bauen willst
   -> Spalte zusätzlich: mega-card-col
   --------------------------------------------------------- */
.mega-panel.mega-coaching.mega-cards .mega-card-col{
  background: #ffffff;
  border: 1px solid rgba(15, 27, 55, 0.10);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(15, 27, 55, 0.06);
  padding: 22px !important;
}

/* Coaching-Karte: mehrere Links sauber untereinander */
.mega-panel.mega-coaching .mega-card a{
  display: block;
  margin-top: 6px;
  font-weight: 600;
  color: #2f6bff;
}

.mega-panel.mega-coaching .mega-card a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   COACHING PANEL – Cards (Orgamax-Style)
   ========================================================= */

/* Section Grundlayout */
.mega-coaching-cards{
  background: #fff;
  padding-top: 18px !important;
  padding-bottom: 22px !important;
}

/* WICHTIG: Alles wieder "normal" schreiben (kein vertikal, kein Zeichenumbruch) */
.mega-coaching-cards,
.mega-coaching-cards *{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Row breit & mittig */
.mega-coaching-cards .et_pb_row{
  width: 92% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4 Spalten sicher nebeneinander (Desktop) */
.mega-coaching-cards .et_pb_row.coaching-grid{
  display: flex !important;
  flex-wrap: wrap !important;
}

.mega-coaching-cards .et_pb_row.coaching-grid > .et_pb_column{
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 12px 12px !important;
  float: none !important;
  display: block !important;
  position: relative !important;

  flex: 0 0 25% !important;
  max-width: 25% !important;
  width: 25% !important;
}

/* Tablet: 2 Spalten */
@media (max-width: 980px){
  .mega-coaching-cards .et_pb_row.coaching-grid > .et_pb_column{
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

/* Mobile: 1 Spalte */
@media (max-width: 560px){
  .mega-coaching-cards .et_pb_row.coaching-grid > .et_pb_column{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Card-Optik für Blurb-Module */
.mega-coaching-cards .coaching-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 26px 22px !important;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Titel */
.mega-coaching-cards .coaching-card .et_pb_module_header{
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px !important;
}

/* Beschreibung */
.mega-coaching-cards .coaching-card .et_pb_blurb_description{
  opacity: .85;
  line-height: 1.45;
  margin: 0 !important;
}

/* Illustration/Icon oben mittig */
.mega-coaching-cards .coaching-card .et_pb_main_blurb_image{
  margin: 0 0 14px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mega-coaching-cards .coaching-card img{
  max-height: 74px;
  width: auto;
  height: auto;
  display: block;
}

/* Optional: Button-Link im Text wie "Zur Buchung" etc. etwas deutlicher */
.mega-coaching-cards .coaching-card a{
  font-weight: 600;
  text-decoration: none;
}
.mega-coaching-cards .coaching-card a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ================================
   Coaching Panel – Card Rahmen
   ================================ */

/* Karte selbst */
.coaching-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);   /* feiner Rahmen */
  border-radius: 18px;                 /* weiche Ecken */
  padding: 26px 22px !important;
  text-align: center;

  /* dezente Tiefe wie bei OrgaMAX */
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}

/* Titel */
.coaching-card .et_pb_module_header{
  margin: 0 0 10px !important;
  font-weight: 700;
  line-height: 1.25;
}

/* Beschreibung */
.coaching-card .et_pb_blurb_description{
  margin: 0 !important;
  line-height: 1.45;
  opacity: .85;
}

/* Bild / Icon oben mittig */
.coaching-card .et_pb_main_blurb_image{
  margin-bottom: 14px !important;
  display: flex;
  justify-content: center;
}

/* Hover optional (nur wenn du willst) */
.coaching-card:hover{
  box-shadow: 0 14px 36px rgba(0,0,0,0.08);
}

/* =========================================================
   Coaching-Panel: altes Column-Grid komplett abschalten
   ========================================================= */

.mega-coaching .et_pb_column{
  display: block !important;          /* Grid/Flex killen */
  grid-template-columns: unset !important;
  grid-template-areas: unset !important;
  align-content: unset !important;

  /* volle Breite je Spalte */
  width: auto !important;
  min-width: 0 !important;

  /* keine Spaltentrenner vom alten Panel */
  border-right: none !important;

  /* normales Divi-Padding */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================
   Coaching-Panel – 4 Card Layout (Divi-safe, ohne gap)
   ========================================================= */

/* Row als Flex-Container */
.mega-coaching .et_pb_row{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

/* Spalten = Karten */
.mega-coaching .et_pb_column{
  box-sizing: border-box !important;
  padding: 10px 12px !important;   /* Abstand statt gap */
}

/* Desktop: 4 nebeneinander */
@media (min-width: 981px){
  .mega-coaching .et_pb_column{
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}

/* Tablet: 2 nebeneinander */
@media (max-width: 980px){
  .mega-coaching .et_pb_column{
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* Mobile: 1 untereinander */
@media (max-width: 560px){
  .mega-coaching .et_pb_column{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Karte selbst */
.mega-coaching .coaching-card{
  height: 100%;
  padding: 26px 28px !important;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Titel */
.mega-coaching .coaching-card h3{
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 700;
}

/* Text */
.mega-coaching .coaching-card p{
  margin-bottom: 0;
  line-height: 1.5;
}

/* =========================================================
   FIX: Coaching-Panel wirklich 4 nebeneinander (Divi überschreiben)
   ========================================================= */

@media (min-width: 981px){
  /* Row als Flex */
  .mega-coaching .et_pb_row{
    display: flex !important;
    flex-wrap: wrap !important;
    width: 92% !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Divi-Column-Breiten/Floats killen + 25% erzwingen */
  .mega-coaching .et_pb_row > .et_pb_column{
    float: none !important;
    margin: 0 !important;
    width: 25% !important;
    max-width: 25% !important;
    flex: 0 0 25% !important;
    box-sizing: border-box !important;

    /* Abstand statt gap */
    padding: 10px 10px !important;
  }
}

/* Tablet: 2 Spalten */
@media (max-width: 980px){
  .mega-coaching .et_pb_row{
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .mega-coaching .et_pb_row > .et_pb_column{
    float: none !important;
    margin: 0 !important;
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    box-sizing: border-box !important;
    padding: 10px 10px !important;
  }
}

/* Mobile: 1 Spalte */
@media (max-width: 560px){
  .mega-coaching .et_pb_row > .et_pb_column{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 8px 6px !important;
  }
}
/* Coaching-Panel: Überschriften mittig */
.mega-coaching .et_pb_module_header{
  text-align: center !important;
}

/* Coaching-Panel: dezente Start-Buttons */
.coaching-btn{
  display: inline-block;
  margin-top: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #2f6bff;
  background: rgba(47,107,255,0.08);
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.coaching-btn:hover{
  background: rgba(47,107,255,0.14);
  transform: translateY(-1px);
}

/* Coaching-Kacheln: Inhalt zentrieren */
.mega-coaching .et_pb_blurb_description{
  text-align: center;
}

/* Coaching-Blurb: Inhalt bleibt im Kasten */
.mega-coaching .et_pb_blurb_content{
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Beschreibung/Text zentriert */
.mega-coaching .et_pb_blurb_description{
  text-align: center !important;
}

/* Button in Blurb: nicht als Absatz-Block nach außen drücken */
.mega-coaching .et_pb_blurb_description p{
  margin: 0 !important;
}

/* Button nach unten schieben (optional, sieht meistens schicker aus) */
.mega-coaching .coaching-btn{
  margin-top: 14px !important;
}


/* Button an das Ende des Kastens drücken */
.mega-coaching .et_pb_blurb_description{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 1 auto !important;
}

.mega-coaching .coaching-btn{
  margin-top: auto !important;   /* drückt den Button nach unten */
}

/* =========================================================
   NAS + WISSEN – Cards Panel (Divi Grid aus Block C überschreiben)
   Panels:
   - NAS:    .mega-panel.mega-nas.mega-nas-cards
   - Wissen: .mega-panel.mega-wissen.mega-wissen-cards
   Row:      .mega-cards-row
   Cards:    .coaching-card (bei dir aktuell so benannt)
   ========================================================= */

/* ---------- 1) Column-Grid aus Block C deaktivieren ---------- */
.mega-nas .et_pb_column,
.mega-wissen .et_pb_column{
  display: block !important;
  grid-template-columns: unset !important;
  grid-template-areas: unset !important;
  align-content: unset !important;

  border-right: none !important;     /* sonst kommen Trennlinien rein */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- 2) Row als Flex + Breite wie Coaching ---------- */
.mega-nas .et_pb_row.mega-cards-row,
.mega-wissen .et_pb_row.mega-cards-row{
  display: flex !important;
  flex-wrap: wrap !important;

  width: 92% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Spalten-Padding = Abstand zwischen Karten */
.mega-nas .et_pb_row.mega-cards-row > .et_pb_column,
.mega-wissen .et_pb_row.mega-cards-row > .et_pb_column{
  float: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;
}

/* Desktop: 4 Spalten */
@media (min-width: 981px){
  .mega-nas .et_pb_row.mega-cards-row > .et_pb_column,
  .mega-wissen .et_pb_row.mega-cards-row > .et_pb_column{
    width: 25% !important;
    max-width: 25% !important;
    flex: 0 0 25% !important;
  }
}

/* Tablet: 2 Spalten */
@media (max-width: 980px){
  .mega-nas .et_pb_row.mega-cards-row > .et_pb_column,
  .mega-wissen .et_pb_row.mega-cards-row > .et_pb_column{
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
}

/* Mobile: 1 Spalte */
@media (max-width: 560px){
  .mega-nas .et_pb_row.mega-cards-row > .et_pb_column,
  .mega-wissen .et_pb_row.mega-cards-row > .et_pb_column{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 8px 10px !important;
  }
}

/* ---------- 3) Card-Optik (weil deine Blurbs "coaching-card" heißen) ---------- */
.mega-nas .coaching-card,
.mega-wissen .coaching-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 18px;
  padding: 26px 22px !important;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  height: 100%;

  /* wichtig: Button nach unten möglich machen */
  display: flex;
  flex-direction: column;
}

.mega-nas .coaching-card:hover,
.mega-wissen .coaching-card:hover{
  box-shadow: 0 14px 36px rgba(0,0,0,0.08);
}

/* Titel / Text */
.mega-nas .coaching-card .et_pb_module_header,
.mega-wissen .coaching-card .et_pb_module_header{
  margin: 0 0 10px !important;
  font-weight: 700;
  line-height: 1.25;
  text-align: center !important;
}

.mega-nas .coaching-card .et_pb_blurb_description,
.mega-wissen .coaching-card .et_pb_blurb_description{
  margin: 0 !important;
  line-height: 1.45;
  opacity: .85;
  text-align: center !important;
  flex: 1 1 auto; /* Textbereich darf wachsen */
}

/* Icon oben */
.mega-nas .coaching-card .et_pb_main_blurb_image,
.mega-wissen .coaching-card .et_pb_main_blurb_image{
  margin-bottom: 14px !important;
  display: flex;
  justify-content: center;
}

/* ---------- 4) Buttons in NAS/Wissen unten halten ---------- */
/* Wenn Button im Text als <a class="nas-btn">… oder wissen-btn …> */
.mega-nas .nas-btn,
.mega-wissen .wissen-btn{
  display: inline-block;
  margin-top: auto !important;      /* drückt Button nach unten */
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #2f6bff !important;
  background: rgba(47,107,255,0.08);
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.mega-nas .nas-btn:hover,
.mega-wissen .wissen-btn:hover{
  background: rgba(47,107,255,0.14);
  transform: translateY(-1px);
}

/* =========================================================
   Übergang: mega-card als neue Standard-Klasse zulassen
   (damit wir coaching-card nach und nach ablösen können)
   ========================================================= */

.mega-nas .mega-card,
.mega-wissen .mega-card,
.mega-coaching .mega-card{
  /* gleiche Optik wie coaching-card */
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 18px;
  padding: 26px 22px !important;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  height: 100%;

  display: flex;
  flex-direction: column;
}

.mega-nas .mega-card:hover,
.mega-wissen .mega-card:hover,
.mega-coaching .mega-card:hover{
  box-shadow: 0 14px 36px rgba(0,0,0,0.08);
}



/* =========================================================
   Coaching-Panel: altes Column-Grid komplett abschalten
   ========================================================= */

.mega-coaching .et_pb_column{
  display: block !important;          /* Grid/Flex killen */
  grid-template-columns: unset !important;
  grid-template-areas: unset !important;
  align-content: unset !important;

  /* volle Breite je Spalte */
  width: auto !important;
  min-width: 0 !important;

  /* keine Spaltentrenner vom alten Panel */
  border-right: none !important;

  /* normales Divi-Padding */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================
   WISSEN PANEL – Support & Wissenswelt (Specialty Section)
   Section: mega-panel mega-wissen mega-wissen-support
   ========================================================= */

/* Grundfläche */
.mega-panel.mega-wissen-support{
  background: #ffffff;
  padding: 18px 0 !important;
}

/* ---------------------------------------------------------
   LINKER BEREICH: Kontakt / Support
   Column-Klasse: wissen-contact
   --------------------------------------------------------- */
.mega-wissen-support .wissen-contact{
  padding: 24px 28px !important;
  box-sizing: border-box;
}

/* Überschrift links */
.mega-wissen-support .wissen-contact h3,
.mega-wissen-support .wissen-contact .et_pb_module_header{
  margin: 0 0 12px !important;
  font-weight: 700;
}

/* Text links */
.mega-wissen-support .wissen-contact p{
  margin: 0 0 10px !important;
  line-height: 1.45;
  opacity: .9;
}

/* Buttons links */
.wissen-btn-primary,
.wissen-btn-secondary{
  display: inline-block;
  margin-top: 12px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

/* Primär */
.wissen-btn-primary{
  color: #ffffff;
  background: #2f6bff;
}
.wissen-btn-primary:hover{
  background: #2556cc;
  transform: translateY(-1px);
}

/* Sekundär */
.wissen-btn-secondary{
  color: #2f6bff;
  background: rgba(47,107,255,0.10);
}
.wissen-btn-secondary:hover{
  background: rgba(47,107,255,0.18);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------
   RECHTER BEREICH: Wissens-Kacheln
   Rows: wissen-grid-row / wissen-grid-row-2
   Blurbs: wissen-tile
   --------------------------------------------------------- */

/* Rows sauber zentrieren */
.mega-wissen-support .wissen-grid-row{
  width: 100% !important;
  margin: 0 auto !important;
}

/* Abstand zwischen den zwei Reihen */
.mega-wissen-support .wissen-grid-row-2{
  margin-top: 10px !important;
}

/* Spaltenabstand (statt gap – Divi-safe) */
.mega-wissen-support .wissen-grid-row > .et_pb_column{
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------
   KACHEL (Blurb)
   --------------------------------------------------------- */
.mega-wissen-support .wissen-tile{
  background: #ffffff;
  border: 1px solid rgba(15,27,55,0.10);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(15,27,55,0.06);
  padding: 22px 22px 18px !important;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  transition: transform .2s ease, box-shadow .2s ease;
}

/* Hover */
.mega-wissen-support .wissen-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(15,27,55,0.10);
}

/* Icon / Bild */
.mega-wissen-support .wissen-tile .et_pb_main_blurb_image{
  margin-bottom: 10px !important;
}
.mega-wissen-support .wissen-tile img{
  max-height: 48px;
  width: auto;
}

/* Titel */
.mega-wissen-support .wissen-tile .et_pb_module_header{
  margin: 0 0 8px !important;
  font-weight: 700;
  line-height: 1.25;
}

/* Beschreibung */
.mega-wissen-support .wissen-tile .et_pb_blurb_description{
  margin: 0 !important;
  opacity: .85;
  line-height: 1.35;
}

/* Trennlinie */
.mega-wissen-support .wissen-tile:after{
  content: "";
  display: block;
  width: 70%;
  height: 1px;
  margin: 14px auto 0;
  background: rgba(0,0,0,.12);
}

/* ---------------------------------------------------------
   OPTIONAL: ganze Kachel klickbar (falls Titel verlinkt)
   --------------------------------------------------------- */
.mega-wissen-support .wissen-tile a{
  text-decoration: none;
}

/* =========================================================
   WISSEN PANEL – Abstand zwischen Reihe 1 und 2 reduzieren
   ========================================================= */

/* Divi-Standardabstände der zweiten Row killen */
.mega-wissen-support .wissen-grid-row-2{
  margin-top: 4px !important;
  padding-top: 0 !important;
}

/* Falls Divi unten an Reihe 1 noch Luft lässt */
.mega-wissen-support .wissen-grid-row{
  margin-bottom: 0 !important;
}

.mega-wissen-support .wissen-grid-row > .et_pb_column{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}


/* =========================================================
   TOPBAR mit Button (im Header) – Row-Klasse: fh-topbar
   ========================================================= */

.fh-topbar{
  background: #0b1b3a;
  color: rgba(255,255,255,.92);
  padding: 6px 0 !important;            /* flach */
}

.fh-topbar .et_pb_row{
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;

  display: flex !important;
  align-items: center !important;
}

/* Spalten vertikal mittig + ohne Extra-Abstände */
.fh-topbar .et_pb_column{
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Links: Text eine Zeile, ellipsis */
.fh-topbar .fh-topbar-text,
.fh-topbar .fh-topbar-text p{
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px;
  line-height: 1.2;
}

.fh-topbar .fh-topbar-text .et_pb_text_inner{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   TOPBAR – Button als Text Modul
   ========================================================= */

.fh-topbar a.fh-topbar-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;

  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 6px;
  text-decoration: none;

  background: transparent;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.fh-topbar a.fh-topbar-link:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
  transform: translateY(-1px);
}
/* TOPBAR – Soft White Button */
.fh-topbar .et_pb_button.fh-topbar-btn{
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;

  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 8px !important;

  box-shadow: none !important;
  transition: background .2s ease, border-color .2s ease;
}

.fh-topbar .et_pb_button.fh-topbar-btn:hover{
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.6) !important;
}

/* =========================================================
   TOPBAR – Link als Button (Text/Code Modul)
   a.fh-topbar-btn innerhalb der Row .fh-topbar
   ========================================================= */

.fh-topbar a.fh-topbar-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  color: #2f6bff !important;
  background: rgba(47,107,255,0.10) !important;
  border: 1px solid rgba(47,107,255,0.25) !important;
  border-radius: 999px !important;

  box-shadow: 0 4px 14px rgba(47,107,255,0.12) !important;
  text-decoration: none !important;
  white-space: nowrap;

  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.fh-topbar a.fh-topbar-btn:hover{
  background: rgba(47,107,255,0.18) !important;
  border-color: rgba(47,107,255,0.45) !important;
  box-shadow: 0 8px 22px rgba(47,107,255,0.20) !important;
  transform: translateY(-1px);
}

/* TOPBAR – Button: mehr Weiß, weniger Blau */
.fh-topbar a.fh-topbar-btn{
  color: #ffffff !important;
  background: rgba(255,255,255,0.18) !important;  /* sichtbar weiß */
  border-color: rgba(255,255,255,0.55) !important;
  box-shadow: 0 6px 18px rgba(255,255,255,0.18) !important;
}

.fh-topbar a.fh-topbar-btn:hover{
  background: rgba(255,255,255,0.28) !important;
  border-color: rgba(255,255,255,0.85) !important;
  box-shadow: 0 10px 26px rgba(255,255,255,0.28) !important;
}

/* =========================================================
   Footer (Modern) – Top Bereich: Support + Wissen-Kacheln
   Klassen (Divi):
   Section:  fh-footer-top-modern
   Row:      fh-footer-top-row
   Grid-Rows rechts: fh-footer-knowledge-grid
   Blurb-Kacheln:    fh-footer-card
   Button:           fh-footer-support-btn
   ========================================================= */

/* ---------- Grundfläche ---------- */
.fh-footer-top-modern{
  background: linear-gradient(180deg, #0b1b34 0%, #0e254a 100%);
  padding: 60px 0 !important;
  color: #fff;
}

/* Alles im Footer: saubere Umbrüche */
.fh-footer-top-modern,
.fh-footer-top-modern *{
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Row Breite */
.fh-footer-top-modern .et_pb_row.fh-footer-top-row{
  width: 100% !important;
	max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: flex-start;
}

/* Spalten etwas „luftiger“ */
.fh-footer-top-modern .et_pb_row.fh-footer-top-row > .et_pb_column{
  padding: 10px 14px !important;
}

/* ---------- Linke Spalte (Text) ---------- */
.fh-footer-top-modern h3{
  color: #fff !important;
  margin: 10px 0 10px !important;
  font-weight: 700;
  line-height: 1.2;
}

.fh-footer-top-modern p{
  color: rgba(255,255,255,0.82) !important;
  line-height: 1.55;
  margin: 0 0 12px !important;
}

.fh-footer-top-modern strong{
  color: rgba(255,255,255,0.95) !important;
}

/* Links generell im Footer */
.fh-footer-top-modern a{
  color: rgba(170,220,255,0.95);
  text-decoration: none;
}
.fh-footer-top-modern a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Button (Support) ---------- */
.fh-footer-support-btn{
  display: inline-block;
  margin-top: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;

  color: #0b1b34 !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;

  text-decoration: none !important;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.fh-footer-support-btn:hover{
  background: rgba(255,255,255,1) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.20);
}

/* ---------- Rechte Seite: Grid (2 Reihen á 3) ---------- */

/* Abstand zwischen Row 1 und Row 2 verkleinern */

/* Divi-Spalten innerhalb der Grid-Rows sauber */
.fh-footer-top-modern .fh-footer-knowledge-grid > .et_pb_column{
  padding: 10px 12px !important;
  margin: 0 !important;
}

/* ---------- Kachel / Card (Blurb) ---------- */
.fh-footer-card{
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 22px 18px !important;
  text-align: center;

  box-shadow: 0 10px 26px rgba(15, 27, 55, 0.10);
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}

/* Hover */
.fh-footer-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(15, 27, 55, 0.16);
}

/* Icon oben mittig (Blurb Bild/Icon) */
.fh-footer-card .et_pb_main_blurb_image{
  margin: 0 0 12px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Falls du Bild-Icons nutzt */
.fh-footer-card img{
  max-height: 38px;
  width: auto;
  height: auto;
  display: block;
}

/* Titel */
.fh-footer-card .et_pb_module_header{
  color: #0b1b34 !important;
  font-size: 15px !important;   /* vorher deutlich größer */
  font-weight: 600 !important;
  line-height: 1.25;
}


/* Beschreibung AUSBLENDEN (wir nutzen nur Titel) */
.fh-footer-card .et_pb_blurb_description{
  display: none !important;
}

/* Ganze Kachel klickbar, falls du im Blurb einen Link nutzt */
.fh-footer-card a{
  text-decoration: none !important;
  color: inherit !important;
}

/* ---------- Responsiv ---------- */

/* Tablet: linke Spalte etwas Abstand nach unten */
@media (max-width: 980px){
  .fh-footer-top-modern{
    padding: 46px 0 !important;
  }
  .fh-footer-top-modern .et_pb_row.fh-footer-top-row > .et_pb_column:first-child{
    margin-bottom: 10px !important;
  }
}

/* Mobile: Kacheln etwas kompakter */
@media (max-width: 560px){
  .fh-footer-top-modern{
    padding: 36px 0 !important;
  }
  .fh-footer-card{
    padding: 18px 14px !important;
    border-radius: 16px;
  }
}

/* =========================================================
   Footer Links Row (5 Spalten) – Fix: zentriert + TP bleibt 1-zeilig
   ========================================================= */

.fh-footer-links.et_pb_row{
  /* Row wieder wie "normale Divi Row" behandeln */
  width: 92% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;

  padding: 0 !important;
}

/* Spalten: kompakt */
.fh-footer-links.et_pb_row > .et_pb_column{
  float: none !important;
  margin: 0 !important;
  padding: 0 10px !important;
  width: auto !important;

  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Links etwas kompakter */
.fh-footer-links a{
  text-decoration: none;
  font-weight: 500;
  opacity: 0.85;
}
.fh-footer-links a:hover{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Trustpilot-Spalte: bekommt Platz + rechtsbündig */
.fh-footer-links .fh-footer-trustpilot-col{
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;

  /* WICHTIG: genug Mindestbreite, damit nix umbricht */
  min-width: 460px !important;
}

/* Leuchtrahmen um die Trustpilot-Spalte */
.fh-footer-links .fh-footer-trustpilot-col{
  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(24,166,201,0.55) !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 2px rgba(24,166,201,0.15),
    0 12px 28px rgba(24,166,201,0.25) !important;
}

/* Trustpilot selbst nicht umbrechen lassen */
.fh-footer-links .fh-footer-trustpilot-col .trustpilot-widget{
  white-space: nowrap !important;
}

/* Tablet/Mobil: umbruch ok */
@media (max-width: 980px){
  .fh-footer-links.et_pb_row{
    flex-wrap: wrap !important;
  }
  .fh-footer-links .fh-footer-trustpilot-col{
    min-width: 0 !important;
    flex: 0 0 100% !important;
    justify-content: flex-start !important;
    margin-top: 12px !important;
  }
}

/* Erste 4 Spalten: noch enger */
.fh-footer-links.et_pb_row > .et_pb_column:not(.fh-footer-trustpilot-col){
  padding: 0 6px !important;
}

/* =========================================================
   Footer Links Row – Divi 5col überschreiben (ohne gap)
   Row-Klasse: fh-footer-links
   Trustpilot-Spalte: fh-footer-trustpilot-col1
   ========================================================= */

/* Row zentrieren + als Flex */
.et_pb_row.fh-footer-links{
  width: 92% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* Divi 5col-Spaltenbreiten überschreiben */
.et_pb_row.fh-footer-links.et_pb_row_5col > .et_pb_column{
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;

  flex: 0 0 auto !important;
  padding: 0 10px !important; /* Abstand statt gap */
  white-space: nowrap !important;
}

/* Trustpilot-Spalte: nimmt den restlichen Platz + Mindestbreite */
.et_pb_row.fh-footer-links.et_pb_row_5col > .et_pb_column.fh-footer-trustpilot-col1{
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;

  min-width: 520px !important;   /* <- hier sitzt dein "Trustpilot"-Problem */
  padding-left: 18px !important;
}

/* Leuchtrahmen NUR um Trustpilot-Spalte */
.et_pb_row.fh-footer-links .fh-footer-trustpilot-col1{
  border-radius: 999px !important;
  border: 2px solid rgba(24,166,201,0.55) !important;
  background: #fff !important;
  box-shadow:
    0 0 0 2px rgba(24,166,201,0.15),
    0 12px 28px rgba(24,166,201,0.25) !important;
  padding: 10px 18px !important;
}

/* Trustpilot Widget: kein Umbruch, keine Bremsen */
.et_pb_row.fh-footer-links .fh-footer-trustpilot-col1 .trustpilot-widget{
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Falls Trustpilot ein iframe nutzt: niemals auf 100% “quetschen” */
.et_pb_row.fh-footer-links .fh-footer-trustpilot-col1 iframe{
  width: auto !important;
  max-width: none !important;
}

/* Mobile/Tablet: darf umbrechen */
@media (max-width: 980px){
  .et_pb_row.fh-footer-links{
    flex-wrap: wrap !important;
  }
  .et_pb_row.fh-footer-links.et_pb_row_5col > .et_pb_column{
    flex: 0 0 50% !important;
    padding: 6px 10px !important;
  }
  .et_pb_row.fh-footer-links.et_pb_row_5col > .et_pb_column.fh-footer-trustpilot-col1{
    flex: 0 0 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    margin-top: 10px !important;
  }
}

/* =========================================
   Trustpilot im Code-Modul: 300px-Falle killen
   Row: fh-footer-links
   Letzte Spalte: fh-footer-trustpilot-col1
   ========================================= */

.et_pb_row.fh-footer-links .fh-footer-trustpilot-col1 .et_pb_code{
  width: 100% !important;
  max-width: none !important;
}

.et_pb_row.fh-footer-links .fh-footer-trustpilot-col1 .et_pb_code .et_pb_code_inner{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  overflow: visible !important;
}

/* Trustpilot Widget selbst darf nicht auf 100% gequetscht werden */
.et_pb_row.fh-footer-links .fh-footer-trustpilot-col1 .trustpilot-widget{
  width: auto !important;
  max-width: none !important;
  display: inline-flex !important;
  white-space: nowrap !important;
}

/* =========================================================
   Footer-Links Row: Trustpilot-Code-Modul darf NICHT 300px sein
   Row-Klasse: fh-footer-links
   ========================================================= */



/* NEU */
/* ==============================
   Footer Links – stabil & clean
   ============================== */

.fh-footer-link{
  font-size: 14px;
  font-weight: 500;
  color: #000;
  text-decoration: none;
  white-space: nowrap;        /* kein Umbruch */
  transition: color .2s ease, transform .2s ease;
}

.fh-footer-link:hover{
  color: #2f6bff;
  transform: translateY(-1px);
}
/* Mega Panels mit Sicherheit für Mobile ausblenden */
@media (max-width: 980px){
  .mega-panel{ display:none !important; }
}

/* ==========================
   MOBILE HEADER (Brand + Burger)
   ========================== */
@media (max-width: 980px){

  .fh-header-mobile{
    background: #0c1b37 !important;  /* dein dunkles Blau */
    padding: 10px 0 !important;
    position: relative;
    z-index: 9999;
  }

  .fh-header-mobile .et_pb_row{
    width: 92% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Brand kompakt */
  .fh-header-mobile .fh-brand-icon{
    width: 22px !important;
    height: 22px !important;
    margin-right: 6px !important;
  }
  .fh-header-mobile .fh-brand-text{
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  /* Burger rechts */
  .fh-header-mobile .mobile_nav{
    text-align: right !important;
  }

  /* Mobile-Menü Dropdown optisch sauber */
  .fh-header-mobile .et_mobile_menu{
    border-top: 1px solid rgba(255,255,255,0.10) !important;
  }
}
/* Menüpunkt "Anrufen" als Button */
.fh-menu-call > a{
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(24,166,201,0.15);
  color: #18A6C9 !important;
  font-weight: 600;
  line-height: 1.2;
  transition: background .2s ease, transform .15s ease;
}

/* Hover */
.fh-menu-call > a:hover{
  background: rgba(24,166,201,0.28);
  transform: translateY(-1px);
}

.et_pb_menu a[href^="tel:"]{
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(24,166,201,0.15);
  color: #18A6C9 !important;
  font-weight: 600;
}

@media (max-width: 980px){

  /* Wrapper darf keinen Platz "reservieren" */
  .et_pb_menu__wrap{
    justify-content: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Burger selbst */
  .mobile_menu_bar{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    transform: none !important;   /* entfernt translateY/translateX */
  }

  /* Falls Divi links noch Luft lässt */
  .et_mobile_nav_menu{
    margin-left: 0 !important;
  }
}

@media (max-width: 980px){

  /* Divi-Regel aushebeln, die den Burger nach rechts drückt */
  .fh-mobile-menu.et_pb_menu--style-left_aligned .et_pb_menu__wrap{
    justify-content: flex-start !important;
  }

  /* Burger-Container links halten */
  .fh-mobile-menu .et_mobile_nav_menu{
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Zur Sicherheit: kein Transform/Offset */
  .fh-mobile-menu .mobile_menu_bar{
    transform: none !important;
    left: 0 !important;
    right: auto !important;
  }
}
/* NEU FÜR DAS BUchungsfomular */
/* =========================================================
   4-BOXEN / ITEMS (Divi-sicher, ohne gap)
   ========================================================= */
.itm-wrap{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
  font-family: inherit;
  margin-top: 28px;
  margin-bottom: 40px;
}

.itm-grid{
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;   /* Abstand ohne gap */
  margin-right: -12px;
}

.itm-card{
  background: #ffffff;
  border: 1px solid #E6EAF0;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  padding: 18px 18px 16px 18px;

  box-sizing: border-box;
  width: 25%;           /* 4 Spalten */
  margin-left: 12px;
  margin-right: 12px;
  margin-bottom: 18px;
}

.itm-icon{
  font-size: 22px;
  line-height: 1;
  margin-bottom: 10px;
}

.itm-title{
  margin: 0 0 6px 0 !important;
  font-size: 18px;
  font-weight: 900;
  color: #111827;
}

.itm-text{
  margin: 0 !important;
  font-size: 15.5px;
  line-height: 1.45;
  color: #374151;
}

@media (max-width: 980px){
  .itm-card{ width: 50%; }
}

@media (max-width: 520px){
  .itm-card{ width: 100%; }
}

/* Buchungsformular von jotform ohne Rahmen */
.kap-card iframe{
  border: none !important;
  box-shadow: none !important;
  display: block;
}

.kap-card{
  background: #ffffff;
  border-radius: 16px;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.10),
    0 -6px 18px rgba(0,0,0,0.04);
  padding: 12px;
}

/* NEU Kommentare erst nach "mehr anzeigen" einblenden */
.toggle-row {
  display: none !important;
}
.toggle-row.show-row {
  display: flex !important;
}

/* Neu 19.1.26 wegen Umbruch im Hauptmenü, bei der Suche über Knowledge-Base */
/* =========================================================
   Echo Knowledge Base (EPKB) – Header Menügröße fixen
   Ziel: kein Umbruch / gleiche Schrift wie überall
   Voraussetzung: Menü-Modul hat Klasse .fh-mainmenu
   ========================================================= */

/* KB / Template: Divi setzt hier teils 23px – wir fixen NUR dein Hauptmenü */
.et-db #et-boc .et-l .fh-mainmenu.et_pb_menu ul.et-menu > li > a,
.et-db #et-boc .et-l .fh-mainmenu.et_pb_menu ul.et-menu > li > a span{
  font-size: 19px !important;
  line-height: 1.1 !important;
}

/* Neu 19.01.26 Layout für KB */
/* Panel am Artikelende */
.fh-related-panel{
  margin-top: 28px;
  border-top: 1px solid #e5e7eb;
  padding-top: 14px;
}

.fh-related-toggle{
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
}

.fh-related-toggle:hover{ color: #6b7280; }

.fh-related-content{ display: none; padding-top: 8px; }
.fh-related-panel.is-open .fh-related-content{ display: block; }

.fh-related-content a{
  display: block;
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.35;
  color: #6b7280;
  text-decoration: none;
}

.fh-related-content a:hover{
  color: #374151;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Überschrift auf einen Blick etwas mehr Abstand zum Vidio */
.hero-right .hero-side-title{
  padding-top: 14px;
}

.kap-cta-btn-center {
  text-align: center;
  margin-top: 20px;
}