/*
 * css/styles.css – Haupt-Stylesheet der b.IT-Website
 * ====================================================
 * Aufbau (Abschnitte in dieser Reihenfolge):
 *   1. THEME            – CSS Custom Properties, Hell/Dunkel-Variablen
 *   2. Animationen      – keyframes, Reduced-Motion-Override
 *   3. Allgemein        – body, .container
 *   4. Header           – fixierter Header, Logo, Navigation, Hamburger
 *   5. Body / Hintergrund – .page-bg (Video), Stacking-Context
 *   6. Sektionen        – allgemeine <section>-Stile, .page-title, .section-gap
 *   7. Typographie      – h1, h2, Schriftfamilien
 *   8. Hero             – Vollbild-Banner, .hero__bg, .hero__content
 *   9. Willkommen       – .welcome-section, .text-content, .image-content
 *  10. About            – .about-section, .about-section__bg
 *  11. Experience       – Karten-Grid (.experience-card, -large, -tall)
 *  12. Services         – Dienstleistungskarten-Grid
 *  13. Kontakt-CTA      – kompakter Kontaktbereich auf der Startseite
 *  14. Kontaktformular  – #contact, #contact-form, .contact-grid
 *  15. Footer           – Fußzeile
 *  16. Responsive       – Media Queries (breakpoints: 900px, 600px)
 *  17. Mobile Nav       – Hamburger-Menü, .nav-open
 *  18. Utilities        – .form-status, .muted, .panel-section, .nav-active
 *
 * Farbsystem:
 *   Alle Farben sind als RGB-Triple in CSS Custom Properties definiert.
 *   Verwendung: color: rgb(var(--color-text))
 *   Mit Alpha:  color: rgba(var(--color-text), 0.7)
 *   Vorteil: Theme-Wechsel durch einfaches Überschreiben der Variables.
 */

/* ══════════════════════════════════════════════════════════════════════════════
   1. THEME – CSS Custom Properties
   ══════════════════════════════════════════════════════════════════════════════
   :root definiert den Light-Theme als Standard.
   body[data-theme="dark"] überschreibt die Variablen für den Dark Mode.
   Das data-theme-Attribut wird von site.js per JS gesetzt und in
   localStorage persistiert. */
:root {
	/*
	 * Farb-Triple (r,g,b ohne rgba()): ermöglicht flexible Alpha-Varianten.
	 * Verwendung: rgb(var(--color-text)) oder rgba(var(--color-text), 0.5)
	 */
	--color-primary:   255,255,255;   /* Hauptoberflächen (Karten, Header) */
	--color-secondary: 250,250,250;   /* Sekundäre Flächen (Input-Hintergründe) */
	--color-accent:    0,123,255;     /* Akzentfarbe (Buttons, aktive Links) */
	--color-bg:        245,247,250;   /* Seitenhintergrund (hinter dem Video) */
	--color-text:      28,34,42;      /* Haupt-Textfarbe */
	--on-accent:       0,0,0;         /* Text auf Akzent-Hintergrund (Button-Labels) */

	/* Layout-Konstanten */
	--container-max:     1200px;  /* maximale Inhaltsbreite */
	--container-padding: 1rem;    /* horizontaler Container-Innenabstand */
	--logo-height:       48px;    /* Logo-Höhe im Header */
	--header-height:     64px;    /* Gesamthöhe des fixierten Headers → wird als body padding-top verwendet */
	--gap:               1rem;    /* Standard-Flex/Grid-Abstand */
	--radius:            12px;    /* Standard-Eckenradius für Karten und Panels */
	--shadow:            0 8px 30px rgba(11,22,40,0.06); /* Standard-Schatten */
	--transition-fast:   180ms;   /* Dauer für schnelle CSS-Übergänge */
}

/*
 * Explizite Light-Theme-Regeln:
 * Werden benötigt damit das helle Theme auch greift, wenn data-theme="light"
 * explizit gesetzt ist (statt nur dem :root-Standard).
 */
body:not([data-theme="dark"]), body[data-theme="light"] {
  --color-primary: 255,255,255;
  --color-secondary: 250,250,250;
  --color-accent: 0,123,255;
  --color-bg: 250,251,252;
  --color-text: 22,28,36;
  --on-accent: 255,255,255;
}

/*
 * Experience-Karten-Textfarbe im Light Mode:
 * Die Karten haben einen blauen halbtransparenten Hintergrund (hsla(210,100%,50%,0.3))
 * und werden mit weißem Text (#ffffff) definiert. Im Light Mode ist der Kontrast zu
 * gering, daher überschreiben wir die Textfarbe auf die reguläre --color-text.
 */
body:not([data-theme="dark"]) .experience-card,
body:not([data-theme="dark"]) .experience-large-card,
body:not([data-theme="dark"]) .experience-tall-card {
  color: rgb(var(--color-text));
}

/* ── Theme-Anpassungen für Light Mode ─────────────────────────────────────────
   Das Hero-Overlay und Hintergrundvideo sind im Light Mode etwas heller,
   da dunkle Bilder auf hellem Hintergrund zu schwer wirken würden.
   – .hero::after   → Gradient wird nahezu transparent (kaum Verdunkelung)
   – .hero__bg      → leicht aufgehellt + sättigt etwas mehr
   – .page-bg       → Hintergrundvideo auf 80% reduziert (weniger dominant)
   – .header--highlight → im Light Mode nahezu weißer Gradient */

/* Reduce heavy dark overlays on light theme */
body:not([data-theme="dark"]) .hero::after {
  background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.03));
}
body:not([data-theme="dark"]) .hero__bg {
  filter: brightness(1.03) saturate(1.02);
}
body:not([data-theme="dark"]) .page-bg { opacity: 0.8; }

/* Header highlight lighter in light theme */
body:not([data-theme="dark"]) .header--highlight {
  background: linear-gradient(90deg, rgba(0,123,255,0.06), rgba(255,255,255,1));
}

/* ══════════════════════════════════════════════════════════════════════════════
   2. ANIMATIONEN
   ══════════════════════════════════════════════════════════════════════════════ */

/*
 * floatUp: Elemente gleiten beim Laden sanft von leicht unten nach oben ein.
 * Gibt der Seite ein lebendiges, ansprechendes Erscheinungsbild beim ersten Aufruf.
 */
/* Animations */
@keyframes floatUp {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);  opacity: 1; }
}
/* footerFade: Footer erscheint mit leichtem Slide-Up */
@keyframes footerFade {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/*
 * Barrierefreiheit: prefers-reduced-motion
 * Nutzer, die "Bewegung reduzieren" in ihrem OS aktiviert haben,
 * bekommen keine Animationen – wichtig bei Vestibular- oder Migräne-Sensitivität.
 */
@media (prefers-reduced-motion: reduce) {
  .contact-cta, .page-title, footer, .hero__content { animation: none !important; }
}

/* Animation-Bindungen: welche Elemente welche Animation erhalten */
.contact-cta, .page-title { animation: floatUp .6s cubic-bezier(.2,.9,.3,1) both; }
footer { animation: footerFade .55s ease both; }

/*
 * Button-Hover: sanftes Anheben des Buttons (translateY + scale).
 * transition auf .btn (nicht nur :hover) sorgt für smooth Rückgang nach Hover.
 */
.btn { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.btn:hover { transform: translateY(-4px) scale(1.01); filter: brightness(1.02); }

/*
 * Hero-Typographie (Vorab-Deklaration für prefers-reduced-motion):
 * Diese Regeln stehen bewusst vor dem Dark-Mode-Block, damit sie
 * als Basis-Größen für alle Themes gelten. Die Media-Query-Breakpoints
 * (bei 1200px, 900px, 600px) verkleinern die Werte dann stufenweise.
 * Doppelter Block (Hero h1/h2 auch weiter unten) erlaubt feinere Steuerung
 * je nach Hero-Kontext (generisch vs. nach Overlay-Klassen).
 */
.hero h1{
	margin: 0 0 0.5rem 0;
	font-family: "Montserrat", sans-serif;
	font-size: 3.2rem; /* desktop default */
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.hero h2{
	margin: 0 0 0.5rem 0;
	font-family: "Montserrat", sans-serif;
	font-size: 1.25rem;
	line-height: 1.2;
	color: rgba(var(--color-text),0.9);
}

/* Spezifischer Override: Untertitel im Home-Hero wie h1/.lead in beiden Themes */
.hero h2.hero-subtitle-fixed {
  color: rgb(255,255,255);
}

.hero .lead{
	margin: 0 0 1rem 0;
	font-family: "Open Sans", sans-serif;
	font-size: 1.05rem;
	line-height: 1.6;    /* Verringere den Zeilenabstand */
}
/*
 * Dark Mode – überschreibt alle :root-Variablen.
 * Wird durch data-theme="dark" auf <body> aktiviert (gesetzt von site.js).
 * @media prefers-color-scheme: dark (weiter unten) setzt es automatisch
 * wenn kein localStorage-Wert vorhanden ist.
 */
body[data-theme="dark"] {
	--color-primary: 30,30,30;
	--color-secondary: 0,0,0;
	--color-accent: 173,216,230;
	--color-bg: 15,15,15;
	--color-text: 255,255,255;

	--on-accent: 255,255,255;
}

/*
 * Betriebssystem-Präferenz: Dark Mode automatisch
 * Greift nur wenn site.js noch kein Theme aus localStorage geladen hat
 * (erster Besuch ohne gespeicherte Präferenz).
 */
@media (prefers-color-scheme: dark) {
	:root {
		--color-primary: 30,30,30;
		--color-secondary: 0,0,0;
		--color-accent: 173,216,230;
		--color-bg: 15,15,15;
		--color-text: 255,255,255;
		--on-accent: 255,255,255;
	}
}

/* ══════════════════════════════════════════════════════════════════════════════
   3. ALLGEMEINE EINSTELLUNGEN
   ══════════════════════════════════════════════════════════════════════════════ */

/* Allgemeine Einstellungen ---------------------------------------------------------------------*/
body {
	font-family: 'Open Sans', sans-serif;
	background-color: transparent;
	color: rgb(var(--color-text));
	line-height: 1.6;
	margin: 0;
	/*
	 * padding-top = Header-Höhe: verhindert, dass der fixierte Header
	 * den Seiteninhalt überdeckt. Wird als CSS-Variable geführt damit
	 * alle davon abhängigen Berechnungen konsistent bleiben.
	 */
	padding: 0;
	padding-top: var(--header-height);

	/*
	 * Sticky-Footer-Pattern:
	 * display: flex + flex-direction: column + min-height: 100vh
	 * → <footer> mit margin-top: auto klebt am unteren Seitenrand,
	 *   auch wenn der Inhalt kurz ist.
	 */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Fallback-Farbe auf html, damit der Body-Hintergrund transparent bleiben kann */
html { background-color: rgb(var(--color-bg)); }

/* Globale Link-Farbe – überschreibt Browser-Standard (blau/lila) ----------------------------*/
a {
  color: rgb(var(--color-accent));
  text-decoration: none;
}
a:visited {
  /* Besuchte Links leicht gedimmt, aber im gleichen Farbton */
  color: rgba(var(--color-accent), 0.75);
}
a:hover,
a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Container */
.container {
	max-width: var(--container-max);
	/* prefer a percentage of viewport on very wide screens, but never exceed --container-max */
	width: min(92vw, var(--container-max));
	margin: 0 auto;
	padding: 0 var(--container-padding);
	box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════════════
   4. HEADER
   ══════════════════════════════════════════════════════════════════════════════ */

/* Header-Stile ---------------------------------------------------------------------------------*/
header {
	/* fixiere die Kopfzeile dauerhaft oben */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(var(--color-primary),0.95);
	color: rgb(var(--color-text));
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	/*
	 * backdrop-filter: blur(6px) – Glasmorphismus-Effekt:
	 * Der Inhalt hinter dem Header wird unscharf gerendert.
	 * Anforderung: der Hintergrundvideo ist sichtbar hinter dem Header.
	 */
	backdrop-filter: blur(6px);
	z-index: 120; /* erhöht, damit die Leiste immer über dem Inhalt liegt */
}

/*
 * .header--highlight – visuell hervorgehobener Header für Unterseiten
 * (ohne Hero-Banner). Wird per JS gesetzt:
 *   header.className = content.dataset.headerClass || '';
 * Kein padding-Override → gleiche Höhe wie der Standard-Header.
 */
.header--highlight {
  background: linear-gradient(90deg, rgba(var(--color-accent),0.06), rgba(var(--color-primary),0.98));
  box-shadow: 0 6px 24px rgba(11,22,40,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  /* padding intentionally NOT overridden – keeps same height as base header */
}

/* dark header fallback */
body[data-theme="dark"] header{ background: rgba(var(--color-primary),0.9); }

/* Inneres Header-Layout */
.header-inner,
header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
}

/* Logo -----------------------------------------------------------------------------------------*/
.logo {
	display: inline-flex;
	align-items: center;
}
.logo img {
	height: var(--logo-height);
	max-height: var(--logo-height);
	width: auto;
	display: block;
	object-fit: contain;
}

/* Navigation -----------------------------------------------------------------------------------*/
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1rem;
	align-items: center;
}
nav ul li {
	display: inline;
}
nav ul li a {
	color: rgb(var(--color-text));
	text-decoration: none;
	font-weight: 600;
	padding: 6px 10px;
	border-radius: 6px;
}
nav ul li a:hover{ background: rgba(var(--color-accent),0.15); }

/* ══════════════════════════════════════════════════════════════════════════════
   5. HINTERGRUNDVIDEO (.page-bg)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Body -----------------------------------------------------------------------------------------*/
.page-bg {
	position: fixed;   /* bleibt beim Scrollen sichtbar */
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover; /* füllt immer die gesamte Viewport-Fläche, schneidet bei Bedarf ab */
	z-index: -10;      /* hinter absolut allem anderen Inhalt */
	pointer-events: none; /* blockiert keine Maus-Interaktionen */
	opacity: 0.95;
}

/*
 * Stacking-Context: Container und Footer liegen über dem Video.
 * position: relative + z-index: 80 reicht, da .page-bg bei z-index: -10 liegt.
 */
/* Elemente, die über dem Video liegen sollen -- header ist jetzt fixed, nicht relative */
.container, footer {
	position: relative;
	z-index: 80;
}

/* ══════════════════════════════════════════════════════════════════════════════
   6. SEKTIONEN (allgemein)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Sektionen ------------------------------------------------------------------------------------*/
section {
	padding: 48px 20px;
	margin: 28px 0;
	background-color: transparent; /* Hintergrund per Klasse (z. B. .panel-section) steuerbar */
	box-shadow: var(--shadow);
	border-radius: var(--radius);
}

/*
 * .page-title – kompakter Seitentitel-Banner für Unterseiten.
 * Ersetzt den großen .hero bei Kontakt, Datenschutz, Impressum, Dienstleistungen.
 * Weniger vertikaler Raum als Hero → Inhalt erscheint sofort sichtbar.
 */
.page-title {
  padding: 1rem 0 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.page-title .container { display:flex; flex-direction:column; gap:0.25rem; }
.page-title h1 { margin: 0; font-size: 1.6rem; }
.page-title .lead { margin: 0; color: rgba(var(--color-text),0.78); font-size: 1rem; }

/* small utility to increase vertical rhythm between major blocks */
.section-gap { margin-top: 1.25rem; margin-bottom: 1.25rem; }

/* Überschriften --------------------------------------------------------------------------------*/
h1, h2 {
	font-family: 'Montserrat', sans-serif;
	color: rgb(var(--color-text));
}

/* Headlines mit Bild ---------------------------------------------------------------------------*/
.headline-container {
	display: flex;                	/* Aktiviert Flexbox */
	align-items: center;          	/* Zentriert das Bild vertikal mit dem Text */
}

.headline-image {
	height: 2vw;			/* Höhe des Bildes an die Textgröße anpassen */
	width: auto;			/* Breite automatisch anpassen */
	margin-left: 1rem;		/* Optional: Abstand zwischen Text und Bild */
	margin-bottom: 0.5vw;
}


/* ══════════════════════════════════════════════════════════════════════════════
   8. HERO-BEREICH
   ══════════════════════════════════════════════════════════════════════════════
   Drei-Layer-Aufbau:
     Layer 1: .hero__bg  – Hintergrundbild (absolute, inset: 0, z-index: 0)
     Layer 2: .hero::after – dunkles Gradient-Overlay (absolute, z-index: 1)
     Layer 3: .hero__content – Text + CTA (relative, z-index: 2)
   */

/* Hero-Bild unterhalb des Headers --------------------------------------------------------------*/
.hero {
	position: relative;
	width: 100%;
	/* height by content - no fixed min-height */
	overflow: hidden;
	background: transparent !important; /* überschreibt allgemeine section-Farbe */
}

/* echtes Background‑Layer als Kind (robust gegen Überdecken) */
.hero__bg {
	position: absolute;
	inset: 0;
  background-image: none;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	pointer-events: none;
	z-index: 0;
	transform-origin: center center;
	transform: scale(1.03);
	transition: transform 10s linear, filter 300ms ease;
	filter: brightness(0.9) saturate(0.95);
}

/*
 * .hero::after – Gradient-Overlay für Lesbarkeit.
 * content: "" macht das Pseudo-Element sichtbar (ohne Inhalt).
 * Der Gradient verdunkelt den oberen Bildbereich um ~18-8% → Text bleibt lesbar.
 * Unterseiten-Varianten (.contact-hero, .services-hero) haben stärkere Overlays.
 */
/* subtle overlay to improve contrast */
.hero::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.08));
	z-index: 1;
	pointer-events: none;
}

/* stronger overlays for specific pages where the background images are busy */
.hero.services-hero::after,
.hero.contact-hero::after {
	background: linear-gradient(rgba(0,0,0,0.52), rgba(0,0,0,0.36));
}

/* slightly different, gentler overlay for portfolio */
.hero.portfolio-hero::after{
	background: linear-gradient(rgba(0,0,0,0.34), rgba(0,0,0,0.22));
}

/* reduce hero height on smaller screens */
@media (max-width: 900px){
	.hero{ /* height by content on smaller screens as well */ }
}
@media (max-width: 600px){
	.hero{ /* height by content on very small screens */ }
}

/* ──────────────────────────────────────────────────────────────────────────────
   Responsive Typographie: Hero-Texte (Breakpoint-Gruppe A)
   Wird separat von den restlichen Media Queries definiert, damit die Hero-
   Schriftgrößen unabhängig und übersichtlich skaliert werden können.
   Reihenfolge: 1200px (wide) → 900px (tablet) → 600px (mobile)
   ────────────────────────────────────────────────────────────────────────────── */
/* Responsive typography: scale down sizes at breakpoints (A) */
@media (max-width: 1200px) {
	.hero h1 { font-size: 2.6rem; }
	.hero h2 { font-size: 1.2rem; }
	.hero .lead { font-size: 1rem; }
	.welcome-section h2 { font-size: 1.4rem; }
	.welcome-section .lead, .welcome-section li { font-size: 0.98rem; }
	.about-section h1 { font-size: 1.8rem; }
	.about-section h2 { font-size: 1.15rem; }
}

@media (max-width: 900px) {
	.hero h1 { font-size: 2.2rem; }
	.hero h2 { font-size: 1.05rem; }
	.hero .lead { font-size: 0.98rem; }
	.welcome-section { flex-direction: column; gap: 1rem; }
	.image-content { flex: 0 0 80%; max-width: none; }
}

@media (max-width: 600px) {
	.hero h1 { font-size: 1.8rem; }
	.hero h2 { font-size: 0.95rem; }
	.hero .lead { font-size: 0.95rem; }
	.welcome-section { padding: 1rem; }
	.image-content { flex: 0 0 100%; }
}

/* Inhalt liegt sichtbar über dem Background-Layer */
.hero__content {
	position: relative;
	display: flex;                  /* Aktiviert Flexbox */
	flex-direction: column;         /* Ordnet Kinder vertikal an */
	justify-content: center;        /* Vertikale Zentrierung */
	align-items: center;            /* Horizontale Zentrierung */
	height: 100%;                   /* Nimmt die volle Höhe der übergeordneten Section ein */
	padding: 3.5rem 1rem;           /* Padding oben hinzufügen */
	line-height: 1.2;               /* engerer Zeilenabstand */
	z-index: 2;                      /* über dem overlay */
	text-align: center;
}

/* Ensure hero content text stays white regardless of theme overrides */
.hero__content,
.hero__content h1,
.hero__content h2,
.hero__content .lead,
.hero__content p,
.hero__content a {
  color: rgb(255,255,255);
}

/* Typographie */
.hero h1{
	margin: 0 0 0.5rem 0;
	font-family: "Montserrat", sans-serif;
	font-size: 3rem; /* fixed size for consistent scaling */
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.hero h2{
	margin: 0 0 0.5rem 0;
	font-family: "Montserrat", sans-serif;
	font-size: 1.25rem;
	line-height: 1.2;
	color: rgba(var(--color-text),0.9);
}

/* Spezifischer Override: Untertitel im Home-Hero wie h1/.lead in beiden Themes */
.hero h2.hero-subtitle-fixed {
  color: rgb(255,255,255);
}

.hero .lead{
	margin: 0 0 1rem 0;
	font-family: "Open Sans", sans-serif;
	font-size: 1rem;
	line-height: 1.6;    /* Verringere den Zeilenabstand */
}

/* Button */
.btn{
	display: inline-block;
	background: rgb(var(--color-accent));
	color: rgb(var(--on-accent));
	padding: 0.7rem 1rem;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	transition: transform .18s ease, box-shadow .18s ease;
}
/* Alle Link-Pseudoklassen explizit überschreiben, damit globale a-Regeln
   die Button-Textfarbe nicht übersteuern (Spezifitäts-Konflikt) */
.btn:link,
.btn:visited,
.btn:hover,
.btn:focus-visible {
	color: rgb(var(--on-accent));
	text-decoration: none;
}
.btn:hover{ transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }

.btn .btn-icon { margin-right: 0.6rem; display: inline-flex; align-items: center; font-size: 1.05rem; }

/* Mobile Anpassungen */
@media (max-width: 600px){
	.hero{
		height: clamp(220px, 30vh, 320px);
	}
	.hero__content{
		padding: 1rem;
	}
}

/* ══════════════════════════════════════════════════════════════════════════════
   9. WILLKOMMEN-SEKTION (.welcome-section)
   ══════════════════════════════════════════════════════════════════════════════
   Zweiteilige Flex-Zeile auf der Startseite:
   – .text-content  → linke Spalte mit Überschrift, Lead, Liste (flex: 1 1 0)
   – .image-content → rechte Spalte mit Profilfoto (flex: 0 0 35%, max 480px)
   Auf <900px wechselt der Layout zu flex-direction: column (Bild unter Text).
   ══════════════════════════════════════════════════════════════════════════════ */

/* Willkommen-Sektion mit Bild und Text ---------------------------------------------------------*/
.welcome-section {
	display: flex;                  /* Aktiviert Flexbox */
	width: 100%;                   /* Vollständige Breite */
	max-width: 1200px;       /* Setze eine maximale Breite */
	margin: 0 auto;
	gap: 2rem;
	align-items: center;           /* zentriere Text und Bild vertikal */
}

.text-content {
	flex: 1 1 0;                    /* flexibel: nimmt verbleibenden Platz */
	padding: 2rem;                /* Innenabstand für mehr Platz */
	display: flex;                /* Aktiviert Flexbox für Text */
	flex-direction: column;       /* Text vertikal anordnen */
}

.welcome-section h2 {
	margin: 0 0 0.5rem 0;
	font-family: "Montserrat", sans-serif;
	font-size: 1rem;
	line-height: 1.6; 	/* Verringere den Zeilenabstand */
}

.welcome-main-heading {
  margin: 0 0 0.5rem 0;
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
  line-height: 1.2;
}

.welcome-section .lead {
	margin: 0 0 0.5rem 0;
	font-family: "Montserrat", sans-serif;
	font-size: 1rem;
	line-height: 1.6; 	/* Verringere den Zeilenabstand */
}

.welcome-section li {
	margin: 0 0 0.5rem 0;
	font-family: "Montserrat", sans-serif;
	font-size: 1.6rem;
	line-height: 1.2;
}

.image-content {
	/* use percentage basis so image scales nicer on different widths */
	flex: 0 0 35%;                 /* 35% of the container width as basis */
	max-width: 480px;             /* but don't grow beyond this */
	display: flex;
	align-items: center;           /* Bild vertikal zentrieren */
	justify-content: center;
}

.image-content img {
	max-width: 100%;               /* Breite automatisch anpassen */
	height: auto;                  /* natürliche Höhe beibehalten */
	object-fit: contain;           /* Bild vollständig sichtbar, nicht abgeschnitten */
	display: block;
}

/* ══════════════════════════════════════════════════════════════════════════════
   10. ABOUT-SEKTION (.about-section)
   ══════════════════════════════════════════════════════════════════════════════
   Drei-Layer-Stacking-Kontext (identisch zum Hero):
   – .about-section       → Außenrahmen, position: relative, kein eigenes Padding
   – .about-section__bg   → optionaler Hintergrund-Layer (opacity: 0, aktuell unsichtbar)
   – .about-section__content → Inhalt über dem Hintergrund (z-index: 1)
   Die Sektion nutzt .panel-section als Glasmorphismus-Klasse.
   Aggressive background: transparent !important-Regeln am Ende der Datei
   stellen sicher, dass kein inneres Element ein eigenes Panel zeichnet.
   ══════════════════════════════════════════════════════════════════════════════ */

/* About Section mit Bild und Text --------------------------------------------------------------*/
.about-section {
	position: relative;
	width: 100%;
	max-width: 1200px;       /* Setze eine maximale Breite */
	margin: 0 auto;
	overflow: hidden;
	background: transparent !important; /* überschreibt allgemeine section-Farbe */
	z-index: 0; /* Header sollte bei Bedarf höher liegen */
}

/* echtes Background‑Layer als Kind (robust gegen Überdecken) */
.about-section__bg {
	position: absolute;
	inset: 0;
	background-image: url('../img/CorporateDesign/Flat_Wallpaper_Dark7.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 0;
	pointer-events: none;
	z-index: 0;
}

/* Inhalt liegt sichtbar über dem Background-Layer */
.about-section__content {
	position: relative;
	display: flex;                  /* Aktiviert Flexbox */
	flex-direction: column;         /* Ordnet Kinder vertikal an */
	justify-content: flex-start;    /* Vertikale Zentrierung */
	align-items: flex-start;        /* Horizontale Ausrichtung nach rechts */
	height: auto;                   /* Content height */
	padding: 0;                     /* rely on parent .panel-section for padding */
	line-height: 1.6;               /* Verringere den Zeilenabstand */
	z-index: 1;
	/* remove inner background/box so the outer .panel-section provides the blurred panel */
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

/* constrain outer about section so visual box is inner container */
.about-section {
	padding: 2.5rem 0;
	box-shadow: none;
	border-radius: 0;
	background: transparent;
}

/* Typographie */
.about-section h1{
	margin: 0 0 0.5rem 0;
	font-family: "Montserrat", sans-serif;
	font-size: 2rem;
	line-height: 1.15;    /* Verringere den Zeilenabstand */
}

.about-section h2{
	margin: 0 0 0.5rem 0;
	font-family: "Montserrat", sans-serif;
	font-size: 1.25rem;
	line-height: 1.3;    /* Verringere den Zeilenabstand */
}

/* Mobile Anpassungen */
@media (max-width: 600px){

				.about-section {
					position: relative;
					width: 100%;
					max-width: 1200px;       /* Setze eine maximale Breite */
	}
}

/* ══════════════════════════════════════════════════════════════════════════════
   11. EXPERIENCE-SEKTION (.experience-section)
   ══════════════════════════════════════════════════════════════════════════════
   Technologie-Portfolio auf der Startseite:
   – .experience-section    → max-width: 1200px, text-align: center
   – .experience-bg         → optionales Hintergrundvideo (z-index: -1, deaktiviert)
   – .experience-container  → CSS Grid mit auto-fill (min 250px breit)
   Drei Karten-Varianten (gleiche Basis-Styles, unterschiedliches Grid-Span):
   – .experience-card       → Standard 1×1 Karte
   – .experience-large-card → Breite über 2 Spalten (grid-column: span 2)
   – .experience-tall-card  → Höhe über 2 Zeilen (grid-row: span 2)
   Alle Karten: bluepurple glassmorphism (hsla(210,100%,50%,0.3) + blur(6px)).
   Hover: helles Blau (0.8 Deckkraft) + translateY(-5px).
   ══════════════════════════════════════════════════════════════════════════════ */

/* Experience Sektion mit Karten ----------------------------------------------------------------*/
.experience-section {
	position: relative;
	overflow: hidden;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	max-width: 1200px;       /* Maximale Breite des Inhalts */
	/*background-image: url('../img/CorporateDesign/Flat_Wallpaper_Dark8.png');*/
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/* Video als Hintergrund */
.experience-section .experience-bg {
	position: absolute;
	inset: 0;              /* top:0; right:0; bottom:0; left:0; */
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;           /* hinter den Inhalten */
	pointer-events: none;  /* keine Maus-Interaktion blockieren */
	opacity: 0.9;          /* optional: etwas transparent machen */
}

/* Inhalt über dem Video */
.experience-section > h2,
.experience-section .experience-container,
.experience-section .experience-container * {
	position: relative;
	z-index: 1;            /* über dem Video */
}

.experience-container {
	display: grid;               /* Aktiviert CSS Grid */
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Flexible Spalten */
	grid-gap: 20px;             /* Abstand zwischen den Karten */
}

.experience-card,
.experience-large-card,
.experience-tall-card {
  background-color: hsla(210, 100%, 50%, 0.3);
  color: #ffffff;
  border-radius: 10px;
  padding: 20px;
  transition: transform 0.3s;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background-clip: padding-box;
}

.experience-large-card {
  grid-column: span 2;
  grid-row: span 1;
}

.experience-tall-card {
  grid-column: span 1;
  grid-row: span 2;
}

.experience-card:hover,
.experience-large-card:hover,
.experience-tall-card:hover {
  transform: translateY(-5px);
  background-color: hsla(210, 100%, 50%, 0.8);
}

.experience-card h3,
.experience-large-card h3,
.experience-tall-card h3 {
  margin: 0 0 10px 0;
  font-size: 1.5rem;
}

.experience-card p,
.experience-large-card p,
.experience-tall-card p {
  margin: 0;
  font-size: 1rem;
}


/* ══════════════════════════════════════════════════════════════════════════════
   12. SERVICES-SEKTION (.services-section)
   ══════════════════════════════════════════════════════════════════════════════
   Dienstleistungskarten-Grid auf der Seite services.html:
   – .services-section    → text-align: center, max-width: 1200px
   – .services-container  → CSS Grid: 3 Spalten →  2 (≤900px) → 1 (≤600px)
   – .service-card        → gleicher Glasmorphismus wie Experience-Karten
   – .service-card__icon  → 48×48px Akzentfarbe-Badge (inline-flex, Blur-Hintergrund)
   – .service-card .muted → gedimmter Teaser-Text
   – .service-card .small → weiterführender Link (kleiner, Akzentfarbe)
   Ergänzende Elemente:
   – .services-cta        → Call-to-Action-Banner unter dem Grid
   – .process-list        → Horizontale 4-Phasen-Übersicht (flex, ≤900px: column)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Service Sektion mit Karten -------------------------------------------------------------------*/
.services-section {
	text-align: center;
	width: 100%;
	margin: 0 auto;
	max-width: 1200px;       /* Maximale Breite des Inhalts */
}

.services-container {
  display: grid; /* Rasterlayout */
  grid-template-columns: repeat(3, 1fr); /* Drei Spalten auf Desktop (3x2 für sechs Karten) */
  gap: 24px; /* Abstand zwischen den Karten */
}

@media (max-width: 900px) {
  .services-container {
	grid-template-columns: repeat(2, 1fr); /* Zwei Spalten auf Tablets */
  }
}

@media (max-width: 600px) {
  .services-container {
	grid-template-columns: 1fr; /* Eine Spalte auf Mobilgeräten */
  }
}

.service-card {
	background-color: hsla(210, 100%, 50%, 0.3); /* Dunkler Hintergrund mit 80% Deckkraft */
	border-radius: 10px;      /* Abgerundete Ecken */
	padding: 20px;            /* Innenabstand in der Karte */
	transition: transform 0.3s; /* Übergangseffekt bei Hover */
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background-clip: padding-box;
}

.service-card:hover {
	transform: translateY(-5px); /* Hebe die Karte beim Hover leicht an */
	background-color: hsla(210, 100%, 50%, 0.8);
}

.service-card h3 {
	margin: 0 0 10px 0;
	font-size: 1.5rem;         /* Textgröße für die Überschrift */
}

.service-card p {
	margin: 0;
	font-size: 1rem;           /* Textgröße für den Beschreibungstext */
}

/* Icon inside service cards (flat SVG) */
.service-card__icon{
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:0.6rem;
  color: rgb(var(--color-accent));
  background: rgba(var(--color-accent), 0.06);
  border-radius: 8px;
}

.service-card .muted{ color: rgba(var(--color-text),0.7); margin-bottom:0.5rem; }
.service-card .small{ margin-top:0.8rem; font-size:0.9rem; }
.service-card .small a{ color: rgb(var(--color-accent)); text-decoration: none; }

/* Make services grid responsive: use auto-fit */
.services-container{ /* keep responsive fallback: handled by media queries above */ }

/* CTA under services */
.services-cta{ text-align:center; padding:2rem 1rem; }
.services-cta .btn-primary{ background: rgb(var(--color-accent)); color: rgb(var(--on-accent)); padding:0.9rem 1.25rem; border-radius:10px; }

/* Process / How we work */
.process-section .process-list{ display:flex; gap:1.25rem; list-style:none; padding:0; margin:1rem 0 0 0; }
.process-section .process-list li{ flex:1; background: rgba(var(--color-primary),0.04); padding:1rem; border-radius:10px; text-align:left; }
.process-section .process-list li strong{ display:block; margin-bottom:0.35rem; }
.process-section .process-list li p{ margin:0; color: rgba(var(--color-text),0.75); }

@media (max-width: 900px){
  .process-section .process-list{ flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   13. KONTAKT-CTA (.contact-cta)
   ══════════════════════════════════════════════════════════════════════════════
   Kompakter Kontaktbereich am Ende der Startseite (home.html):
   Zentrierter Flex-Container mit Gradient-Hintergrund, abgerundeten Ecken
   und leichtem Schatten. Enthält: Überschrift, Lead-Text, CTA-Button.
   Auf ≤600px: Breite des Buttons auf 100% (full-width).
   ══════════════════════════════════════════════════════════════════════════════ */

/* Kontakt --------------------------------------------------------------------------------------*/
.contact,
.contact h2 {
	display: flex;                  /* Aktiviert Flexbox */
	width: 100%;                   /* Vollständige Breite */
	max-width: 1200px;       /* Setze eine maximale Breite */
	margin: 0 auto;
	background-color: rgba(var(--color-primary),0.5);
}

/* Kontakt CTA (kompakter Block auf der Hauptseite) -------------------------------------------*/
.contact-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem 1rem;
  background: linear-gradient(180deg, rgba(var(--color-accent),0.06), rgba(255,255,255,0.02));
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(11,22,40,0.06);
  margin: 24px 0;
  border: 1px solid rgba(0,0,0,0.03);
}
.contact-cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.contact-cta h2 { margin: 0; font-size: 1.25rem; }
.contact-cta .lead { margin: 0; color: rgba(var(--color-text),0.85); }
.contact-cta .btn {
  padding: 1rem 1.6rem;
  font-size: 1.05rem;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(11,22,40,0.08);
  /* Abstand zum unteren Panel-Rand: sorgt für Luft zwischen Button und Panel-Border */
  margin-bottom: 0.6rem;
}

/* Keep contact CTA text white in both themes; include underscore alias for compatibility */
.contact-cta,
.contact_cta,
.contact-cta h2,
.contact_cta h2,
.contact-cta .lead,
.contact_cta .lead,
.contact-cta p,
.contact_cta p,
.contact-cta a:not(.btn),
.contact_cta a:not(.btn) {
  color: rgb(255,255,255);
}

/*
 * Backdrop-Filter-Gruppe: Glasmorphismus für alle halbtransparenten Elemente.
 * Diese Elemente erhalten blur(6px) damit das Hintergrundvideo durch sie
 * hindurchscheint. background-clip: padding-box  stellt sicher, dass der
 * Blur an den abgerundeten Ecken endet und kein visueller "Leak" entsteht.
 * Hinweis: #contact-form wird am Ende der Datei per !important-Reset
 * explizit von Blur befreit (kein doppeltes Panel über dem äußeren Panel).
 */
/* Subtle background blur for semi-transparent panels */
.about-section__content,
#contact-form,
.contact,
.contact-cta,
footer {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  /* ensure background preserves rounded corners for blur */
  background-clip: padding-box;
}

@media (max-width: 600px) {
  .contact-cta { padding: 1.5rem 0.75rem; }
  .contact-cta .btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   14. KONTAKTFORMULAR (#contact, #contact-form, .contact-grid)
   ══════════════════════════════════════════════════════════════════════════════
   Aufbau der Kontaktseite (contact.html):
   – #contact             → äußerer Section-Wrapper, flex, zentriert
   – .contact-grid        → zweispaltiges Grid: [Formular | Info-Panel (320px)]
                            auf ≤900px: einspaltiges Grid, Info-Panel nach unten
   – #contact-form        → display: flex, flex-direction: column, gap: 0.75rem
   – inputs/textarea      → transparenter Hintergrund, 1px Border, 8px Radius
   – button[type=submit]  → Akzentfarbe, volle Breite, hover-lift + brightness
   – .hp                  → Honeypot-Feld (Spam-Schutz), position: absolute, außerhalb
   – .consent             → Datenschutz-Checkbox-Zeile (flex, gap)
   – .form-status         → Erfolgs-/Fehlermeldung nach Formularversand (display:none → block)
   Wichtig: Das Formular selbst hat kein sichtbares Panel (background: transparent !important).
   Das äußere .panel-section liefert den Glasmorphismus-Hintergrund.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Contact form styles (scoped to contact page) -----------------------------------------------*/
#contact {
  display: flex;
  justify-content: center;
  padding: 2.5rem 1rem;
}
#contact .container { max-width: 900px; }
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  /* visually merge the form with its parent panel */
  background: transparent !important;
  padding: 0; /* rely on outer .panel-section for padding */
  border-radius: 0 !important;
  box-shadow: none !important;
}
#contact-form label { margin: 0.25rem 0 0 0; font-weight:600; }
#contact-form input,
#contact-form textarea,
.panel-section #contact-form select {
  padding: 0.8rem;
  /* allow the panel blur to show through; keep subtle borders for inputs */
  background: transparent;
  color: rgb(var(--color-text));
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}
#contact-form button {
  background-color: rgb(var(--color-accent));
  color: rgb(var(--on-accent));
  padding: 0.9rem 1.1rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}
#contact-form button:hover { filter: brightness(0.95); }

/* Strong reset: ensure the form does not draw its own panel background
   but keep inputs readable by giving them a subtle fill that adapts to theme. */
.panel-section #contact-form {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.panel-section #contact-form * {
  /* remove any nested background/box-shadow that could create a visible block */
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Also clear any pseudo-element backgrounds on the form itself (covers ::before/::after) */
#contact-form, #contact-form::before, #contact-form::after {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/*
 * Light- und Dark-Theme spezifische Input-Stile (innerhalb des Glasmorphismus-Panels):
 * Light: sehr leichtes Weißtönung (rgba(255,255,255,0.06)) – kaum sichtbar
 * Dark:  leichte Schwarztönung  (rgba(0,0,0,0.18))         – dezent dunkel
 * !important nötig, weil weiter oben aggressive transparenz-Reset-Regeln greifen.
 */
/* Make inputs lightly visible inside the panel (light theme) */
body:not([data-theme="dark"]) .panel-section #contact-form input,
body:not([data-theme="dark"]) .panel-section #contact-form textarea,
body:not([data-theme="dark"]) .panel-section #contact-form select {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  color: rgb(var(--color-text)) !important;
}

/* Inputs in dark theme */
body[data-theme="dark"] .panel-section #contact-form input,
body[data-theme="dark"] .panel-section #contact-form textarea,
body[data-theme="dark"] .panel-section #contact-form select {
  background: rgba(0,0,0,0.18) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: rgb(var(--color-text)) !important;
}

/* Keep buttons and accent controls intact */
.panel-section #contact-form button { box-shadow: none; }

/*
 * Zweispaltiges Kontaktseiten-Layout:
 * – Linke Spalte (1fr):   Formularfelder (.contact-form)
 * – Rechte Spalte (320px): Kontaktinfo (.contact-info) mit Adresse/E-Mail
 * align-items: center → Spalten vertikal mittig ausgerichtet
 * Auf ≤900px: einspaltiges Grid, .contact-info rückt an zweite Position.
 */
/* Two-column layout for contact page: form + info panel */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: center;
}
.contact-form{ }
.contact-info{
  /* embed into same blurred panel: remove separate background */
  background: transparent;
  padding: 0.25rem 0 0 0; /* slight inner spacing, rely on panel padding */
  border-radius: 0;
}
.contact-info h3{ margin-top: 0; }

/*
 * .hp – Honeypot-Feld (Spam-Schutz im Kontaktformular)
 * Das Feld ist komplett aus dem sichtbaren Bereich verschoben.
 * Echte Nutzer füllen es nicht aus; Bots füllen alle Felder aus.
 */
/* Honeypot field: visually hidden but present in DOM for bots */
.hp{ position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* File input styling */
#attachment{ padding: 0.4rem; }

/* Consent checkbox – Checkbox auf natürliche Größe zurücksetzen */
#contact-form input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  accent-color: rgb(var(--color-accent));
}
.consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}
.consent .consent-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.consent .consent-text a {
  font-size: 0.85em;
  opacity: 0.8;
}

@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-info{ order: 2; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   15. FOOTER
   ══════════════════════════════════════════════════════════════════════════════
   Statischer Fußzeilenbereich:
   – text-align: center → zentrierter Inhalt (Copyright, Links)
   – background: rgba(--color-primary, 0.5) → halbdurchsichtiger Panel-Hintergrund
   – border-top → dezente Trennlinie vom Inhalt
   – margin-top: auto → Sticky-Footer-Pattern: klebt am unteren Rand (body ist flex-column)
   – footerFade-Animation (0.55s ease) → sanftes Einblenden beim Seitenwechsel
   ══════════════════════════════════════════════════════════════════════════════ */

/* Footer ---------------------------------------------------------------------------------------*/
footer {
	text-align: center;
	padding: 14px 8px;
	background-color: rgba(var(--color-primary),0.5);
	color: rgb(var(--color-text));
	font-size: 0.95rem;
	border-top: 1px solid rgba(0,0,0,0.04);
	/* push footer to bottom when page content is short */
	margin-top: auto;
}

/* ══════════════════════════════════════════════════════════════════════════════
   16. RESPONSIVE ANPASSUNGEN (Breakpoint: 600px – Mobile)
   ══════════════════════════════════════════════════════════════════════════════
   Auf schmalen Bildschirmen:
   – Header-Container: flex-direction: column, links ausgerichtet
   – Logo: verkleinert (40px), Header-Höhe reduziert (56px)
   – section: weniger Padding (20px/12px) → mehr Platz für Inhalt
   Weitergehende Responsive-Regeln (Nav, Services, etc.) sind direkt
   bei den jeweiligen Komponenten-Abschnitten kommentiert.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Responsive Anpassung */
@media (max-width: 600px) {
	header .container {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	:root { --logo-height: 40px; --header-height: 56px; }
	section { padding: 20px 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   17. MOBILE NAVIGATION & THEME-TOGGLE
   ══════════════════════════════════════════════════════════════════════════════
   Hamburger-Menü (.nav-toggle):
   – auf Desktop: display: none (versteckt)
   – auf ≤900px:  display: inline-flex, öffnet/schließt .nav-open per JS
   body.nav-open nav:
   – display: block → Nav als volle Breite unterhalb des Headers
   – ul: flex-column, weiß/dunkler Hintergrund je nach Theme, Radius + Schatten
   Theme-Toggle (#theme-toggle):
   – Absolut positioniert, immer am rechten Header-Rand
   – z-index: 130 → über Header-Inhalt
   – auf ≤900px: right: 12px (weniger Abstand wegen kleinerem Viewport)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Mobile navigation (Hamburger) and Theme toggle ---------------------------------------------*/
.nav-toggle{
	display: none;
	background: transparent;
	border: none;
	font-size: 1.6rem;
	padding: 6px 8px;
	cursor: pointer;
	color: rgb(var(--color-text));
}

/* Dark Mode: Hamburger-Icon hell darstellen (wie Theme-Toggle) */
body[data-theme="dark"] .nav-toggle {
	color: rgb(var(--color-text));
}

#theme-toggle{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid rgba(0,0,0,0.10);
	padding: 6px;
	border-radius: 6px;
	cursor: pointer;
	color: rgb(var(--color-text));
	line-height: 1;
	width: 34px;
	height: 34px;
}
body[data-theme="dark"] #theme-toggle { border-color: rgba(255,255,255,0.12); }
#theme-toggle svg { display: block; }

/* Position theme toggle visually at the far right of the header/navigation */
#theme-toggle {
  position: absolute;
  right: calc(var(--container-padding));
  top: 50%;
  transform: translateY(-50%);
  z-index: 130; /* above header content */
}

/* Prevent nav items from sitting under the absolute toggle on wide screens */
header nav { padding-right: 3.2rem; }

@media (max-width: 900px) {
  /* On small screens the nav becomes a block; keep toggle visible at the top-right */
  #theme-toggle { right: 12px; }
  header nav { padding-right: 0.5rem; }
}

/* hide nav on small screens until toggled */
@media (max-width: 900px){
	nav { display: none; }
	.nav-toggle{ display: inline-flex; }
	/* when body has class nav-open show nav as full width block */
	body.nav-open nav{
		display: block;
		width: 100%;
	}
	body.nav-open nav ul{
		display: flex;
		flex-direction: column;
		gap: 0;
		background: rgba(255,255,255,0.98);
		margin-top: 8px;
		padding: 12px;
		border-radius: 8px;
		box-shadow: 0 8px 30px rgba(11,22,40,0.06);
	}
	body[data-theme="dark"].nav-open nav ul{
		background: rgba(20,20,20,0.95);
	}
	nav ul li a{ display: block; padding: 10px 12px; }
}

/* Final mobile header fix: Theme- und Hamburger-Button nebeneinander */
@media (max-width: 900px) {
  header .container {
    position: relative;
    padding-right: 6.25rem;
  }

  #theme-toggle {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }

  .nav-toggle {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 131;
  }

  header nav {
    width: 100%;
    padding-right: 0.5rem;
  }
}

@media (max-width: 600px) {
  header .container {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding-right: 6.25rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   16. UTILITIES & PANEL-SECTION
   ══════════════════════════════════════════════════════════════════════════════ */

/* Form status messages */
.form-status{ margin-top: 12px; padding: 10px 12px; border-radius: 8px; display:none; }
.form-status.success{ display:block; background: rgba(40,167,69,0.12); color: rgb(40,167,69); border:1px solid rgba(40,167,69,0.12); }
.form-status.error{ display:block; background: rgba(220,53,69,0.08); color: rgb(220,53,69); border:1px solid rgba(220,53,69,0.12); }

/* small utilities */
.muted{ color: rgba(var(--color-text),0.7); } /* gedimmte Nebeninformations-Textfarbe */

/*
 * SPA-Seitenwechsel-Transition:
 * navigate() in site.js setzt opacity: 0 (ausblenden), dann opacity: 1 (einblenden).
 * Diese transition-Deklaration sorgt für das sanfte Auf-/Ausblenden.
 */
/* SPA: smooth content transition */
#app-content { transition: opacity 0.18s ease; }

/*
 * Aktiver Navigationslink (.nav-active):
 * Wird von updateActiveNav() und dem IntersectionObserver in site.js gesteuert.
 * Zeigt dem Nutzer, welche Seite oder welcher Abschnitt aktuell aktiv ist.
 * – Routen-Links: per URL-Pfad-Vergleich
 * – Anker-Links:  per IntersectionObserver (beim Scrollen durch Sektionen)
 */
/* Active nav link */
nav ul li a.nav-active {
  background: rgba(var(--color-accent), 0.18);
  color: rgb(var(--color-accent));
}

/*
 * .panel-section – Glasmorphismus-Basisklasse
 * ─────────────────────────────────────────────
 * Alle Inhaltsbereiche der Website nutzen diese Klasse.
 * Effekt: halbtransparentes Panel, Hintergrundvideo scheint durch.
 *
 * background-color: rgba(--color-primary, 0.5) → 50% transparent, theme-aware
 * backdrop-filter: blur(6px) → Weichzeichner für das durchscheinende Video
 * box-shadow → Tiefenwirkung / Trennung vom Hintergrund
 */
/* panel-section: semi-transparent background + subtle blur for sections without explicit background */
.panel-section {
  background-color: rgba(var(--color-primary), 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(11,22,40,0.04);
  padding: 2rem 1rem;
}
@media (max-width: 600px) {
  .panel-section { padding: 1rem .75rem; }
}

/* Ensure about section exactly matches panel appearance */
.about-section.panel-section {
  /* force same panel appearance as other sections */
  background-color: rgba(var(--color-primary), 0.5) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  box-shadow: 0 8px 30px rgba(11,22,40,0.04) !important;
  border-radius: var(--radius) !important;
  position: relative; /* ensure stacking context */
  overflow: hidden;
}

/* Make sure inner content fills the panel width and uses same padding rhythm */
.about-section .container { max-width: var(--container-max); width: min(92vw, var(--container-max)); }

/* hide decorative about background if present to avoid color mismatch */
.about-section__bg { display: none !important; }

/* Add consistent vertical rhythm between panel sections */
.panel-section + .panel-section {
  margin-top: 3.5rem; /* match hero <section> spacing (28px top + 28px bottom) */
  /* Zusätzliche Schattenkante zwischen zwei direkt aufeinanderfolgenden Panels
	 erzeugt einen stärkeren Tiefeneffekt und trennt die Bereiche optisch besser. */
  box-shadow: 0 -12px 30px rgba(11,22,40,0.06), 0 8px 30px rgba(11,22,40,0.04);
}
@media (max-width: 900px) { .panel-section + .panel-section { margin-top: 2.5rem; } }
@media (max-width: 600px) { .panel-section + .panel-section { margin-top: 1.25rem; } }

/* Mobile hardening: bessere Lesbarkeit/Bedienung auf kleinen Displays */
@media (max-width: 900px) {
  /* Keep interactive elements finger-friendly */
  .btn,
  .nav-toggle,
  #theme-toggle,
  nav ul li a,
  #contact-form button {
	min-height: 44px;
  }

  .nav-toggle {
	width: 44px;
	height: 44px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
  }
  body[data-theme="dark"] .nav-toggle { border-color: rgba(255, 255, 255, 0.15); }

  #theme-toggle {
	width: 44px;
	height: 44px;
  }

  body.nav-open nav ul {
	max-height: calc(100vh - var(--header-height) - 1.5rem);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
  }

  nav ul li a {
	display: flex;
	align-items: center;
	padding: 0.7rem 0.85rem;
  }

  /* Reduce fragile card spans on smaller tablets */
  .experience-large-card,
  .experience-tall-card {
	grid-column: auto;
	grid-row: auto;
  }
}

@media (max-width: 760px) {
  .services-container { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root {
	--logo-height: 40px;
	--header-height: 64px;
	--container-padding: 0.75rem;
  }

  body { padding-top: var(--header-height); }

  /* Avoid stacked header controls that waste vertical space */
  header .container {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	padding-right: 6.25rem;
  }

  .logo { flex: 1 1 auto; }

  section {
	margin: 16px 0;
	padding: 20px 14px;
  }

  .hero__content { padding: 1.25rem 0.75rem; }
  .hero h1 { font-size: clamp(1.5rem, 7vw, 1.95rem); }
  .hero h2 { font-size: clamp(0.95rem, 3.8vw, 1.1rem); }
  .hero .lead { font-size: clamp(0.92rem, 3.6vw, 1rem); }

  .headline-container {
	flex-wrap: wrap;
	gap: 0.35rem;
  }
  .headline-image {
	height: clamp(22px, 8vw, 34px);
	margin: 0;
  }

  .text-content { padding: 1rem 0.25rem; }

  .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	max-width: 420px;
  }
  .btn .btn-icon { margin-right: 0; }

  .experience-container,
  .services-container {
	grid-template-columns: 1fr;
	gap: 14px;
  }
  .experience-card,
  .experience-large-card,
  .experience-tall-card,
  .service-card {
	padding: 16px;
  }

  .contact-grid { gap: 1rem; }
  #contact { padding: 1.4rem 0.5rem; }

  /* Prevent iOS zoom when focusing form fields */
  #contact-form input,
  #contact-form textarea,
  .panel-section #contact-form select {
	font-size: 16px;
  }

  .consent {
	gap: 0.5rem;
	align-items: flex-start;
  }
  .consent .consent-text a {
	font-size: 0.92rem;
	opacity: 0.95;
  }

  .contact-info p,
  .contact-info li,
  .privacy-content p,
  .privacy-content li {
	overflow-wrap: anywhere;
  }

  .process-section .process-list li { padding: 0.85rem; }
  .page-title h1 { font-size: clamp(1.25rem, 6vw, 1.5rem); }
}

/* Ensure no inner element in about section keeps its own background color */
.about-section .about-section__content * {
  background: transparent !important;
}

/* More aggressive reset for any leftover backgrounds or shadows inside about section */
.about-section .about-section__content,
.about-section .about-section__content * {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Strong reset for any leftover backgrounds inside the about container */
.about-section .container,
.about-section .container * {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: rgb(var(--color-text)) !important;
}

/* Explicitly reset common text-level elements inside about section */
.about-section .container p,
.about-section .container h1,
.about-section .container h2,
.about-section .container h3,
.about-section .container h4,
.about-section .container ul,
.about-section .container li,
.about-section .container a,
.about-section .container strong,
.about-section .container em,
.about-section .container u,
.about-section .container img {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   18. DATENSCHUTZ-/IMPRESSUM-SEITEN-STILE (.privacy-*)
   ══════════════════════════════════════════════════════════════════════════════
   Diese Klassen werden auf privacy.html und impressum.html genutzt.
   – .privacy-hero__bg   → Hintergrundbild (identisch mit .hero__bg, aber separater Klasse)
   – .privacy-content    → max-width: 800px, flex-column, lese-optimierte Breite
   – .privacy-content h2 → Abschnittstrennlinien mit Akzentfarbe-Border-left
   – .privacy-content p/ul → 0.88 Opacity, line-height: 1.7 (breiter Zeilenabstand)
   – .privacy-content code → Inline-Code mit Akzentfarbe-Hintergrund
   – .privacy-back-btn   → Navigations-Button mit 2rem Abstand nach oben
   Wichtig: .privacy-content a wird auf Akzentfarbe gesetzt, aber .btn darin wird
   per !important-Override wieder auf on-accent (weißer Text) zurückgesetzt,
   damit der Button optisch korrekt auf dem farbigen Hintergrund dargestellt wird.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Privacy page ------------------------------------------------------------------------------------*/
.privacy-hero__bg {
  background-image: none;
}

.privacy-content {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.privacy-content h2 {
  margin: 1.5rem 0 0.4rem 0;
  font-size: 1.15rem;
  color: rgb(var(--color-text));
  border-left: 3px solid rgb(var(--color-accent));
  padding-left: 0.65rem;
}

.privacy-content h2:first-child { margin-top: 0; }

.privacy-content p,
.privacy-content ul {
  margin: 0 0 0.5rem 0;
  color: rgba(var(--color-text), 0.88);
  line-height: 1.7;
}

.privacy-content ul {
  padding-left: 1.4rem;
}

.privacy-content ul li {
  margin-bottom: 0.2rem;
}

.privacy-content a {
  color: rgb(var(--color-accent));
  text-decoration: none;
}
.privacy-content a:hover { text-decoration: underline; }

/* Back-button inside privacy: override the link color rule so .btn stays readable */
.privacy-content .btn,
.privacy-content .btn:hover {
  color: rgb(var(--on-accent)) !important;
  background: rgb(var(--color-accent)) !important;
  text-decoration: none !important;
}

.privacy-content code {
  background: rgba(var(--color-accent), 0.08);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.92em;
}

.privacy-back-btn {
  margin-top: 2rem !important;
}

/* Debug styles removed - no debug overlays in production */

/* Ensure the last section doesn't create extra space below the footer */
section:last-of-type { margin-bottom: 0; padding-bottom: 0; }

/* ──────────────────────────────────────────────────────────────────────────────
   FINALER RESET: Formular-Panel-Eliminierung
   ────────────────────────────────────────────────────────────────────────────
   Das Kontaktformular (#contact-form) darf kein eigenes visuelles Panel
   (Hintergrund, Schatten, Blur) besitzen, da es sich innerhalb des
   äußeren .panel-section befindet, das bereits das Glasmorphismus-Design liefert.
   Dieser Block steht bewusst ganz am Ende der Datei, damit er die höchste
   Spezifizität (ohne !important-Fehler) besitzt und alle früheren Regeln überschreibt.
   ────────────────────────────────────────────────────────────────────────────── */
/* Force-remove any visual panel that may appear only around the contact form.
   This rule is intentionally very specific and placed at the end so it wins
   over earlier panel-like rules that could accidentally target the form. */
#contact-form,
#contact-form::before,
#contact-form::after,
.panel-section #contact-form,
.panel-section #contact-form * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/*
 * Input-Stile (finaler Override, Priorität höher als der allgemeine Reset weiter oben):
 * Light: noch subtilerer Hauch (0.04 statt 0.06) → kaum sichtbar, nur Feldform erkennbar
 * Dark:  leichtes Schwarz (0.12) damit der Input-Rahmen beim Dark-Hintergrund sichtbar bleibt
 */
/* keep inputs readable but avoid forming a contiguous panel shape */
body:not([data-theme="dark"]) .panel-section #contact-form input,
body:not([data-theme="dark"]) .panel-section #contact-form textarea,
body:not([data-theme="dark"]) .panel-section #contact-form select {
  background: rgba(255,255,255,0.04) !important; /* even subtler */
}

body[data-theme="dark"] .panel-section #contact-form input,
body[data-theme="dark"] .panel-section #contact-form textarea,
body[data-theme="dark"] .panel-section #contact-form select {
  background: rgba(0,0,0,0.12) !important;
}

/*
 * Submit-Button: Wiederherstellung nach dem aggressiven Form-Reset
 * ────────────────────────────────────────────────────────────────
 * Der allgemeine Form-Reset entfernt alle Hintergründe und Schatten per !important.
 * Da auch der Button Kind von #contact-form ist, würde er dadurch transparent werden.
 * Dieser Block stellt explizit alle Button-Styles mit noch stärkerer !important-Kette
 * wieder her:
 * – Akzentfarbe als Hintergrund
 * – on-accent (weißer Text) als Textfarbe
 * – volle Breite, 1rem/1.5rem Padding, 1.05rem Schriftgröße
 * – box-shadow: blaues Glow (rgb 0,123,255)
 * – hover: brightness(1.08) + translateY(-2px) + verstärkter Schatten
 */
/* ── Submit button: restore + enhance after aggressive form reset ── */
#contact-form button[type="submit"],
.panel-section #contact-form button[type="submit"] {
  background: rgb(var(--color-accent)) !important;
  background-color: rgb(var(--color-accent)) !important;
  color: rgb(var(--on-accent)) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 1rem 1.5rem !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(0,123,255,0.25) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
  width: 100% !important;
  letter-spacing: 0.02em !important;
}

#contact-form button[type="submit"]:hover,
.panel-section #contact-form button[type="submit"]:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(0,123,255,0.35) !important;
}

/* Keep page-title text consistently bright in both themes */
.page-title,
.page-title h1,
.page-title .lead,
.page-title p,
.page-title a {
  color: rgb(255,255,255);
}

/* Dark mode: align native date picker icon with light text color */
body[data-theme="dark"] #contact-form input[type="date"] {
  color-scheme: dark;
}

body[data-theme="dark"] #contact-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.1);
  opacity: 1;
}