/*
 * 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 {
  /* Metallischer Verlauf von Silber über Wasser‑Blau zu Fire‑Orange.  
     Der zusätzliche Silberton sorgt für eine hochwertige, metallische Note. */
  background: linear-gradient(90deg, var(--silver-color) 0%, var(--water-color) 40%, 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;
}

body {
  margin: 0;
  padding: 0;
  /* Gesamter Hintergrund ist dunkel */
  background-color: var(--primary-color);
  /* Verhindert horizontales Scrollen durch überbreite Elemente */
  overflow-x: hidden;
}

/* 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;
}

/* Navigation */
header {
  /* Der Header verschmilzt farblich mit dem Feuer‑und‑Eis‑Logo.
     Mehrere Gradienten erzeugen Tiefe und eine dezente Textur. */
  /* Premium‑Header: Die Farben des Logos fließen nahtlos in den Hintergrund.  
     Ein dunkler Verlauf kombiniert Executive Navy, Midnight Blue und Water Blue.  
     Subtile Radialverläufe erzeugen links einen kühlen Wasser‑Schimmer und rechts einen warmen Feuer‑Glühen. */
  /*
   * Der Header verschmilzt nun vollständig mit dem neuen Corporate‑Blau (#050E1D).
   * Durch eine subtile Kombination aus radialen Glows und einem dunklen Verlauf entsteht
   * eine hochwertige Tiefe, ohne dass sich das Logo wie ein separater Kasten abhebt.
   */
  /*
   * Aktualisierte Hintergrundgestaltung für den Header:
   * Die dunkle Executive‑Navy‑Basis (#020916) dominiert, sodass das Logo nahtlos
   * im Hintergrund verschmilzt. Ein subtiler Verlauf zwischen drei sehr dunklen
   * Blau‑Tönen (#020916, #030A17, #050D1B) erzeugt Tiefe, ohne sichtbare
   * Farbbrüche. Die radialen Glows sind weiter reduziert, bleiben aber als
   * minimaler Eis‑ und Feuer‑Schimmer erhalten.
   */
  /*
   * Das Logo besitzt einen fast schwarzen Hintergrund (#020916). Um es optisch
   * freizustellen, erhält der Header eine einheitliche Hintergrundfarbe,
   * ebenfalls #020916. So verschmilzt das Logo mit dem Header und es entsteht
   * keine sichtbare Kante. Eine minimale Textur entsteht nur über den
   * Box‑Shadow des Headers.
   */
  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);
}

/* 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;
  /* Ausgewogene Höhe für einen eleganten Header mit Logo und Claim */
  /* Kompakter Executive‑Header */
  padding: 0.6rem 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 */
.logo-icon img {
  /* Das horizontale Feuer‑Eis‑Logo wird etwas größer dargestellt.  
     Durch die flexible Breite behält es seine Proportionen, die Höhe bleibt kompakt. */
  /* Größeres Logo für mehr Präsenz im Header */
  /* Logo-Höhe angepasst: Es füllt den kompakten Header optimal aus, ohne ihn zu vergrößern */
  /* Etwas größeres Logo im Header für mehr Präsenz bei unverändert kompakter Höhe */
  /* Leicht erhöht für noch mehr Präsenz, ohne die Headerhöhe zu verändern */
  height: 75px;
  width: auto;
  /* Kein Filter – das horizontale Logo besitzt bereits den korrekten Kontrast */
  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: 1.05rem;
  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);
}

/* Hero Bereich */
.hero {
  /*
   * Premium Hero: Ein cineastischer Hintergrund mit noch mehr Tiefe und
   * subtiler Wasser‑ und Feuer‑Energie. Auf der linken Seite erzeugt ein
   * elliptischer Ice‑Glow eine kühle Nebelstruktur, während rechts ein
   * warmer Fire‑Glow für sanfte Energie sorgt. Ein Amber‑Schein verleiht
   * dem unteren Bereich zusätzliche Wärme. Der lineare Verlauf verbindet
   * Deep Water Blue, Midnight Blue und Executive Navy (#020916) ohne
   * sichtbare Farbbrüche.
   */
  /* Cineastischer Hintergrund mit fotografierter Feuer‑und‑Eis‑Energie.  
     Die Grafik zeigt links dynamische Eis‑/Wasser‑Bewegung und rechts warmes Feuer.  
     Ein dunkler Overlay‑Gradient sorgt für Tiefenwirkung und Lesbarkeit. */
  /* Neuer Hero-Hintergrund: Dunkle Executive-Navy-Basis mit subtilen Eis‑ und Feuer‑Energien.  
     Es wird kein Posterbild verwendet; zwei Radialverläufe lassen die Energien nur erahnen. */
  /* Der Hero nutzt das neue Feuer‑ und Eis‑Bild. Eine dunkle Overlay‑Gradient sorgt für Lesbarkeit und filmische Tiefe. */
  /* Neu: Der Hero bekommt eine fein abgestufte dunkle Overlay‑Gradienten, die links
     dunkler bleibt und zur Mitte hin etwas heller wird. So treten die
     Wasser‑/Eis‑Energien in den Hintergrund und die Headline bleibt dominant. */
  /* Der Hero‑Hintergrund nutzt nun ausschließlich CSS‑Verläufe, die
     auf den Farben des Logos basieren. Links erzeugt ein elliptischer
     Ice‑Glow in Ice Blue ein dezentes Wasser‑Energie‑Schimmern, rechts
     ein Fire‑Glow in Fire Orange eine warme, aber kontrollierte Lichtspur.
     Eine dunkle Navy‑Basis verbindet beide Seiten und sorgt für Ruhe
     und Executive‑Tiefe. */
  background:
    radial-gradient(ellipse at 20% 50%, rgba(93, 169, 255, 0.38) 0%, rgba(2, 9, 22, 0) 55%),
    radial-gradient(ellipse at 80% 50%, rgba(242, 138, 26, 0.32) 0%, rgba(2, 9, 22, 0) 55%),
    linear-gradient(90deg, #030a17 0%, #020916 50%, #050d1b 100%);
  background-size: cover;
  background-position: center;
  color: var(--dark-text);
  /* Großzügiger Raum für eine dominantere Hero-Headline */
  padding: 14rem 0 10rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero h1 {
  /* Größere Headline im Hero für starke Präsenz.  
     Die Farbe wird von der `.gradient-text` Klasse bestimmt. */
  /* Größere Headline für einen dominanten Auftritt im Hero */
  font-size: 5rem;
  margin-bottom: 1.2rem;
  line-height: 1.1;
  color: transparent;
  position: relative;
  z-index: 1;
  /* Reduzierter Glow für die Hero‑Headline: weich und subtil, nicht neonartig */
  text-shadow:
    0 0 2px rgba(93, 169, 255, 0.08),   /* kühler Wasser‑Schein */
    0 0 4px rgba(242, 138, 26, 0.06),   /* warmer Feuer‑Glanz */
    0 0 8px rgba(32, 50, 70, 0.10);    /* diffuse Umgebungslichtwirkung */
}

/* 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 .hero-subtagline {
  /* Subtile Ergänzung unter der Tagline */
  font-size: 1.3rem;
  color: var(--gray-text);
  font-style: italic;
  margin-bottom: 1.8rem;
  position: relative;
  /* Dezente Lichtspur für die Subtagline – weicher und unauffälliger */
  text-shadow:
    0 0 2px rgba(93, 169, 255, 0.08),
    0 0 4px rgba(93, 169, 255, 0.05);
}

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

/* Sanfte bewegte Lichtstruktur im Hero-Hintergrund */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Zwei helle, leicht unscharfe Radialverläufe erzeugen dezente Lichtflecken */
  background: radial-gradient(circle at 20% 60%, rgba(255, 255, 255, 0.03), transparent 60%),
              radial-gradient(circle at 80% 40%, rgba(255, 255, 255, 0.06), transparent 60%);
  /* Reduzierte Intensität des Lichteffekts: nur subtile Lichtakzente */
  opacity: 0.1;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
  animation: moveLights 20s linear infinite;
}

/* Vignette für filmische Tiefe */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Dunkle Ecken und subtile Kanten für ein cineastisches Erscheinungsbild */
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

@keyframes moveLights {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-60px, -40px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* 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 h1,
.hero .hero-tagline,
.hero .hero-subtagline,
.hero .hero-description,
.hero .cta-button {
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
}

.hero h1 { animation-delay: 0.3s; }
.hero .hero-tagline { animation-delay: 0.5s; }
.hero .hero-subtagline { animation-delay: 0.7s; }
.hero .hero-description { animation-delay: 0.9s; }
.hero .cta-button { animation-delay: 1.1s; }

.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);
}

/* 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);
}

.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: 1.5rem;
}

.faq-item h4 {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
  color: var(--secondary-color);
}

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

/*
 * 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. */
.info-block--vorteile {
  background: linear-gradient(135deg, rgba(93, 169, 255, 0.85) 0%, rgba(24, 59, 115, 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);
}

/* Feature‑Cards (für Philosophie und Dienstleistungen) im selben Look wie die Vorteile‑Boxen */
.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):  
   Text und Liste werden zentriert dargestellt. Die Liste selbst bleibt linksbündig
   innerhalb eines schmaleren Containers, damit die Aufzählung ordentlich erscheint. */
/* Der Ergebnis-Block wird wie die übrigen Info-Blöcke linksbündig dargestellt */
.result-block {
  text-align: left;
}
.result-block ul {
  display: block;
  text-align: left;
  margin: 0;
}
.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 {
  background: linear-gradient(90deg,
    rgba(191, 196, 204, 0.9) 0%,
    rgba(245, 247, 250, 0.95) 50%,
    rgba(255, 179, 71, 0.5) 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;
}

/* 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);
}

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 h1 {
    font-size: 3rem;
    line-height: 1.2;
  }
  .hero .hero-tagline {
    font-size: 1.8rem;
  }
  .hero .hero-subtagline {
    font-size: 1.2rem;
  }
  .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;
  }
}