/**
* Template Name: Personal - Uwe Knott Edition
* Updated: Feb 2026 - Master Consolidation (Responsive Goldstandard)
* Strategy: Full-File-Policy (Clean Structure, Media-Queries at the end)
*/

/*--------------------------------------------------------------
# 1. FONT & COLOR VARIABLES
--------------------------------------------------------------*/
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-headline: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --background-color: #000000;
  --default-color: #fafafa;
  --heading-color: #ffffff;
  --accent-color: #18d26e;
  --surface-color: #1a1a1a;
  --contrast-color: #000000;
  --nav-color: #fafafa;
  --nav-hover-color: #18d26e;
  --nav-mobile-background-color: #1a1a1a;
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# 2. GENERAL STYLING & PAGE OVERRIDES
--------------------------------------------------------------*/
/* Definiert die globale Schriftgröße, Farben und Schriftart für das gesamte Dokument mit einem sanften Farbübergang. */
body {
  font-size: 18px;
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--font-sans);
  transition: background-color 0.3s ease-in-out;
}

/* Legt einen festen vertikalen Innenabstand für Inhaltsbereiche fest. */
.section { padding: 40px 0 !important; }

/* Entfernt den unteren Innenabstand für den letzten Abschnitt auf der Startseite. */
.index-page .section:last-of-type { padding-bottom: 0 !important; }

/* Erzwingt ein helles Farbschema mit dunkler Schrift für die Portfolio- und Kontaktseiten. */
body.portfolio-page, body.contact-page {
  background-color: #eeeeee !important;
  color: #111111 !important;
  --default-color: #111111;
  --heading-color: #000000;
}

/* Steuert den oberen Abstand und Hintergrund des Seitentitels. */
.page-title { padding-top: 120px !important; background-color: #eeeeee; }

/* Setzt die Textfarbe für alle gängigen Inhaltselemente auf hellen Unterseiten auf Dunkelgrau. */
body.portfolio-page p, body.portfolio-page li, body.portfolio-page h2,
body.contact-page p, body.contact-page li, body.contact-page h2 {
  color: #111111 !important;
}

/* Definiert das Aussehen von Links in der Akzentfarbe ohne Unterstreichung und mit Übergangseffekt. */
a { color: var(--accent-color); text-decoration: none; transition: 0.3s; }
/* Verändert die Linkfarbe beim Drüberfahren durch eine leichte Transparenz-Mischung. */
a:hover { color: color-mix(in srgb, var(--accent-color), transparent 25%); }

/* Legt die Schriftart und Stärke für alle Überschriftsebene fest. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-headline); font-weight: 500; }

/*--------------------------------------------------------------
# 3. GLOBAL HEADER & NAV
--------------------------------------------------------------*/
/* Fixiert den Header am oberen Bildschirmrand und steuert seine Transparenz sowie Schichtung. */
.header {
  --background-color: rgba(0, 0, 0, 0);
  background-color: var(--background-color);
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
  position: fixed; 
  top: 0; left: 0; right: 0;
}

/* Verleiht dem Header beim Scrollen einen dunkleren Hintergrund und einen Schatteneffekt. */
.scrolled .header {
  --background-color: rgba(0, 0, 0, 0.85);
  padding: 10px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Formatiert das Logo-Text-Element in Größe, Gewicht und Farbe. */
.header .logo h1 { font-size: 30px; margin: 0; font-weight: 700; color: var(--heading-color); }

/* --- NAVIGATION TEXTFARBEN --- */

/* Setzt die Grundfarbe der Navigationslinks auf der Startseite auf ein helles Weiß. */
.navmenu a { 
  color: var(--nav-color); /* Nutzt #fafafa von :root */
}

/* Ändert die Navigationsfarbe auf dunkles Grau für Seiten mit hellem Hintergrund. */
body.portfolio-page .navmenu a, 
body.contact-page .navmenu a { 
  color: #222222; 
}

/* --- 3. Hover & Active Logik --- */

/* Färbt den Home-Link bei Interaktion oder Aktivierung grün. */
.navmenu a[href="index.html"]:hover,
.navmenu a[href="index.html"].active {
  color: #18d26e !important;
}

/* Färbt den Portfolio-Link bei Interaktion oder Aktivierung blau. */
.navmenu a[href="portfolio.html"]:hover,
.navmenu a[href="portfolio.html"].active {
  color: #3388ff !important;
}

/* Färbt den Kontakt-Link bei Interaktion oder Aktivierung magenta. */
.navmenu a[href="contact.html"]:hover,
.navmenu a[href="contact.html"].active {
  color: #ff0077 !important;
}

/* Setzt die Hover-Farbe für den YouTube-Link auf Rot. */
.navmenu a[href^="https://www.youtube.com"]:hover {
  color: #ff3333 !important;
}

/* Definiert eine Animation für das sanfte Ein- und Ausblenden der Unterstreichung. */
@keyframes nav-underline-fade-breathe {
  0%, 15%, 90%, 100% { opacity: 0; }
  45%, 65% { opacity: 1; }
}
/*--------------------------------------------------------------
# 4. HERO SECTION, SLIDESHOW & TYPED.JS
--------------------------------------------------------------*/
/* Definiert den Hero-Bereich als bildschirmfüllenden Container mit zentriertem Inhalt und relativer Positionierung. */
#hero { 
  padding-top: 100px; 
  min-height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  position: relative; 
}

/* Erzeugt einen stabilen Container für den Tipp-Text, der vor der Slideshow liegt und ein Springen des Layouts verhindert. */
#hero h2 { 
  line-height: 1.1 !important; 
  margin: 0; 
  padding: 0; 
  display: block; 
  min-height: 140px; 
  z-index: 2; /* Über der Slideshow */
  position: relative;
}

/* Erstellt eine absolut positionierte Ebene hinter dem Content, die alle Hintergrundbilder umschließt. */
.hero-bg-slideshow { 
  position: absolute; 
  inset: 0; 
  overflow: hidden; 
  z-index: 1; 
}

/* Legt das Basis-Erscheinungsbild der einzelnen Slides fest und startet die überblendende Endlos-Animation. */
.hero-bg-slideshow .bg-slide {
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%;
  background-size: cover; 
  background-position: center; 
  opacity: 0;
  animation: heroCrossfade 72s linear infinite;
}

/* Zuweisung der 9 Bild-URLs & Delays für den nahtlosen Loop */
.hero-bg-slideshow .bg-slide:nth-child(1) { background-image: url("https://www.uweknott.de/img/portfolio/BG_Chillies_5_.jpg"); animation-delay: 0s; }
.hero-bg-slideshow .bg-slide:nth-child(2) { background-image: url("https://www.uweknott.de/img/portfolio/BG_Chillies+Granatapfel+Glas_4.jpg"); animation-delay: 8s; }
.hero-bg-slideshow .bg-slide:nth-child(3) { background-image: url("https://www.uweknott.de/img/portfolio/BG_Pilz_1.jpg"); animation-delay: 16s; }
.hero-bg-slideshow .bg-slide:nth-child(4) { background-image: url("https://www.uweknott.de/img/portfolio/BG_Granatapfel+Messer_11.jpg"); animation-delay: 24s; }
.hero-bg-slideshow .bg-slide:nth-child(5) { background-image: url("https://www.uweknott.de/img/portfolio/BG_Granatapfel+Messer_13.jpg"); animation-delay: 32s; }
.hero-bg-slideshow .bg-slide:nth-child(6) { background-image: url("https://www.uweknott.de/img/portfolio/BG_Chillies_3_.jpg"); animation-delay: 40s; }
.hero-bg-slideshow .bg-slide:nth-child(7) { background-image: url("https://www.uweknott.de/img/portfolio/BG_Lilien_1.jpg"); animation-delay: 48s; }
.hero-bg-slideshow .bg-slide:nth-child(8) { background-image: url("https://www.uweknott.de/img/portfolio/BG_Blumen-Terrasse_4+.jpg"); animation-delay: 56s; }
.hero-bg-slideshow .bg-slide:nth-child(9) { background-image: url("https://www.uweknott.de/img/portfolio/BG_Karotten_1.jpg"); animation-delay: 64s; }

/* Animation für den weichen Bildwechsel */
@keyframes heroCrossfade { 
  0%, 2%, 16%, 100% { opacity: 0; } 
  7%, 11% { opacity: 1; } 
}

/* Der Name: UWE KNOTT */
#typed-name {
  font-weight: 300 !important; 
  font-size: 80px !important; 
  margin-left: 0px; 
  font-family: var(--font-headline); 
  letter-spacing: 2px; 
  text-transform: uppercase;
  color: var(--heading-color); 
  display: inline-block; 
  vertical-align: middle; 
  line-height: 1; 
  min-height: 80px; 
}

/* Die rotierenden Berufsbezeichnungen */
#typed-professions { 
  font-size: 40px !important; 
  margin-left: 5px; 
  color: var(--accent-color); 
  font-weight: 300; 
  display: inline-block; 
  vertical-align: middle; 
  line-height: 1; 
}

/* Der blinkende Cursor (Präzisions-Fix gegen Wackeln) */
.typed-cursor { 
  font-weight: 200; 
  color: var(--accent-color); 
  font-size: 34px !important; 
  display: inline-block; 
  vertical-align: middle; 
  position: relative; 
  top: 1px; 
  margin-left: 2px; 
  width: 0; 
  white-space: nowrap; 
}
/*--------------------------------------------------------------
# 5. PORTRAIT & AOS ANIMATION
--------------------------------------------------------------*/
/* Formatiert das Porträtfoto mit fester Maximalbreite, Zentrierung und abgerundeten oberen Ecken. */
.about-portrait { max-width: 320px; display: block; margin: 40px auto 0 auto !important; border-radius: 4px 4px 0 0; position: relative; z-index: 1; }

/* Setzt Elemente für die Scroll-Animation initial auf unsichtbar und verschiebt sie leicht nach unten. */
[data-aos] { opacity: 0; transform: translateY(25px) !important; transition: opacity 0.7s ease-out, transform 0.7s ease-out !important; }
/* Blendet die Elemente weich ein und schiebt sie an ihre Originalposition, sobald sie im Sichtfeld erscheinen. */
[data-aos].is-visible, [data-aos].aos-animate { opacity: 1 !important; transform: translateY(0) !important; }

/*--------------------------------------------------------------
# 6. PORTFOLIO GRID & FILTERS
--------------------------------------------------------------*/
/* Zentriert die Filterliste des Portfolios und ordnet die Elemente flexibel nebeneinander an. */
.portfolio .portfolio-filters { padding: 0; margin: 0 auto 30px auto; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; }
/* Gestaltet die einzelnen Filter-Buttons im blauen Design mit Großbuchstaben und Abständen. */
body.portfolio-page .portfolio .portfolio-filters li { cursor: pointer; padding: 8px 15px; font-size: 16px; font-weight: 500; margin: 5px; color: #3388ff !important; background-color: transparent !important; text-transform: uppercase; letter-spacing: 1px; }
/* Ändert die Farbe der Filter-Buttons bei Hover oder im aktiven Zustand auf Magenta. */
body.portfolio-page .portfolio .portfolio-filters li:hover, body.portfolio-page .portfolio .portfolio-filters li.filter-active { color: #ff0077 !important; }

/* Definiert den dramatischen Einblend-Effekt für Portfolio-Kacheln mit Skalierung und Verschiebung. */
.isotope-item { opacity: 0; transform: translateY(60px) scale(0.95); transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important; will-change: transform, opacity; }
/* Aktiviert die Sichtbarkeit und volle Größe der Kacheln bei der Animation. */
.isotope-item.is-visible, .isotope-item.aos-animate { opacity: 1 !important; transform: translateY(0) scale(1) !important; }

/* Setzt einen minimalen Außenabstand zwischen den einzelnen Portfolio-Kacheln. */
.portfolio-item { padding: 1px !important; }
/* Erzeugt einen Container für Portfolio-Inhalte, der überstehende Elemente (wie Overlays) maskiert. */
.portfolio-content { position: relative; overflow: hidden; border-radius: 2px; }
/* Erstellt ein dunkles Overlay, das den Bildtitel enthält und initial unterhalb des Bildes versteckt ist. */
.portfolio-content a::after {
  content: attr(title); position: absolute; left: 0; right: 0; bottom: -100%; background: rgba(0, 0, 0, 0.75);
  color: #ffffff; padding: 12px 15px; font-size: 14px; transition: bottom 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 10;
}
/* Schiebt das Titel-Overlay beim Drüberfahren mit der Maus elegant von unten ins Bild. */
.portfolio-content:hover a::after { bottom: 0; }
/* Erzwingt ein einheitliches Seitenverhältnis für Bilder und bereitet den Zoom-Effekt vor. */
.portfolio-content img { width: 100% !important; aspect-ratio: 3 / 2 !important; object-fit: cover !important; transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); display: block; }
/* Vergrößert das Bild dezent beim Hover für einen lebendigen Eindruck. */
.portfolio-content:hover img { transform: scale(1.08); }
/* Minimiert den unteren Abstand des gesamten Portfolio-Abschnitts. */
.portfolio.section { padding-bottom: 1px !important; }

/*--------------------------------------------------------------
# 7. ZEITGEIST RADAR (KOMPLETT MIT FLASH- & PULSE-EFFEKT)
--------------------------------------------------------------*/
/* Gestaltet den KI-Senden-Button mit runder Form und einer endlosen, sanften Farb-Animation. */
.btn-prompt { background-color: #18d26e; border-color: #18d26e; color: #000; font-weight: 500; border-radius: 50px; padding: 10px 30px; animation: prompt-color-pulse 3s ease-in-out infinite; display: inline-block; cursor: pointer; border: none; }
/* Definiert den Farbübergang für das Pulsieren des Buttons zwischen zwei Grüntönen. */
@keyframes prompt-color-pulse { 0%, 100% { background-color: #18d26e; } 50% { background-color: #6BFFA8; } }

/* Formatiert das Text-Eingabefeld dunkel mit grüner Schreibmarke und dezentem Rahmen. */
#promptInput.form-control { background-color: #121212; color: #f5f5f5; caret-color: #18d26e; border: 1px solid #333; }
/* Wechselt das Farbschema des Eingabefelds auf hell, sobald der Benutzer hineinklickt. */
#promptInput.form-control:focus { background-color: #F0F0F0; color: #000; }

/* Erstellt den Container für die KI-Antwort, der initial unsichtbar ist und leicht versetzt bereitsteht. */
.radar-result-box { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 1.5rem; margin-top: 1.5rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.8s ease, transform 0.8s ease; max-height: 650px; overflow-y: auto; }

/* Blendet die Antwort-Box weich ein und löst beim Erscheinen eine visuelle Blitz-Animation aus. */
.radar-result-box.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  animation: radar-output-flash 2s ease-out; 
}

/* Erzeugt ein kurzes grünes Aufleuchten des Rahmens und einen äußeren Schein als Feedback für den User. */
@keyframes radar-output-flash {
  0% { border-color: #18d26e; box-shadow: 0 0 20px rgba(24, 210, 110, 0.5); }
  100% { border-color: rgba(255, 255, 255, 0.1); box-shadow: none; }
}

/* Definiert die Textdarstellung des KI-Ergebnisses mit sanftem Farbübergang für den Pulse-Reset. */
#promptResult { color: #ffffff; line-height: 1.6; white-space: pre-wrap; transition: color 1.5s ease-in-out; }
/* Färbt Überschriften innerhalb der KI-Antwort markant grün ein. */
#promptResult h1, #promptResult h2, #promptResult h3 { color: #18d26e; margin-top: 1.5rem; }

/* PULSIERENDER KI-OUTPUT (Wird via JS getriggert) */
.ai-pulse-active { animation: pulse-text-green 1.5s ease-in-out infinite; }
@keyframes pulse-text-green {
  0%, 100% { color: #18d26e; text-shadow: 0 0 5px rgba(24, 210, 110, 0.3); }
  50% { color: #6BFFA8; text-shadow: 0 0 12px rgba(24, 210, 110, 0.6); }
}

/* Erzeugt einen pulsierenden Hinweistext, der dem Benutzer signalisiert, dass die KI gerade arbeitet. */
.processing-text { display: inline-block; color: var(--accent-color) !important; font-style: italic; font-weight: 500; animation: pulse-text-radar 1.2s ease-in-out infinite !important; }
/* Definiert die Bewegung und Transparenz-Änderung für den pulsierenden Ladetext. */
@keyframes pulse-text-radar { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.99); } }

/* Beschleunigt die Pulse-Animation des Buttons und ändert den Mauszeiger während des Ladevorgangs. */
.btn-prompt.loading { animation: prompt-color-pulse 1s ease-in-out infinite !important; opacity: 0.8; cursor: wait; }
/*--------------------------------------------------------------
# ENDE ZEITGEIST RADAR
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# 8. CONTACT FORM
--------------------------------------------------------------*/
/* Gestaltet den äußeren Container des Kontaktformulars mit weißem Hintergrund, Schatten und abgerundeten Ecken. */
.contact .php-email-form { 
  background: #ffffff; 
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); 
  padding: 30px; 
  border-radius: 8px; 
}

/* Definiert das Erscheinungsbild der Eingabefelder und Textbereiche mit hellem Hintergrund und dezentem Rahmen. */
.contact .php-email-form input, 
.contact .php-email-form textarea { 
  color: #111; 
  background: #fff; 
  border: 1px solid #ddd; 
  width: 100%; 
  padding: 10px 15px; 
  border-radius: 4px;
  transition: 0.3s;
}

/* Hebt das aktive Eingabefeld durch einen grünen Rahmen und einen sanften Schatten optisch hervor. */
.contact .php-email-form input:focus, 
.contact .php-email-form textarea:focus { 
  border-color: var(--accent-color) !important; 
  box-shadow: 0 0 8px rgba(24, 210, 110, 0.2) !important; 
  outline: none;
}

/* Gestaltet den Absende-Button im grünen Design mit runden Ecken und zentrierter Ausrichtung. */
.contact .php-email-form button[type="submit"] { 
  background: var(--accent-color); 
  color: #000; 
  font-weight: 600; 
  padding: 12px 40px; 
  border-radius: 50px; 
  border: 0; 
  cursor: pointer; 
  display: block; 
  margin: 0 auto; 
  transition: all 0.4s;
}

/* Ändert die Button-Farbe beim Drüberfahren zu einem dunkleren Grün mit weißem Text. */
.contact .php-email-form button[type="submit"]:hover { 
  background: #15b35c; 
  color: #fff; 
}

/* --- STATUS-MELDUNGEN (FIX FÜR DIE SICHTBARKEIT) --- */

/* Versteckt die Feedback-Container für Laden, Fehler und Erfolg standardmäßig vor dem Benutzer. */
.php-email-form .loading,
.php-email-form .error-message,
.php-email-form .sent-message {
  display: none; 
  padding: 15px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 24px;
  border-radius: 4px;
}

/* Formatiert die Erfolgsmeldung mit grünem Hintergrund und schwarzem Text für maximalen Kontrast. */
.php-email-form .sent-message {
  background: var(--accent-color) !important;
  color: #000000 !important; /* Bester Kontrast auf Grün */
}

/* Kennzeichnet Fehlermeldungen durch einen auffälligen roten Hintergrund mit weißer Schrift. */
.php-email-form .error-message {
  background: #df1529;
  color: #ffffff;
}

/* Gestaltet die Lade-Anzeige während des Sendevorgangs in einem neutralen Blaugrau. */
.php-email-form .loading {
  background: #3c4f66;
  color: #ffffff;
}

/* Erzwingt die Sichtbarkeit der jeweiligen Meldung, sobald das JavaScript die entsprechende Hilfsklasse hinzufügt. */
.php-email-form .sent-message.d-block,
.php-email-form .error-message.d-block,
.php-email-form .loading.d-block {
  display: block !important;
}
/*--------------------------------------------------------------
# 9. MOBILE NAVIGATION CORE (MASTER-BLOCK)
--------------------------------------------------------------*/
/* Definiert den Button für das mobile Menü als fest positioniertes, zentriertes Element ohne Hintergrund. */
.mobile-nav-toggle {
  display: none; /* Aktivierung in #14 */
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: fixed;
  right: 30px;
  top: 25px;
  z-index: 10001;
  background: transparent !important;
  border: none !important;
  color: var(--accent-color); /* Initial Grün */
  font-size: 32px;
  transition: 0.3s;
}

/* Steuert die Sichtbarkeit der Icons so, dass standardmäßig das Hamburger-Menü angezeigt wird. */
.mobile-nav-toggle .bi-list, .mobile-nav-toggle .hamburger-icon { display: block; }
/* Versteckt das Schließen-Kreuz im initialen Zustand des Buttons. */
.mobile-nav-toggle .bi-x, .mobile-nav-toggle .close-icon { display: none; }

/* Ändert die Farbe des Buttons auf Dunkelrot und rotiert ihn um 180 Grad, wenn das Menü geöffnet ist. */
.mobile-nav-active .mobile-nav-toggle {
  color: #A80038 !important; /* Deep Ruby Rot */
  transform: rotate(180deg);
}

/* Blendet das Hamburger-Icon aus, sobald das mobile Menü aktiviert wurde. */
.mobile-nav-active .mobile-nav-toggle .bi-list,
.mobile-nav-active .mobile-nav-toggle .hamburger-icon { display: none !important; }

/* Macht das Schließen-Kreuz in Rot sichtbar, wenn die mobile Navigation aktiv ist. */
.mobile-nav-active .mobile-nav-toggle .bi-x,
.mobile-nav-active .mobile-nav-toggle .close-icon { 
  display: block !important; 
  color: #A80038 !important; 
}

/* Erzwingt, dass die Farbe von SVG-Grafiken innerhalb des Buttons der festgelegten Textfarbe folgt. */
.mobile-nav-toggle svg path { fill: currentColor; }

/* Setzt die Farbe des Toggles auf Schwarz für helle Unterseiten, solange das Menü geschlossen ist. */
body.portfolio-page:not(.mobile-nav-active) .mobile-nav-toggle,
body.contact-page:not(.mobile-nav-active) .mobile-nav-toggle {
  color: #111111 !important;
}

/* --- MOBILE NAV STRUKTUR & OVERLAY --- */

/* Legt die Schichtung der Navigations-Ebene fest. */
.navmenu { 
  padding: 0; 
  z-index: 9997; 
}

/* Erzeugt einen halbtransparenten dunklen Hintergrund über der gesamten Seite, wenn das Menü offen ist. */
.mobile-nav-active .navmenu { 
  position: fixed; 
  inset: 0; 
  background: rgba(0, 0, 0, 0.5) !important; 
  pointer-events: auto; 
}

/* Gestaltet das ausklappbare Menüfeld mit festen Abständen zum Rand, Schatten und dunklem Hintergrund. */
.mobile-nav-active .navmenu ul { 
  display: block !important; 
  list-style: none; 
  position: absolute; 
  /* Definiert die exakte Position des Menüfelds unterhalb des Toggles. */
  inset: 90px 15px auto 15px; 
  padding: 20px 0; 
  border-radius: 8px; 
  background-color: #1a1a1a; 
  border: 1px solid rgba(255, 255, 255, 0.1); 
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5); 
  overflow-y: auto; /* Erlaubt Scrollen innerhalb des Menüs bei vielen Einträgen. */
}

/* Formatiert die Navigations-Links innerhalb der mobilen Box für eine bessere Touch-Bedienung. */
.mobile-nav-active .navmenu ul a { 
  color: #ffffff; 
  font-size: 20px; 
  padding: 10px 25px; 
  display: block; 
  transition: 0.3s;
}

/* Hebt den aktuell besuchten oder mit dem Finger berührten Menüpunkt farblich hervor. */
.mobile-nav-active .navmenu ul a.active, 
.mobile-nav-active .navmenu ul a:hover { 
  color: var(--accent-color); 
}

/* Deaktiviert das Scrollen der restlichen Webseite im Hintergrund bei geöffneter Navigation. */
.mobile-nav-active { 
  overflow: hidden; 
}
/*--------------------------------------------------------------
# 10. FOOTER
--------------------------------------------------------------*/
.footer { padding-top: 10px !important; padding-bottom: 20px !important; background: #000 !important; color: rgba(255, 255, 255, 0.7) !important; text-align: center !important; border-top: 1px solid rgba(24, 210, 110, 0.3) !important; width: 100%; position: relative; z-index: 10; }
.footer .copyright, .footer a { color: rgba(255, 255, 255, 0.8) !important; font-size: 14px !important; }
.footer .copyright strong { font-weight: 300 !important; letter-spacing: 0.02em; }
.footer .copyright a { color: var(--accent-color) !important; }
.footer .credits { display: none !important; }

/*--------------------------------------------------------------
# 11. SCROLL TOP & PRELOADER
--------------------------------------------------------------*/
.scroll-top { position: fixed; visibility: hidden; opacity: 0; right: 35px; bottom: 15px; z-index: 99999; background: var(--accent-color) !important; width: 44px; height: 44px; border-radius: 50px; display: flex; align-items: center; justify-content: center; transition: all 0.4s; cursor: pointer; border: none; }
.scroll-top.active { visibility: visible; opacity: 1; }
.scroll-top svg { width: 24px; height: 24px; stroke: #000 !important; stroke-width: 2; fill: none; }

#preloader { position: fixed; inset: 0; z-index: 999999; background: #000; transition: 0.6s; }
#preloader:before { content: ""; position: fixed; top: calc(50% - 30px); left: calc(50% - 30px); border: 6px solid var(--accent-color); border-top-color: transparent; border-radius: 50%; width: 60px; height: 60px; animation: animate-preloader 1.5s linear infinite; }
@keyframes animate-preloader { 100% { transform: rotate(360deg); } }

/*--------------------------------------------------------------
# 12. VENDOR OVERRIDES (GLightbox)
--------------------------------------------------------------*/
/* Entfernt den Standard-Hintergrund der Beschreibungsbox in der Bildergalerie. */
.glightbox-clean .gslide-description { background: transparent !important; }
/* Gestaltet die Beschreibungs-Box mit einem edlen Glas-Effekt durch Unschärfe und leichte Transparenz. */
.glightbox-clean .gdesc-inner { background-color: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(10px); padding: 20px 25px !important; border-radius: 4px; text-align: center; }
/* Formatiert den Titel innerhalb der Galerie-Ansicht in dezentem Grau und der Headline-Schriftart. */
.gslide-title { color: #888 !important; font-family: var(--font-headline); margin-bottom: 5px !important; }
/* Setzt die Grundfarbe der Galerie-Navigationspfeile auf Weiß. */
.glightbox-container .gbtn svg path { fill: #ffffff !important; transition: 0.3s; }
/* Färbt die Vor- und Zurück-Pfeile der Galerie beim Drüberfahren in der Akzentfarbe Grün ein. */
.glightbox-container .gbtn.gnext:hover svg path, .glightbox-container .gbtn.gprev:hover svg path { fill: var(--accent-color) !important; }
/* Lässt das Schließen-Kreuz der Galerie beim Hover in einem dunklen Rubinrot aufleuchten. */
.glightbox-container .gbtn.gclose:hover svg path { fill: #A80038 !important; }

/*--------------------------------------------------------------
# 13. AI MODULE NAVIGATION & DESCRIPTION
--------------------------------------------------------------*/
/* Ordnet die Navigationsknöpfe für die verschiedenen KI-Prompts zentriert und mit gleichmäßigen Abständen an. */
#ai-module-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 60px; margin-bottom: 70px; width: 100%; }
/* Gestaltet die Prompt-Auswahlknöpfe dezent mit feinem Rahmen und serifenloser Großschreibung. */
.btn-ai-nav { background: transparent; border: 1px solid #333; color: #888; padding: 10px 22px; border-radius: 50px; font-size: 13px; font-weight: 600; text-transform: uppercase; transition: 0.3s; cursor: pointer; }
/* Hebt den Prompt-Knopf beim Drüberfahren durch einen grünen Rahmen und einen zarten Farbschleier hervor. */
.btn-ai-nav:hover { border-color: var(--accent-color); color: #fff; background: rgba(24, 210, 110, 0.08); }
/* Markiert den aktuell gewählten Prompt-Typ durch vollflächiges Grün und einen leuchtenden Schatteneffekt. */
.btn-ai-nav.active { background: var(--accent-color); color: #000; font-weight: 700; box-shadow: 0 4px 15px rgba(24, 210, 110, 0.3); }

/* Formatiert den erklärenden Text unterhalb der Prompt-Navigation für eine ruhige Lesbarkeit. */
#ai-description { display: block; margin-top: 15px; margin-bottom: 45px; color: #888; font-size: 16px; line-height: 1.6; max-width: 800px; }
/* Gestaltet den "Kopieren"-Button dezent grün und platziert ihn initial unsichtbar neben dem Text. */
#copyPrompt { display: none; background: rgba(24, 210, 110, 0.1); border: 1px solid var(--accent-color); color: var(--accent-color); padding: 6px 16px; border-radius: 50px; font-size: 11px; cursor: pointer; margin-left: 15px; vertical-align: middle; }
/* Ändert das Aussehen des Kopier-Buttons kurzzeitig zu Vollgrün als visuelle Bestätigung nach Erfolg. */
#copyPrompt.radar-success-green { background: var(--accent-color); color: #000; }

/* Definiert kleine farbige Punkte zur visuellen Kennzeichnung: Grün für Standard/Aktiv. */
.dot-green { color: var(--accent-color); }
/* Definiert einen blaugrauen Kennzeichnungspunkt. */
.dot-blue { color: #3c4f66; }
/* Definiert einen magentafarbenen Kennzeichnungspunkt. */
.dot-magenta { color: #e80368; }

/*--------------------------------------------------------------
# 14. GLOBAL RESPONSIVE BUNDLE (CONSOLIDATED)
--------------------------------------------------------------*/

/* --- 1. DESKTOP & LARGE SCREENS (ab 1200px) --- */
@media (min-width: 1200px) {
  /* Richtet die Navigationsliste horizontal aus und entfernt Standard-Listenpunkte. */
  .navmenu ul { display: flex; list-style: none; align-items: center; }
  /* Definiert den Klickbereich und die Abstände für einzelne Menüpunkte. */
  .navmenu li { padding: 15px 14px; position: relative; }
  /* Legt die Schriftgröße und Stärke für die Desktop-Links fest. */
  .navmenu a { font-size: 20px; font-weight: 300; }
  
  /* Erstellt eine animierbare Linie unter den Menüpunkten mit präzisem Abstand zum Text. */
  .navmenu > ul > li > a:before { 
    content: ""; 
    position: absolute; 
    height: 2px; 
    bottom: 7px; 
    left: 0; 
    background-color: currentColor; 
    visibility: hidden; 
    width: 100%; 
    opacity: 0; 
  }
  
  /* Blendet die Linie beim Hover oder im aktiven Zustand ein und startet den pulsierenden Effekt. */
  .navmenu a:hover:before, .navmenu .active:before { 
    visibility: visible; 
    animation: nav-underline-fade-breathe 4s infinite; 
  }
}

/* --- 2. TABLETS & SMALL DESKTOPS (unter 1200px) --- */
@media (max-width: 1199px) {
  /* Aktiviert den mobilen Menü-Button und versteckt die Standard-Navigationsleiste. */
  .mobile-nav-toggle { display: flex !important; }
  .navmenu ul { display: none; }
  /* Beschleunigt die Einblend-Animation der Portfolio-Elemente auf kleineren Bildschirmen. */
  .isotope-item { transition-duration: 0.8s !important; transform: translateY(40px) scale(0.98); }
  /* Passt die Header-Größe und Transparenz beim Scrollen für Tablets an. */
  .scrolled .header { padding: 45px 0 !important; background: rgba(0, 0, 0, 0.8); }
}

/* --- 3. FOOTER SYMMETRIE (Desktop/Tablet) --- */
@media (min-width: 769px) {
  /* Sorgt für großzügige Abstände und einzeilige Darstellung des Copyrights auf größeren Displays. */
  .footer { padding: 30px 0 !important; }
  .footer .copyright { margin: 0 !important; line-height: 1 !important; }
}

/* --- 4. SMARTPHONES & TABLETS (unter 768px) --- */
@media (max-width: 768px) {
  /* Optimiert die Größe und Abstände des Tipp-Textes (Name und Berufe) für mobile Endgeräte. */
  #hero h2 #typed-name { font-size: 38px !important; margin-left: 20px !important; min-height: auto !important; }
  #hero h2 #typed-professions { font-size: 28px !important; margin-left: 22px !important; }
  .typed-cursor { font-size: 28px !important; }
  
  /* Wandelt den KI-Button in ein zentriertes Block-Element mit maximaler Breite um. */
  .btn-prompt { display: block !important; margin: 25px auto 0 auto !important; text-align: center; width: 100%; max-width: 250px; }
  
  /* Lässt die KI-Navigationselemente auf kleinen Schirmen nebeneinander fließen. */
  .btn-ai-nav { flex: 1 1 45%; padding: 12px 10px; font-size: 14px; text-align: center; }
  
  /* Verkleinert das Porträtfoto und passt den oberen Abstand für mobile Layouts an. */
  .about-portrait { max-width: 280px; margin-top: 30px !important; border-radius: 4px; }
  
  /* Stapelt Copyright-Informationen im Footer untereinander für bessere Lesbarkeit. */
  .footer { padding: 15px 0 !important; }
  .footer .copyright strong, .footer .copyright a { font-size: 13px !important; display: block; }
  
/* --- 4. MOBILE LAYOUTS (unter 768px) --- */
@media (max-width: 768px) {
  
  /* Verkleinert das Porträtfoto und passt den oberen Abstand für mobile Layouts an. */
  .about-portrait { max-width: 280px; margin-top: 30px !important; border-radius: 4px; }
  
  /* Stapelt Copyright-Informationen im Footer untereinander für bessere Lesbarkeit. */
  .footer { padding: 15px 0 !important; }
  .footer .copyright strong, .footer .copyright a { font-size: 13px !important; display: block; }
  
  /* Zentriert den Scroll-to-Top Button am unteren Bildschirmende auf Smartphones.
     Optimierte Abstände: 40px nach oben zum Content, 20px nach unten zum Copyright.
  */
  .scroll-top { 
    position: relative !important; 
    right: auto !important; 
    bottom: auto !important; 
    visibility: visible !important; 
    opacity: 1 !important; 
    display: inline-flex !important; 
    
    /* Responsive Goldstandard Abstände: Top | Right | Bottom | Left */
    margin: 10px auto 20px auto !important; 
    
    width: 40px; 
    height: 40px; 
    transition: all 0.3s ease-in-out;
  }
  
  /* Reduziert die seitlichen Abstände des Hauptcontainers und korrigiert die Titelposition auf Unterseiten. */
  .container { padding-left: 15px !important; padding-right: 15px !important; }
  body.portfolio-page .page-title, body.contact-page .page-title { padding-top: 60px !important; }
}

/* --- 5. VERY SMALL SCREENS (unter 575px) --- */
@media (max-width: 575px) {
  /* Optimiert das Kontaktformular und die KI-Modul-Beschreibung für sehr schmale Displays. */
  .contact .php-email-form { padding: 20px; }
  #ai-description { font-size: 14px; margin-bottom: 30px; }
  /* Schiebt den Kopier-Button unter den Text, um ein Überlappen zu verhindern. */
  #copyPrompt { display: block; margin-top: 10px; margin-left: 0; width: fit-content; }
}