/*
 * PW Executive Troubleshooting Website Stylesheet
 *
 * Dieses Stylesheet enthält alle grundlegenden Stile für die
 * Website von PW Executive Troubleshooting. Das Layout ist
 * responsive, klar strukturiert und orientiert sich an den
 * Farben eines seriösen und modernen Unternehmens. Die
 * Hauptfarben sind ein dunkles Blau für Stabilität und ein
 * warmes Orange als Akzent, der das Auge führt. Schriftarten
 * sind gut lesbar und unterstützen die sachliche Ausrichtung.
 */

/* Farbdefinitionen für eine einfache Anpassung */
:root {
  /* Primärfarben */
  /* Executive Navy – Haupt-Hintergrundfarbe für Ruhe, Kontrolle und Tiefe */
  --primary-color: #020b2d;
  /* Deep Midnight Blue – dunkler Sekundärton für Karten und Boxen */
  --light-color: #0a163d;
  /* Executive Fire Orange – Haupt-Akzentfarbe für Energie und Transformation */
  --secondary-color: #f28a1a;

  /* Textfarben */
  /* Pure White – Hauptschrift auf dunklem Hintergrund */
  --dark-text: #f5f7fa;
  /* Soft Executive Gray – sekundärer Text */
  --gray-text: #b7bec9;

  /* Eis/Wasser-Farben */
  --water-color: #5da9ff;    /* Ice Blue – Klarheit und Fokus */
  --fire-color: #f28a1a;     /* Fire Orange – Hauptakzent bleibt gleich */
  --effect-color: #ffb347;   /* Premium Amber Glow – Goldene Wirkung */

  /* Metallic-Farben für Trennlinien und Logos */
  --silver-color: #bfc4cc;   /* Executive Silver */
  --dark-steel: #5a6475;     /* Dark Steel */
}

/* Gradient-Text-Klasse für Headlines
   Diese Klasse erzeugt einen horizontalen Farbverlauf von Wasser (Ice Blue) zu Feuer (Orange). */
.gradient-text {
  /* Kräftiger Verlauf von Silber-Weiß zu Fire-Orange, mit mehr Gewicht auf
     Orange als klare Leitfarbe (weniger gleichmäßig zwischen Blau/Orange). */
  font-weight: 800;
  background: linear-gradient(90deg, rgba(245, 247, 250, 0.98) 0%, rgba(245, 247, 250, 0.98) 45%, var(--secondary-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

html {
  /* Montserrat bietet eine moderne, klare Typografie, die den Premium‑Charakter des Designs unterstreicht */
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark-text);
  scroll-behavior: smooth;
  /* Die Seite ist bewusst durchgehend dunkel gestaltet – unabhängig vom
     Dark-/Light-Mode des Betriebssystems. color-scheme sorgt dafür, dass
     native Browser-Elemente (Scrollbar, Autofill-Felder, Formular-Chrome)
     zu diesem dunklen Design passen, statt vom OS invertiert zu werden. */
  color-scheme: dark;
}

body {
  margin: 0;
  padding: 0;
  /* Gesamter Hintergrund ist dunkel */
  background-color: var(--primary-color);
}

/* Allgemeine Stile für alle H1‑Überschriften (auch außerhalb der Hero‑Sektion). 
   Eine subtile Lichtwirkung und weicher Glow sorgen für eine hochwertige, 
   cineastische Typografie. */
/* Überschriften: Reduzierter Glow und einheitlicher Lichtstreifen
   Für alle Überschriften gilt ein minimalistischer Ansatz. Statt sichtbarer
   Schatten wird ein feiner Verlauf als Unterstreichung eingesetzt.
   Dies sorgt für Ruhe, Premium‑Anmutung und konsistente Wirkung. */
h1, h2, h3, h4 {
  position: relative;
  z-index: 1;
  text-shadow: none; /* Entfernt sichtbare Glows für klare Typografie */
}

/* Einheitlicher Lichtstreifen unter jeder Hauptüberschrift.  
   Dieser feine Verlauf verbindet Wasser‑ und Feuer‑Töne zu einem subtilen
   Akzent, wie in den Referenzgrafiken. */
/* Lichtstreifen unter der Haupt- und Abschnittsüberschrift (H1, H2) */
h1::after,
h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--water-color), var(--secondary-color));
  /* Etwas zurückhaltender gestaltet – die Linie bleibt sichtbar, dominiert aber nicht */
  opacity: 0.6;
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
}

/* Luminous underline for third- and fourth-level headings (e.g. H3/H4).  
   Eine dünne, dezente Linie bewahrt die Hierarchie und sorgt für Konsistenz. */
h3::after,
h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--water-color), var(--secondary-color));
  opacity: 0.35;
  filter: blur(4px);
  pointer-events: none;
  z-index: -1;
}

/* Überschriften ohne sichtbare Glows.  
   Die Linien darunter sorgen für den dezenten Lichtakzent. */
h2, h3, h4 {
  position: relative;
  text-shadow: none;
}

/* "Der Mensch hinter der Marke": humanisierende Fakten-Kacheln */
.mensch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.mensch-fact {
  background: var(--light-color);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mensch-fact:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.mensch-fact i {
  color: var(--secondary-color);
  font-size: 1.5rem;
  margin-bottom: 0.9rem;
  display: block;
}

.mensch-fact h3 {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  color: #f5f7fa;
}

.mensch-fact p {
  font-size: 0.92rem;
  color: var(--gray-text);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .mensch-grid {
    grid-template-columns: 1fr;
  }
}

/* Meine drei Stärken: Differenzierungs-Kacheln */
.staerken-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.staerken-card {
  background: linear-gradient(160deg, rgba(16, 33, 59, 0.9) 0%, rgba(10, 22, 61, 0.95) 100%);
  border: 1px solid rgba(93, 169, 255, 0.15);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.staerken-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
  border-color: rgba(242, 138, 26, 0.35);
}

.staerken-card i {
  color: var(--secondary-color);
  font-size: 1.7rem;
  margin-bottom: 1rem;
  display: block;
}

.staerken-card h3 {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  font-size: 1.12rem;
  margin-bottom: 0.6rem;
  color: #f5f7fa;
}

.staerken-card p {
  font-size: 0.94rem;
  color: var(--gray-text);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .staerken-grid {
    grid-template-columns: 1fr;
  }
}

/* Trust-Bar direkt unter dem Hero */
#trust-bar {
  padding: 2rem 0;
  background: rgba(5, 15, 38, 0.6);
  border-top: 1px solid rgba(93, 169, 255, 0.12);
  border-bottom: 1px solid rgba(93, 169, 255, 0.12);
}

.trust-bar-label {
  text-align: center;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-text);
  margin-bottom: 1rem;
}

.trust-bar-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}

.trust-bar-logos span {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: #dfe4ea;
  opacity: 0.85;
}

.trust-bar-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(93, 169, 255, 0.1);
}

.trust-bar-stat {
  text-align: center;
}

.trust-bar-stat strong {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  background: linear-gradient(90deg, var(--water-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.trust-bar-stat span {
  font-size: 0.85rem;
  color: var(--gray-text);
}

/* Fractional-COO-Hinweis: dezente, eigenstaendige Karte, zeigt Bandbreite
   ueber die Troubleshooting-Angebote hinaus, ohne dominant zu wirken. */
.coo-callout {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  background: linear-gradient(135deg, rgba(16, 33, 59, 0.9), rgba(10, 22, 61, 0.95));
  border: 1px solid rgba(93, 169, 255, 0.2);
  border-left: 4px solid var(--water-color);
  border-radius: 14px;
  padding: 1.75rem 2rem;
  margin-top: 2.5rem;
  text-align: left;
}

.coo-callout i {
  font-size: 1.7rem;
  color: var(--water-color);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.coo-callout strong {
  display: block;
  color: #f5f7fa;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.coo-callout p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--gray-text);
  line-height: 1.6;
}

.coo-callout p strong {
  display: inline;
  color: var(--water-color);
  font-size: inherit;
  margin: 0;
}

.trust-bar-note {
  text-align: center;
  margin-top: 1.75rem;
  font-size: 0.88rem;
  color: var(--gray-text);
  font-style: italic;
}

.trust-bar-note i {
  color: var(--secondary-color);
  margin-right: 0.4rem;
}

header {
  /* Einheitliches Executive-Navy, damit das Logo nahtlos in den Header
     uebergeht; Tiefe entsteht nur ueber den Box-Shadow darunter. */
  background-color: #020916;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
  /* dezenter Schatten sorgt für visuelle Trennung vom restlichen Inhalt */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  /* Sanfter Übergang für den "Executive Glass"-Effekt beim Scrollen */
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}

/* Executive-Glass-Zustand: Sobald gescrollt wird, wird der Header halbtransparent
   mit Weichzeichner-Effekt (Glasmorphismus) und einer feinen Feuer-Eis-Linie am
   unteren Rand – wirkt hochwertiger als ein starrer, blockiger Header.

   WICHTIG: backdrop-filter/filter dürfen NICHT direkt auf <header> stehen,
   da sie einen neuen "containing block" für position:fixed-Kindelemente
   erzeugen – das mobile Slide-in-Menü (position:fixed) würde dadurch auf
   die Header-Höhe eingequetscht und wäre nach dem Scrollen nur noch zum
   Teil klickbar. Deshalb liegt der Glaseffekt auf einem eigenen, rein
   optischen ::before-Layer hinter dem Header-Inhalt. */
header.is-scrolled {
  background-color: transparent;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid rgba(93, 169, 255, 0.18);
}

header.is-scrolled::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(2, 9, 22, 0.88);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  z-index: -1;
  pointer-events: none;
}

header.is-scrolled::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--water-color), var(--secondary-color));
  opacity: 0.55;
}

/* Sorgt dafür, dass die Navigationsliste vertikal mittig neben dem Logo steht */
.navbar nav {
  display: flex;
  align-items: center;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Kompakter Executive-Header – Größe bleibt konstant, unabhängig vom Scroll-Status */
  padding: 0.5rem 0;
}

.logo {
  display: flex;
  align-items: center;
  /* Kein interner Abstand, da nur das Logo verwendet wird */
  gap: 0;
  font-size: 1rem;
  /* Großzügiger Abstand zwischen Logo und Navigation für eine ruhige Anmutung */
  margin-right: 5rem;
}

/* Logo Bild innerhalb der Navigation */
.logo img {
  /* Standardgröße für Bilder innerhalb des Logo-Containers (nicht mehr aktiv für neue Icon) */
  height: 60px;
  width: auto;
  /* Kein zusätzlicher Filter; Helligkeit wird nur bei Bedarf in logo-icon geregelt */
}

/* Neues Logo-Layout: Icon + Text mit Claim.
   Kompakte, feste Größe – bewusst kein Schrumpf-Effekt beim Scrollen,
   da ein Größensprung eher unruhig als hochwertig wirkt. */
.logo-icon img {
  height: 58px;
  width: auto;
  filter: none;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  /* Die vertikale Trennlinie entfällt, da das Logo eigenständig steht */
  border-left: none;
  padding-left: 0;
}

.logo-text .logo-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark-text);
  text-transform: uppercase;
}

.logo-text .logo-tagline {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
}

.logo-tagline .water {
  color: var(--water-color);
}

.logo-tagline .fire {
  color: var(--fire-color);
}

.logo-tagline .effect {
  color: var(--effect-color);
}

/* Hervorhebung der beiden Zeilen des Schriftzugs im Header-Logo */
.logo-title .exec {
  color: var(--silver-color);
  font-weight: 600;
}
.logo-title .trouble {
  color: var(--secondary-color);
  font-weight: 700;
}

/* Text-Spezialklassen zur farblichen Hervorhebung einzelner Wörter, insbesondere in der Hero-Headline */
/* Metallische Farbverläufe für die Hauptheadlines:  
   Jede Zeile besitzt einen Verlauf von Executive‑Silver zu ihrem jeweiligen Farbakzent. */
.text-water {
  /* Metallischer Verlauf mit heller Reflexion: Ice Blue → Silber → heller Reflex. */
  background: linear-gradient(90deg,
    var(--water-color) 0%,
    var(--silver-color) 60%,
    rgba(255, 255, 255, 0.75) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  /* Leicht erhöhter Zeichenabstand für einen ruhigen Executive‑Look */
  letter-spacing: 0.04em;
  /* Dezente Schatten für eine matte Tiefenwirkung */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 -1px 1px rgba(255, 255, 255, 0.15);
}
.text-fire {
  /* Warmes Metallic: Silber → Fire Orange → Amber Glow. */
  background: linear-gradient(90deg,
    var(--silver-color) 0%,
    var(--secondary-color) 40%,
    var(--effect-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  /* Dezente Schatten für Tiefe und matte Reflexion */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 -1px 1px rgba(255, 255, 255, 0.15);
}

/* Text innerhalb des Logos: der erste Teil (großes "PW") ist im Bild enthalten,
   der zweite Teil wird als separate Beschriftung dargestellt. */
.logo .logo-small {
  font-size: 1.05rem;
  color: var(--secondary-color);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-left: 0.25rem;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 0.96rem;
  transition: color 0.2s ease;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.nav-links a:hover,
.nav-links a:focus {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

/* Hervorhebung des Abschnitts, der gerade im Sichtbereich ist (Scrollspy) */
.nav-links a.active-link {
  color: var(--water-color);
  border-color: var(--water-color);
}

/* Kompakter, dauerhaft sichtbarer CTA-Button direkt in der Navigation.
   So bleibt der Handlungsaufruf jederzeit einen Klick entfernt, auch
   wenn Besucher schon tief auf der Seite gescrollt haben. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  margin-left: 2rem;
  padding: 0.55rem 1.3rem;
  background: linear-gradient(90deg, var(--secondary-color) 0%, var(--effect-color) 100%);
  color: var(--primary-color);
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(242, 138, 26, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-cta:hover,
.nav-cta:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(242, 138, 26, 0.45);
}

/* Hero Bereich */
.hero {
  /* Rein grafischer Hintergrund nach dem Vorbild von Mikes Hero: eine fast
     schwarze Basis mit weichen, unscharfen Farb-Glows statt eines
     Fotohintergrunds. Dadurch bleibt der Hero auf jeder Bildschirmgröße
     gestochen scharf, es gibt keine Kanten oder Cutoffs mehr. */
  background: linear-gradient(160deg, #05070d 0%, #030814 45%, #04070f 100%);
  color: var(--dark-text);
  padding: 8rem 0 6rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Weiche Glow-Flächen in Eis-Blau und Feuer-Orange, ähnlich Mikes grünen
   Ellipsen, hier in den beiden Markenfarben. Reines CSS, daher immer scharf. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Kräftigere, dominantere Glow-Flächen mit Hell-Dunkel-Kontrast in Orange,
     angelehnt an Mikes intensives Hell-/Dunkelgrün. Ein breiter, dunklerer
     Orange-Glow im Hintergrund plus ein konzentrierterer, hellerer Glow
     direkt hinter dem Foto erzeugen mehr Tiefe und Präsenz. */
  background:
    radial-gradient(ellipse 750px 550px at 6% 15%, rgba(93, 169, 255, 0.32) 0%, rgba(4, 7, 15, 0) 68%),
    radial-gradient(ellipse 620px 700px at 92% 55%, rgba(255, 179, 71, 0.45) 0%, rgba(4, 7, 15, 0) 62%),
    radial-gradient(ellipse 950px 900px at 100% 70%, rgba(242, 138, 26, 0.28) 0%, rgba(4, 7, 15, 0) 72%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Diagonale Akzentform rechts, angelehnt an Mikes grünen Streifen, hier im
   Feuer-Eis-Farbverlauf. Klar begrenzt (clip-path), daher immer knackscharf. */
.hero::after {
  content: "";
  position: absolute;
  top: -15%;
  right: -8%;
  width: 50%;
  height: 140%;
  /* Kräftigerer, gesättigterer Verlauf für mehr Präsenz, wie Mikes helle
     Streifenform vor dem dunklen Hintergrund. */
  background: linear-gradient(160deg, rgba(93, 169, 255, 0.38) 0%, rgba(242, 138, 26, 0.45) 55%, rgba(255, 179, 71, 0.3) 100%);
  clip-path: polygon(58% 0%, 100% 0%, 76% 100%, 34% 100%);
  pointer-events: none;
  z-index: 0;
}

/* Zweispaltiges Hero-Layout: Text links, großes Porträtfoto rechts – zeigt
   das Gesicht sofort und schafft Vertrauen, bevor überhaupt gelesen wird. */
.hero-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.5rem;
  text-align: left;
  position: relative;
  z-index: 3;
}

.hero-content {
  flex: 1 1 480px;
  min-width: 0;
}

.hero-photo {
  flex: 0 1 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.hero-photo-frame {
  width: 100%;
  max-width: 380px;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid rgba(93, 169, 255, 0.3);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 45px rgba(242, 138, 26, 0.15);
  position: relative;
}

.hero-photo-frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* Kleines Vertrauens-Badge, das über die untere Kante des Fotos ragt –
   macht die Erfahrung sofort greifbar, ohne den Text zu überladen. */
.hero-photo-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(135deg, var(--secondary-color), var(--effect-color));
  color: var(--primary-color);
  border-radius: 12px;
  padding: 0.7rem 1.6rem;
  margin-top: -2.2rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  z-index: 2;
  max-width: 90%;
  white-space: nowrap;
}

.hero-photo-badge strong {
  font-size: 1.05rem;
  line-height: 1.2;
}

.hero-photo-badge span {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (max-width: 900px) {
  .hero-grid {
    flex-direction: column-reverse;
    text-align: center;
    gap: 2rem;
  }

  .hero-photo {
    flex: none;
    width: 100%;
  }

  .hero-photo-frame {
    max-width: 260px;
  }

  .hero-content {
    text-align: center;
    width: 100%;
  }
}

.hero-promise {
  /* Klare, kräftige Promise-Headline nach dem Vorbild von Mikes Hero:
     fette, solide Typografie statt Verlaufstext, für maximale Prägnanz.
     Wichtig: setzt background/-webkit-text-fill-color explizit zurück,
     da die globale h1-Regel sonst einen unsichtbaren Verlaufstext-Effekt
     erzwingt (bekanntes Muster auf dieser Seite). */
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  font-size: 4.2rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  line-height: 1.15;
  color: #f5f7fa;
  position: relative;
  z-index: 1;
  letter-spacing: -0.01em;
}

/* Highlight-Box um den entscheidenden Satzteil, wie Mikes weiße
   Textmarker-Fläche um "VERKAUFEN" – hier in Feuer-Orange. */
.hero-promise-highlight {
  display: inline-block;
  background: linear-gradient(90deg, var(--secondary-color), var(--effect-color));
  -webkit-text-fill-color: var(--primary-color);
  color: var(--primary-color);
  padding: 0.08em 0.28em;
  border-radius: 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Cinematic Lichtfläche hinter jeder H1‑Überschrift */
.hero h1::after,
h1::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Die Breite deckt den gesamten Text ab, die Höhe passt sich automatisch an.
     Der Glow verbreitet sich weich nach außen. */
  width: 110%;
  height: 1.4em;
  /* Reduzierte Hintergrundbeleuchtung: feinere Farben und kleinere Ausdehnung */
  background: radial-gradient(circle at center, rgba(93, 169, 255, 0.08) 0%, rgba(242, 138, 26, 0.06) 30%, rgba(0, 0, 0, 0) 60%);
  opacity: 0.25;
  filter: blur(15px);
  z-index: -1;
  pointer-events: none;
}

.hero p {
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto 2rem;
  color: var(--gray-text);
}

/* Unterzeile im Hero für den Claim */
.hero .subtitle {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--secondary-color);
  font-weight: bold;
}

/* Separate Taglines in der Hero-Sektion für eine klarere Hierarchie */
.hero .hero-tagline {
  /* Größere Tagline mit kräftigerem Akzent */
  font-size: 2.4rem;
  color: var(--secondary-color);
  font-weight: 600;
  margin-bottom: 0.6rem;
  position: relative;
  /* Subtile Lichtspur für die Tagline – reduziert und weich, keine Neonwirkung */
  text-shadow:
    0 0 2px rgba(242, 138, 26, 0.08),
    0 0 4px rgba(242, 138, 26, 0.05);
}

.hero-eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--water-color);
  margin-bottom: 0.5rem;
}

.hero .hero-description {
  font-size: 1.35rem;
  color: var(--gray-text);
  max-width: 600px;
  margin: 0 0 2rem;
}

.hero-content .hero-secondary-cta {
  text-align: left;
}

@media (max-width: 900px) {
  .hero-content .hero-secondary-cta {
    text-align: center;
  }
}

/* Animations für die Hero-Inhalte. Diese sorgen für einen sanften
   Fade-in-Effekt beim Laden der Seite und verleihen dem Auftritt
   eine moderne, dynamische Note. */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero .hero-eyebrow,
.hero-promise,
.hero .hero-description,
.hero .cta-button,
.hero .whatsapp-button,
.hero .hero-secondary-cta,
.hero .hero-photo {
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
}

.hero .hero-eyebrow { animation-delay: 0.3s; }
.hero-promise { animation-delay: 0.45s; }
.hero .hero-description { animation-delay: 0.8s; }
.hero .cta-button { animation-delay: 1s; }
.hero .whatsapp-button { animation-delay: 1s; }
.hero .hero-secondary-cta { animation-delay: 1.2s; }
.hero .hero-photo { animation-delay: 0.4s; }

.cta-button {
  display: inline-flex;
  align-items: center;
  /* Premium‑Gradient für Buttons: von Fire Orange zu Amber Glow */
  background: linear-gradient(90deg, var(--secondary-color) 0%, var(--effect-color) 100%);
  color: var(--primary-color);
  padding: 0.85rem 2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 0 12px rgba(242, 138, 26, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  gap: 0.6rem;
}

.cta-button:hover,
.cta-button:focus {
  /* Intensiverer Farbverlauf und stärkere Schatten beim Hover/Focus für Buttons */
  background: linear-gradient(90deg, #c66311 0%, #f28a1a 100%);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(242, 138, 26, 0.45), 0 6px 14px rgba(0, 0, 0, 0.45);
}

/* Icon innerhalb des CTA‑Buttons */
.cta-button i {
  margin-left: 0.3rem;
}

/* Hauptabschnitte */
section {
  /* Mehr Luft zwischen den Abschnitten für einen ruhigen, hochwertigen Eindruck */
  padding: 5rem 0;
  color: var(--dark-text);
}

/* Call to Action: eine elegante Sektion mit dunklem Hintergrund und feiner Akzentlinie.
   Diese ersetzt den massiven orangen Balken und fügt sich harmonisch in den Premium‑Look ein. */
#cta {
  background:
    linear-gradient(180deg, #0a163d 0%, #020b2d 100%);
  text-align: center;
  position: relative;
  padding: 5rem 0;
  color: var(--dark-text);
}

/* Selbstbewusste "Zwei-Optionen"-Zeile: klare Entscheidung statt vager
   Empfehlung – bewusst direkt formuliert ("mit Rückgrat verkaufen"). */
#cta .cta-decision {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--secondary-color);
  max-width: 620px;
  margin: 0 auto 1.25rem;
}

/* Dünne orangefarbene Linie oben am CTA‑Bereich als hochwertiger Akzent */
#cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(242, 138, 26, 0.0) 0%, rgba(242, 138, 26, 0.35) 50%, rgba(242, 138, 26, 0.0) 100%);
  box-shadow: 0 0 3px rgba(242, 138, 26, 0.25);
  pointer-events: none;
  z-index: 1;
}

#cta h2 {
  color: var(--secondary-color);
  margin-bottom: 0.75rem;
  font-size: 2.2rem;
}

#cta p {
  color: var(--gray-text);
  max-width: 800px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
}

#cta .cta-button {
  /* Premium‑CTA‑Button im unteren Abschnitt.  
     Gleicher Gradient wie die regulären Buttons, aber leicht größer dimensioniert */
  background: linear-gradient(90deg, var(--secondary-color) 0%, var(--effect-color) 100%);
  color: var(--primary-color);
  padding: 0.85rem 2.2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 0 12px rgba(242, 138, 26, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

#cta .cta-button:hover,
#cta .cta-button:focus {
  /* Intensiverer Glow für CTA‑Buttons beim Hover/Focus */
  background: linear-gradient(90deg, #c66311 0%, #f28a1a 100%);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(242, 138, 26, 0.45), 0 6px 14px rgba(0, 0, 0, 0.45);
}

section:nth-child(even) {
  background-color: var(--primary-color);
}

section h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--secondary-color);
  text-align: center;
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
  /* Kein sichtbarer Glow. Die Lichtwirkung wird durch den feinen Lichtstreifen (Pseudo‑Element) erzeugt. */
  text-shadow: none;
}

/* Entfernt separate Glowline für H2 in Sections, da globale Definition ausreichend ist */

/* Radial Glow hinter jeder Section-Überschrift */
/* Entfernt den radialen Glow hinter H2‑Überschriften. Der Lichtstreifen ersetzt den Akzent. */
section h2::before {
  content: "";
  display: none;
}

section h3 {
  font-size: 1.4rem;
  margin-top: 1.5rem;
  color: var(--secondary-color);
}

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  margin-top: 3rem;
  justify-content: center;
}

.feature {
  flex: 1 1 320px;
  padding: 2rem 2rem 2rem 4.5rem;
  /* Glasartige Transparenz auf dunklem Hintergrund */
  /* Leichte Transparenz und Glass‑Effekt für einen modernen, ruhigen Eindruck */
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  text-align: center;
}

.feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(233, 123, 23, 0.4), 0 6px 20px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.25);
}

.feature i {
  font-size: 2rem;
  color: var(--secondary-color);
  margin-bottom: 0.8rem;
}

.feature-title {
  font-size: 1.3rem;
  margin: 0.5rem 0;
  font-weight: bold;
  color: var(--dark-text);
}

.feature p {
  font-size: 0.95rem;
  color: var(--gray-text);
}

/* Über mich */
.about {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: center;
  justify-content: center;
  text-align: left;
}

.about .bio {
  flex: 2 1 400px;
}

.about .bio p {
  margin-bottom: 1rem;
  color: var(--gray-text);
}

/* Kernfakten-Liste im Über-mich-Bereich: hebt Zahlen und Erfahrung hervor */
.bio-facts {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 1rem 1.2rem;
  background: var(--light-color);
  border-radius: 10px;
  border-left: 3px solid var(--secondary-color);
}

.bio-facts li {
  color: var(--dark-text);
  margin-bottom: 0.6rem;
  font-size: 0.98rem;
}

.bio-facts li:last-child {
  margin-bottom: 0;
}

.bio-facts i {
  color: var(--secondary-color);
  margin-right: 0.5rem;
}

.linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--water-color);
  text-decoration: none;
  font-weight: 600;
  margin-top: 0.5rem;
  padding: 0.6rem 0;
  min-height: 44px;
  transition: color 0.2s ease;
}

.linkedin-link:hover,
.linkedin-link:focus {
  color: var(--secondary-color);
}

.linkedin-link i {
  font-size: 1.2rem;
}

/* Sekundärer, weicherer Call-to-Action neben dem Haupt-CTA-Button */
.hero-secondary-cta,
#cta .hero-secondary-cta,
.hero .hero-secondary-cta {
  margin-top: 1.75rem;
  font-size: 0.95rem;
  color: var(--gray-text);
}

.hero-secondary-cta a {
  color: var(--water-color);
  text-decoration: underline;
}

.hero-secondary-cta a:hover,
.hero-secondary-cta a:focus {
  color: var(--secondary-color);
}

.about .portrait {
  flex: 1 1 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about .portrait img {
  max-width: 260px;
  border-radius: 50%;
  border: 4px solid var(--secondary-color);
}

/* FAQ */
.faq {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.faq-item {
  margin-bottom: 1rem;
  border: 1px solid rgba(93, 169, 255, 0.14);
  border-radius: 10px;
  background: rgba(16, 33, 59, 0.35);
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.4rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.faq-question span {
  font-size: 1.05rem;
  font-weight: 600;
  color: #f5f7fa;
}

.faq-icon {
  flex-shrink: 0;
  color: var(--secondary-color);
  font-size: 0.9rem;
  transition: transform 0.25s ease;
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
}

.faq-question:hover span {
  color: var(--secondary-color);
}

.faq-answer {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.3s ease;
}

.faq-question[aria-expanded="true"] + .faq-answer {
  grid-template-rows: minmax(0, 1fr);
}

.faq-answer > p {
  overflow: hidden;
  min-height: 0;
  font-size: 0.95rem;
  color: var(--gray-text);
  padding: 0 1.4rem 1.2rem;
  margin: 0;
}

/*
 * Info-Blöcke für die Abschnitte "Die Realität operativer Führung" und
 * "Ihre Vorteile". Diese Blöcke kombinieren glassmorphism mit weichen
 * Schatten, um Inhalte modern, ruhig und hochwertig zu präsentieren.
 */
.info-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 3rem;
  justify-content: center;
}

.info-block {
  flex: 1 1 300px;
  padding: 2rem 2rem 2rem 4.5rem;
  /* Hochwertiger Karten-Look: dunkleres Glas mit feinem Rand und stärkerer Tiefe */
  background: rgba(5, 8, 17, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  text-align: left;
  position: relative;
  position: relative;
}

.info-block:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(233, 123, 23, 0.4), 0 6px 18px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.15);
}

.info-block i {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  font-size: 2.4rem;
  color: #FF9A1F; /* Einheitliche Icon-Farbe (warm metallic orange) */
  margin-bottom: 0;
  z-index: 1;
  z-index: 1;
}

.info-block h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--dark-text);
  font-weight: 600;
  text-transform: uppercase;
}

.info-block p {
  font-size: 1rem;
  color: var(--gray-text);
}

/* Listen innerhalb der Info‑Blöcke für die Realität.  
   Wir entfernen Standard-Aufzählungszeichen und ersetzen sie durch
   individuelle farbige Marker für eine klarere Darstellung. */
.info-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.info-block ul li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.45rem;
  color: var(--gray-text);
  font-size: 0.95rem;
}
.info-block ul li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--secondary-color);
  font-size: 1.3rem;
  line-height: 1;
}

/* Realitaet-Blöcke: aggressiverer Hintergrundverlauf für die Karten im Abschnitt
   "Die Realität operativer Führung". Ein diagonal verlaufender Gradient von
   Deep Water Blue zu Fire Orange erzeugt Energie, während der Text weiß bleibt. */
.info-block--realitaet {
  background: linear-gradient(135deg, rgba(24, 59, 115, 0.85) 0%, rgba(242, 138, 26, 0.85) 100%);
  color: #f5f7fa;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Vorteile-Boxen: hellblau-dunkelblauer Verlauf für die Vorteile unter "Was Ihnen die Zusammenarbeit mit mir bringt".
   Ein diagonaler Gradient aus Ice Blue zu Deep Water Blue sorgt für ein ruhiges, aber klar erkennbares
   Highlight. Die Schrift bleibt weiß für optimale Lesbarkeit. */
/* ===========================================================
   "Vorteile"-Sektion: bewusster Stimmungsbruch innerhalb der
   dramatischen Feuer-Eis-Optik. Statt Dunkelblau ein warmer,
   heller Ton – soll Ruhe, Zuversicht und ein positives Gefühl
   auslösen ("So kann sich Führung wieder anfühlen"). Der
   Hintergrund blendet oben und unten sanft in das umgebende
   Executive-Navy über, damit kein harter Bruch entsteht.
   =========================================================== */
#vorteile {
  background: linear-gradient(180deg,
    #020b2d 0%,
    #fdf3e4 10%,
    #fdf1e0 50%,
    #fbe8cf 90%,
    #020b2d 100%);
  color: #4a463e;
}

#vorteile h2 {
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color) 55%, var(--secondary-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

#vorteile h2::after {
  background: linear-gradient(90deg, var(--secondary-color), var(--effect-color));
  opacity: 0.5;
}

#vorteile > .container > p {
  color: #5c574c;
}

.vorteile-lead {
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--primary-color) !important;
  margin-top: 1.5rem !important;
}

.info-block--warm {
  background: #fffdfa;
  border: 1px solid rgba(43, 47, 56, 0.07);
  box-shadow: 0 10px 28px rgba(120, 90, 40, 0.12);
  color: #4a463e;
}

.info-block--warm:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(242, 138, 26, 0.22), 0 6px 16px rgba(120, 90, 40, 0.12);
  border-color: rgba(242, 138, 26, 0.3);
}

.info-block--warm i {
  color: var(--secondary-color);
}

.info-block--warm h3 {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  color: var(--primary-color);
}

.info-block--warm h3::after {
  display: none;
}

.info-block--warm p {
  color: #6b6558;
}

/* Abschluss-Callout: sanfte Verlustaversion + direkter Handlungsaufruf,
   platziert im warmen, positiven Moment der Seite. */
.vorteile-callout {
  margin-top: 3.5rem;
  padding: 2.75rem 2rem;
  background: linear-gradient(135deg, rgba(242, 138, 26, 0.12), rgba(255, 179, 71, 0.2));
  border: 1px solid rgba(242, 138, 26, 0.28);
  border-radius: 20px;
  text-align: center;
}

.vorteile-callout p {
  font-size: 1.2rem;
  color: #3a3630;
  max-width: 640px;
  margin: 0 auto 1.6rem;
  line-height: 1.6;
}

.vorteile-callout strong {
  color: var(--primary-color);
}

.vorteile-callout .cta-button {
  margin: 0 auto;
}

/* ===========================================================
   Testimonial-Sektion: echter Vertrauensbeweis direkt nach dem
   Nutzen-Versprechen. Dunkle, elegante Karte mit großem
   Anführungszeichen-Akzent – wirkt seriös/"executive", nicht
   wie ein beliebiges Bewertungsportal-Widget.
   =========================================================== */
#stimmen {
  padding-top: 3rem;
}

.testimonial-card {
  max-width: 760px;
  margin: 3rem auto 0;
  background: linear-gradient(160deg, rgba(16, 33, 59, 0.9) 0%, rgba(10, 22, 61, 0.95) 100%);
  border: 1px solid rgba(242, 138, 26, 0.25);
  border-left: 4px solid var(--secondary-color);
  border-radius: 14px;
  padding: 2.75rem 2.5rem;
  text-align: left;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  position: relative;
}

.testimonial-quote-icon {
  color: var(--secondary-color);
  font-size: 1.8rem;
  opacity: 0.5;
  margin-bottom: 1rem;
  display: block;
}

.testimonial-text {
  color: var(--gray-text);
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.testimonial-highlight {
  font-size: 1.2rem;
  font-weight: 600;
  font-style: italic;
  color: #f5f7fa;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.5rem;
  margin-bottom: 1.75rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testimonial-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--secondary-color), var(--effect-color));
  color: var(--primary-color);
  font-weight: 700;
  font-size: 1.3rem;
}

.testimonial-author div {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.testimonial-author strong {
  color: #f5f7fa;
  font-size: 1.05rem;
}

.testimonial-author span {
  color: var(--gray-text);
  font-size: 0.9rem;
}

/* ===========================================================
   "Ihr Weg"-Sektion: horizontale Prozess-Visualisierung vom
   Alarmmodus (IST) zur souveränen Führung (SOLL), entlang des
   SOR-Systems. Auf Mobile wird daraus eine vertikale Zeitlinie.
   =========================================================== */
.journey {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin-top: 4rem;
  gap: 0.5rem;
}

.journey-line {
  position: absolute;
  top: 24px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, var(--water-color), var(--secondary-color));
  opacity: 0.4;
  z-index: 0;
}

.journey-step {
  flex: 1;
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 0.6rem;
}

.journey-dot {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  margin: 0 auto 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  background: linear-gradient(135deg, rgba(93, 169, 255, 0.9), rgba(24, 59, 115, 0.9));
  color: #f5f7fa;
  border: 3px solid var(--primary-color);
  box-shadow: 0 0 0 1px rgba(93, 169, 255, 0.3);
}

.journey-dot--final {
  background: linear-gradient(135deg, var(--secondary-color), var(--effect-color));
  color: var(--primary-color);
  box-shadow: 0 0 18px rgba(242, 138, 26, 0.45);
}

.journey-step h3 {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  font-size: 1.02rem;
  margin-bottom: 0.5rem;
  color: #f5f7fa;
}

.journey-step p {
  font-size: 0.88rem;
  color: var(--gray-text);
  line-height: 1.55;
}

.journey-step--final h3 {
  color: var(--secondary-color);
}

@media (max-width: 900px) {
  .journey {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.2rem;
    margin-top: 2.5rem;
    padding-left: 1.5rem;
  }

  .journey-line {
    top: 0;
    bottom: 0;
    left: 23px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .journey-step {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    text-align: left;
    padding: 0;
    width: 100%;
  }

  .journey-dot {
    margin: 0;
  }

  .journey-step h3,
  .journey-step p {
    max-width: 480px;
  }
}

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: center;
  margin-top: 3rem;
}

.feature {
  flex: 1 1 300px;
  padding: 2rem;
  background: rgba(5, 8, 17, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  text-align: left;
}

.feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(233, 123, 23, 0.4), 0 6px 18px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.15);
}

.feature i {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  font-size: 2.4rem;
  color: #FF9A1F; /* Einheitliche Icon-Farbe (warm metallic orange) */
  margin-bottom: 0;
}

.feature .feature-title {
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--dark-text);
  margin-bottom: 1rem;
}

.feature p {
  font-size: 1rem;
  color: var(--gray-text);
  margin: 0;
}

/* Spezielle Gestaltung für den „Ergebnis“-Block (Das Ergebnis):
   Überschrift und Liste werden optisch zentriert. Die Liste bleibt innerhalb
   des zentrierten Containers linksbündig, damit die Bulletpoints sauber stehen. */
.result-block {
  text-align: center;
}
.result-block ul {
  display: inline-block;
  text-align: left;
  margin: 0 auto;
}
.result-block ul li {
  text-align: left;
}

/*
 * Metallic‑Effekt für Überschriften
 * Die Typografie erhält einen dezenten, gebürsteten Metalllook. Dabei
 * werden lineare Farbverläufe verwendet, die von Eisblau über Silber
 * zu warmen Orange‑ und Goldtönen reichen. Diese Verläufe werden
 * mittels background‑clip nur auf den Text angewendet, sodass die
 * Lesbarkeit hoch bleibt und keine grellen Neon‑Glows entstehen.
 */
h1 {
  background: linear-gradient(90deg,
    var(--water-color) 0%,
    var(--silver-color) 50%,
    var(--secondary-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Für H2 verwenden wir einen helleren Verlauf: Silber und hellgrau
   mit einem warmen Reflex am Ende. So bleibt die Wirkung ruhig und
   hochwertig ohne grelles Orange. */
h2 {
  font-weight: 800;
  background: linear-gradient(90deg,
    rgba(245, 247, 250, 0.98) 0%,
    rgba(245, 247, 250, 0.98) 55%,
    rgba(255, 179, 71, 0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* H3 und H4 erhalten einen subtilen Silberverlauf. Dies gibt
   den Unterüberschriften eine leichte metallische Nuance, bleibt
   aber zurückhaltender als bei H1 und H2. */
h3, h4 {
  background: linear-gradient(90deg,
    rgba(191, 196, 204, 0.8) 0%,
    rgba(245, 247, 250, 0.9) 50%,
    rgba(191, 196, 204, 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}


/* Grafik für den Abschnitt "Was Ihnen die Zusammenarbeit mit mir bringt".
   Die Grafik stellt die Transformation von Chaos zu Klarheit dar.  */
/* Vergleich der Ausgangssituation und des Ergebnisses.  
   Anstelle einer großen Grafik werden zwei halbtransparente Boxen dargestellt,
   die Probleme und Erfolge gegenüberstellen. */
.transformation-comparison {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: center;
  align-items: center;
  margin: 3rem 0;
}

/* Pfeilspalte: Zeigt den Übergang von Chaos zu Klarheit */
.transformation-arrow {
  font-size: 3rem;
  color: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.transformation-comparison > div {
  flex: 1 1 280px;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.transformation-comparison > div:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(233, 123, 23, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4);
}
.transformation-comparison h3 {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  color: var(--secondary-color);
  text-align: center;
}
.transformation-comparison ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.transformation-comparison li {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
  color: var(--gray-text);
}
.transformation-comparison li i {
  margin-right: 0.6rem;
  font-size: 1.2rem;
  color: var(--secondary-color);
}

/* Visueller Pfeil zwischen Negativ- und Positiv-Spalte */
.transformation-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fixe Breite sorgt dafür, dass der Pfeil sichtbar bleibt und nicht umbricht */
  flex: 0 0 3rem;
  font-size: 2.2rem;
  color: var(--secondary-color);
  padding: 0 0.5rem;
}

/* WhatsApp-Alternative: reduziert Hemmschwelle für alle, die nicht gerne
   telefonieren oder Formulare ausfüllen. Bewusst prominent vor dem Formular
   platziert, nicht als Fußnote danach. */
.whatsapp-callout {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.12), rgba(37, 211, 102, 0.04));
  border: 1px solid rgba(37, 211, 102, 0.3);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  margin: 2rem auto;
  max-width: 600px;
  text-align: left;
}

.whatsapp-callout > i.fa-whatsapp {
  font-size: 2.2rem;
  color: #25D366;
  flex-shrink: 0;
}

.whatsapp-callout strong {
  display: block;
  color: #f5f7fa;
  margin-bottom: 0.3rem;
  font-size: 1.02rem;
}

.whatsapp-callout p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--gray-text);
}

.whatsapp-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #25D366;
  color: #06301c;
  font-weight: 700;
  padding: 0.7rem 1.3rem;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-button:hover,
.whatsapp-button:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

/* CTA-Button-Gruppe: Haupt-CTA (Buddy-Call) und WhatsApp-Alternative klar
   nebeneinander statt in einem langen Satz versteckt. Reduziert Reibung,
   der Kunde sieht sofort zwei konkrete Wege, Kontakt aufzunehmen. */
.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-cta-group .whatsapp-button {
  margin-left: 0;
}

.hero-cta-group--center {
  justify-content: center;
}

.or-divider {
  text-align: center;
  color: var(--gray-text);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1.5rem;
}

/* Formular */
form {
  max-width: 600px;
  margin: 0 auto;
  background-color: var(--light-color);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

form .form-group {
  margin-bottom: 1rem;
}

form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: var(--secondary-color);
}

form input,
form textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #495e8b;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #10213b;
  color: var(--dark-text);
}

/* Verhindert, dass Browser-Autofill (z. B. bei E-Mail/Name) das Feld hell
   überlagert und den Text unlesbar macht – besonders wichtig bei Dark Mode. */
form input:-webkit-autofill,
form input:-webkit-autofill:hover,
form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #10213b inset;
  -webkit-text-fill-color: var(--dark-text);
  caret-color: var(--dark-text);
}

form textarea {
  resize: vertical;
  min-height: 120px;
}

form button {
  background-color: var(--secondary-color);
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

form button:hover,
form button:focus {
  background-color: #c66311;
}

/* Kontaktseite: Zentrierte Darstellung von Termin-Formular und weiteren Kontaktinformationen */
#termin .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#termin form {
  width: 100%;
}

/* Zusätzliche Kontaktmöglichkeiten in der Kontaktseite zentrieren */
#kontakt-more .container {
  text-align: center;
}

/* Footer */
footer {
  /* Der Footer erhält denselben dunklen Gradient wie der Header,
     damit das Logo harmonisch integriert wird. Eine dezente Linie am oberen Rand
     sorgt für einen hochwertigen Abschluss. */
  position: relative;
  /*
   * Der Footer verwendet denselben dunklen Corporate‑Verlauf wie der Header, damit
   * Logo und Hintergrund harmonisch verschmelzen. Die Farben sind identisch mit dem
   * neuen Hauptton (#050E1D) und dem tieferen Blau (#020B2D).
   */
  /* Der Footer erhält die gleiche einheitliche Hintergrundfarbe wie der Header,
     sodass das Logo ohne sichtbaren Kasten integriert wird. */
  background-color: #020916;
  color: #b0b9c6;
  padding: 2rem 0;
  font-size: 0.9rem;
}

/* Dünne Premium-Linie am oberen Rand des Footers. Sie verwendet die
   Akzentfarbe und erzeugt einen dezenten Glow, um einen eleganten Abschluss
   zu schaffen. */
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(242, 138, 26, 0.0) 0%, rgba(242, 138, 26, 0.35) 50%, rgba(242, 138, 26, 0.0) 100%);
  box-shadow: 0 0 3px rgba(242, 138, 26, 0.25);
  pointer-events: none;
  z-index: 1;
}

footer .footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

/* Footer-Logo: kompakte, elegante Darstellung ohne sichtbaren Hintergrund */
.footer-logo img {
  /* Das Logo im Footer ist jetzt leicht größer, um den vorhandenen Raum besser zu nutzen */
  /* Auch im Footer leicht größer, um das Logo elegant zu integrieren */
  height: 75px;
  width: auto;
  display: block;
}

footer a {
  color: var(--secondary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

footer a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Cookie Banner */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #222;
  color: #fff;
  padding: 1rem;
  display: none;
  align-items: center;
  justify-content: space-between;
  z-index: 9999;
  font-size: 0.9rem;
}

#cookie-banner button {
  background-color: var(--secondary-color);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

#cookie-banner button:hover {
  background-color: #d48f1a;
}

/* Responsivität */
@media (max-width: 768px) {
  /* Container passt sich dem mobilen Bildschirm an */
  .container {
    width: 95%;
    max-width: 100%;
    padding: 0 0.5rem;
  }
  /* Navigationsbereich: vertikale Anordnung und mehr Abstand */
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .logo {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  .nav-links {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.5rem;
    justify-content: center;
  }
  .nav-links li {
    flex: 1 1 45%;
    text-align: center;
  }
  /* Hero‑Abschnitt: kleinere Abstände und Schriftgrößen */
  .hero {
    padding: 8rem 0 6rem;
    text-align: center;
  }
  .hero-promise {
    font-size: 3rem;
    line-height: 1.2;
  }
  .hero .hero-description {
    font-size: 0.95rem;
    max-width: 90%;
  }
  /* Info‑Blöcke untereinander anordnen */
  .info-blocks {
    flex-direction: column;
    align-items: center;
  }
  .info-block {
    flex: 1 1 100%;
    width: 100%;
    margin-bottom: 2rem;
    padding: 1.8rem 1.6rem 1.8rem 4rem;
  }
  /* Features (Philosophie & Dienstleistungen) untereinander anordnen */
  .features {
    flex-direction: column;
    align-items: center;
  }
  .feature {
    flex: 1 1 100%;
    width: 100%;
    margin-bottom: 2rem;
    padding: 1.8rem 1.6rem 1.8rem 4rem;
  }
  /* Über‑mich‑Abschnitt: Spalten stapeln */
  .about {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .about .bio {
    flex: 1 1 100%;
  }
  .about .portrait {
    margin-top: 1.5rem;
  }
  /* Formularfelder in voller Breite anzeigen */
  #termin form .form-group,
  form .form-group {
    display: flex;
    flex-direction: column;
  }
  #termin form .form-group input,
  #termin form .form-group textarea,
  form .form-group input,
  form .form-group textarea {
    width: 100%;
  }
  #termin form button,
  form button {
    width: 100%;
    display: block;
    text-align: center;
  }
}
/* =========================================================
   Mobile Final Fixes: keine horizontalen Überläufe, echtes Burger-Menü,
   kompakter Hero und saubere Smartphone-Darstellung.
   ========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  max-width: 100%;
}

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(5, 8, 17, 0.55);
  color: var(--dark-text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--silver-color), var(--secondary-color));
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
  body.menu-open {
    overflow: hidden;
  }

  .nav-cta {
    display: none;
  }

  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  header {
    overflow-x: clip;
  }

  .navbar {
    width: 100%;
    min-height: 76px;
    padding: 0.55rem 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .logo {
    margin-right: 0;
    margin-bottom: 0;
    min-width: 0;
  }

  .logo-icon img {
    height: 54px;
    width: auto;
    max-width: min(68vw, 260px);
    object-fit: contain;
  }

  .nav-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    position: relative;
    z-index: 1201;
  }

  .navbar nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(82vw, 360px);
    max-width: 100vw;
    transform: translateX(105%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s ease, opacity 0.28s ease;
    background:
      radial-gradient(circle at 20% 10%, rgba(93, 169, 255, 0.12), transparent 42%),
      radial-gradient(circle at 85% 35%, rgba(242, 138, 26, 0.12), transparent 42%),
      #020916;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -24px 0 55px rgba(0, 0, 0, 0.55);
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6.2rem 1.5rem 2rem;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .navbar nav.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
  }

  .nav-links li {
    width: 100%;
    flex: none;
    text-align: left;
  }

  .nav-links a {
    display: block;
    width: 100%;
    padding: 1rem 0.2rem;
    font-size: 1.12rem;
    line-height: 1.2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .hero {
    width: 100%;
    min-height: auto;
    padding: 6.5rem 0 4.6rem;
    text-align: center;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
  }

  .hero .container {
    max-width: 100%;
  }

  .hero-promise {
    font-size: clamp(2.15rem, 11vw, 3.35rem);
    line-height: 1.13;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.95rem;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .hero .hero-description,
  .hero p {
    max-width: 34rem;
    width: 100%;
    font-size: 0.96rem;
    line-height: 1.65;
    margin-bottom: 1.4rem;
  }

  .cta-button,
  .hero .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 320px);
    max-width: 100%;
    min-height: 48px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .hero-cta-group .whatsapp-button {
    width: min(100%, 320px);
    justify-content: center;
  }

  .hero .hero-secondary-cta {
    margin-top: 1.5rem;
    padding: 0 0.5rem;
  }

  section {
    padding-left: 0;
    padding-right: 0;
    overflow-x: clip;
  }

  section h2 {
    font-size: clamp(1.65rem, 7vw, 2.35rem);
    line-height: 1.18;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  section p {
    font-size: 0.98rem;
    line-height: 1.75;
  }

  .info-blocks,
  .features {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    margin-top: 2rem;
  }

  .info-block,
  .feature {
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 0;
    padding: 1.55rem 1.1rem 1.55rem 4rem;
    border-radius: 14px;
    overflow: hidden;
  }

  .info-block i,
  .feature i {
    top: 1.45rem;
    left: 1.25rem;
    font-size: 2rem;
  }

  .info-block h3,
  .feature .feature-title {
    font-size: 1.1rem;
    line-height: 1.25;
    margin-bottom: 0.8rem;
  }

  .info-block p,
  .feature p,
  .info-block ul li {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .about {
    width: 100%;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 2rem;
  }

  .about .bio,
  .about .portrait {
    width: 100%;
    flex: 0 1 auto;
  }

  .about .portrait img {
    width: min(230px, 75vw);
    max-width: 100%;
  }

  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.4rem;
  }

  .footer-logo img {
    max-width: min(75vw, 260px);
    height: auto;
  }

  #termin .container,
  #kontakt-more .container {
    width: 100%;
  }

  #termin form,
  form {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  form input,
  form textarea,
  form select {
    width: 100%;
    max-width: 100%;
  }

  form button {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
  }

  #cookie-banner {
    max-width: 100vw;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
}

@media (max-width: 420px) {
  .container {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .logo-icon img {
    height: 46px;
    max-width: 66vw;
  }

  .hero {
    padding: 5.4rem 0 3.8rem;
  }

  .hero-promise {
    font-size: clamp(1.95rem, 10.5vw, 2.65rem);
    line-height: 1.16;
  }

  .info-block,
  .feature {
    padding: 1.35rem 1rem 1.35rem 3.65rem;
  }

  .info-block i,
  .feature i {
    left: 1.05rem;
    font-size: 1.8rem;
  }

  .nav-toggle {
    width: 42px;
    height: 42px;
  }
}


/* Mobile heading fix: verhindert abgeschnittene Überschrift auf Smartphone. */
.mobile-only-br { display: none; }
.realitaet-heading {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}
@media (max-width: 768px) {
  .mobile-only-br { display: block; }
  .realitaet-heading {
    font-size: clamp(1.55rem, 6.5vw, 2.05rem);
    line-height: 1.18;
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }
}

/* Finaler Override: Ergebnis-Karte zentriert */
.result-block { text-align: center !important; }
.result-block ul { display: inline-block !important; text-align: left !important; margin: 0 auto !important; }
.result-block ul li { text-align: left !important; }

/* Mobile-only final alignment fixes */
@media (max-width: 768px) {
  /* Ergebnis-Karte nur mobil wieder linksbündig */
  #realitaet .result-block,
  #realitaet .result-block h3,
  #realitaet .result-block ul,
  #realitaet .result-block ul li {
    text-align: left !important;
  }

  #realitaet .result-block ul {
    display: block !important;
    margin: 0 !important;
  }

  /* Diese Überschriften nur mobil linksbündig */
  #vorteile h2,
  #ueber-mich h2 {
    text-align: left !important;
  }

  /* Über-mich-Bereich nur mobil linksbündig */
  #ueber-mich .about,
  #ueber-mich .bio,
  #ueber-mich .bio p {
    text-align: left !important;
  }
}