html
{
  scroll-behavior: smooth;
}

:root
{
  /* Unabhängig einstellbare Ränder rund um den Inhalt */
  --rand-oben: 5px;
  --rand-rechts: 35px;
  --rand-unten: 5px;
  --rand-links: 35px;

  /* ---------- FARBEN ---------- */

  /* Basis / Hintergründe */
  --bg: #050914;            /* dunkler Haupthintergrund (Hero, Kontakt) */
  --bg2: #081126;           /* alternativer dunkler Ton */
  --body-bg: #060912;       /* Seitenhintergrund body */
  --panel: #0b1730;         /* Panel */
  --ink: #0b1730;           /* dunkler Text auf hellem Grund */
  --paper: #f4f7fc;         /* heller Flächenton */
  --white: #ffffff;         /* reines Weiß */

  /* Kachel-/Karten-Hintergründe */
  --card-bg: #0a0f1a;       /* Projektkachel-Füllung */
  --feature-bg: #0d1424;    /* Feature-Box */
  --badge-bg1: #0d1c38;     /* Badge-Verlauf hell */
  --badge-bg2: #060d1c;     /* Badge-Verlauf dunkel */

  /* Blau */
  --blue: #1684ff;          /* Akzentblau (Icons, Eyebrow) */
  --blue2: #4aa2ff;         /* helleres Blau (Maillink) */
  --bluebtn: rgb(37, 99, 235);              /* Button-Blau */
  --blue-hover: #1d4ed8;    /* Button-Hover */
  --line: rgba(83, 146, 255, .34);          /* blaue Linie */
  --badge-border: rgba(83, 146, 255, .45);  /* Badge-Rand */
  --badge-glow: rgba(22, 132, 255, .25);    /* Badge-Schein */

  /* Grün */
  --green: #31d987;         /* Grün allgemein */
  --green-accent: #21c46b;  /* Akzentgrün Projektkachel */
  --green-status: #1f9d57;  /* Status-Button grün */

  /* Sonstige Akzente */
  --pink: rgb(207, 99, 216);
  --black: rgb(0, 0, 0);

  /* Text */
  --text: #f7fbff;          /* hellster Text */
  --text-body: #e8edf6;     /* Standard-Body-Text */
  --text-soft: #e3e9f2;     /* leicht gedämpft (Listen) */
  --text-muted: #cdd6e6;    /* Hero-Text */
  --muted: #b9c6d9;         /* gedämpft */
  --text-lead: #c2ccdb;     /* Lead-Text */
  --text-feature: #aeb9cc;  /* Feature-Absatz */
  --text-grey: #5a6473;     /* About-Text grau */
  --footerdark: #5a6373;    /* Footer-Text */

  /* Transparentes Weiß (Glas-Effekte, Ränder, Hover) */
  --w06: rgba(255, 255, 255, 0.06);
  --w08: rgba(255, 255, 255, 0.08);
  --w12: rgba(255, 255, 255, 0.12);
  --w16: rgba(255, 255, 255, 0.16);
  --w25: rgba(255, 255, 255, 0.25);

  /* Projektkachel-Verlauf (dunkler Textbereich) */
  --tile-grad: rgba(8, 12, 22, 0.96);
  --tile-grad-0: rgba(8, 12, 22, 0);

  /* Maße */
  --max: 1240px;
  --radius: 18px;
  --width_inner: 1400px;
  --width_legal: 1366px;

  /* Gemeinsame maximale Inhaltsbreite (wie Hero/Features) */
  --width_content: 1600px;

  /* Dynamische Bausteine für Abstände */
  --gap: clamp(16px, 3vw, 32px);
  --section-pad: clamp(32px, 6vw, 80px);

  /* Fonts */
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body
{
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--body-bg);
  color: var(--text-body);
  /* Rand um die gesamte Seite, Grafik + Text werden dazwischen eingebettet */
  padding: var(--rand-oben) var(--rand-rechts) var(--rand-unten) var(--rand-links);
}

body.page-light
{
  background: var(--white);
}

h1
{
	font-size:clamp(1.25em,3.5vw,3.5rem);
	color: var(--white);
	line-height:1.25;
	letter-spacing:-.04em;
	margin:0 0 28px;
	font-weight:600
}

h1 .blue { color:var(--blue) }
h1 .pink { color:var(--pink) }
h1 .black { color:var(--black) }

/* Kopfzeile im Hero: Titel links, Navigation rechts */

.hero_topbar
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 3%;
  margin-right: clamp(15px, 2.6vw, 45px);
}

/* das margin-bottom des Titels hier zurücknehmen, sitzt jetzt auf der Topbar */
.hero_topbar .hero_title
{
  margin-bottom: 0;
  max-width: none;
}

.hero_nav
{
  display: flex;
  align-items: center;          /* Links untereinander mittig */
  gap: clamp(12px, 2vw, 32px);
  flex-shrink: 0;
}

.hero_nav a
{
  display: inline-flex;
  align-items: center;          /* Text vertikal mittig im Link */
  color: var(--white);
  text-decoration: none;
  font-size: clamp(11px, 1.1vw, 16px);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.hero_nav a:hover
{
  opacity: 1;
  text-decoration: underline;
}

/* ---------- HERO ---------- */

.hero
{
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  /* Bild im Original-Seitenverhältnis 2028 x 953 -> als Padding-Trick skalierbar */
  aspect-ratio: 2028 / 953;
  overflow: hidden;
}

.hero_bg
{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* skaliert mit der Browserbreite mit */
}

.hero_content
{
  position: absolute;
  inset: 0;
  /* Innenabstand prozentual, damit alles mitskaliert */
  padding: 2% 0 0 4%;
}

/* Überschrift oben links, darf breiter sein */
.hero_title
{
  font-size: clamp(15px, 2.6vw, 35px);
  font-weight: 600;
  color: var(--white);
  max-width: 50%;
  letter-spacing: 0.0002em;
  margin-bottom: 3%;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Textfeld: 600px bei 2028px Bildbreite = 29.6%, skaliert prozentual mit */
.hero_text
{
  width: 29.6%;
  font-size: clamp(8px, 1.05vw, 19px);
  line-height: 1.55;
  color: var(--text-muted);
}

.hero_legal_text
{
  width: 100%;
  font-size: clamp(8px, 1.05vw, 19px);
  line-height: 1.55;
  color: var(--text-muted);
}

.hero_legal_text h2
{
  margin-top: 15px;
  margin-bottom: 15px;
  color: var(--white);
}

.hero_legal_text h3
{
  margin-top: 15px;
  margin-bottom: 15px;
  color: var(--white);
}

.hero_claim
{
  font-weight: 600;
  color: var(--white);
  margin-bottom: 1em;
  line-height: 1.25;
  font-size: 2.5em;
}

.hero_actions
{
  margin-top: 1.4em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
}

.btn
{
  display: inline-block;
  padding: 0.6em 1.2em;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.95em;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.btn--primary
{
  background: var(--bluebtn);
  color: var(--white);
}

.btn--primary:hover
{
  background: var(--blue-hover);
}

.btn--ghost
{
  background: var(--w08);
  color: var(--text-body);
  border: 1px solid var(--w25);
}

.btn--ghost:hover
{
  background: var(--w16);
}

/* Bei zu kleinem Fenster (< 800px) Grafik zu 95% durchsichtig */
@media (max-width: 800px)
{
  .hero_bg
  {
    opacity: 0.05; /* 95% durchsichtig */
  }
  .hero_title
  {
    max-width: 100%;
  }
  .hero_text
  {
    width: 90%;
    font-size: 8px;
	line-height: 1.2;
  }
}

/* ---------- FEATURES ---------- */

.features
{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: var(--rand-oben) var(--rand-rechts) var(--rand-unten) var(--rand-links);
  max-width: 1600px;
  margin: 0 auto;
}

.feature
{
  flex: 1 1 260px;
  background: var(--feature-bg);
  border: 1px solid var(--w06);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  align-items: center;   /* statt flex-start → Icon vertikal mittig */
  gap: 14px;
}

.feature_icon
{
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  color: var(--blue);
}

.feature h3
{
  color: var(--white);
  margin-bottom: 6px;
  font-size: 20px;
}

.feature p
{
  color: var(--text-feature);
  line-height: 1.5;
  font-size: 18px;
}

.feature h3 .icon-mask
{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: var(--blue);   /* currentColor → blau, das Icon nimmt diese Farbe an */
}

.feature .feature_icon
{
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  color: var(--blue);
}

/* ---------- ABOUT / WER WIR SIND ---------- */

.about
{
  background: var(--white);
  color: var(--ink);
  text-align: center;
  padding: clamp(25px, 4vw, 50px) 24px clamp(12px, 2vw, 24px);
  /* volle Browserbreite, auch über die Seitenränder hinaus */
  margin-left: calc(var(--rand-links) * -1);
  margin-right: calc(var(--rand-rechts) * -1);
}

.about_eyebrow
{
  color: var(--blue);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: clamp(0.85rem, 1.4vw, 1.8rem);
  margin-bottom: 18px;
}

.about_title
{
  color: var(--ink);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 25px;
}

.about_text
{
  max-width: 1000px;
  margin: 0 auto 22px;
  color: var(--text-grey);
  font-size: clamp(1rem, 1vw, 1.6rem);
  line-height: 1.55;
}

.about_text strong
{
  font-size: clamp(1rem, 1vw, 1.6rem);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 700;
}

/* ---------- PROJEKT-KACHEL ---------- */

.project
{
  background: var(--white);          /* weißer Bereich außen */
  padding: 0px 30px;           /* Abstand zwischen Weiß und Kachel */
  padding-bottom: 30px;
  /* falls volle Browserbreite gewünscht, wie beim About-Abschnitt: */
  margin-left: calc(var(--rand-links) * -1);
  margin-right: calc(var(--rand-rechts) * -1);
}

.project_card
{
  position: relative;
  max-width: 1600px;            /* Kachelbreite begrenzen, zentriert */
  margin: 0 auto;
  border-radius: 20px;          /* abgerundete Ecken */
  overflow: hidden;            /* Bild an den runden Ecken beschneiden */
  background: var(--card-bg);   /* Füllfarbe der Kachel */
  /*min-height: 550px;     /* gewünschte Höhe */
}

.project_card--blue
{
  --accent: var(--bluebtn);          /* Blau für XENOGUARD */
  aspect-ratio: 2048 / 714;     /* Proportion bleibt erhalten */
}

.project_card--green
{
  --accent: var(--green-accent);          /* Grün für 147VIEW */
  aspect-ratio: 2048 / 714;     /* Proportion bleibt erhalten */
}

/* Bild als Hintergrund, skaliert wie hero_bg */
.project_bg
 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center;   /* vertikal + horizontal zentriert */
}

/* dunkler Textbereich links, 500px bei 2028px Kachelbreite = 24.65% */
.project_content
 {
  position: absolute;
  inset: 0;
  width: 25%;
  min-width: 600px;            /* untere Grenze für Lesbarkeit */
  padding: 48px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    to right,
    var(--tile-grad) 0%,
    var(--tile-grad) 70%,
    var(--tile-grad-0) 100%    /* sanfter Übergang ins Bild */
  );
}

.project_card--blue .project_content
{
  width: 45%;          /* breiter als der Standard */
  min-width: 560px;    /* untere Grenze, optional anpassen */
}

.project_title
{
  font-size: clamp(15px, 2.6vw, 35px);
  font-weight: 600;
  color: var(--white);
  max-width: 50%;
  letter-spacing: 0.0002em;
  margin-bottom: 3%;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.project_claim
{
  color: var(--accent);
  font-weight: 600;
  font-size: clamp(8px, 1.05vw, 19px);
  margin-bottom: 24px;
}

.project_lead
{
  font-size: clamp(8px, 1.05vw, 19px);
  line-height: 1.55;
  color: var(--text-lead);
  margin-bottom: 28px;
}

.project_list
{
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project_list li
{
  position: relative;
  padding-left: 30px;
  color: var(--text-soft);
  line-height: 0.8;
}

.project_list li::before
{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
}

.project_status
{
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;

  margin-top: auto;
  align-self: flex-start;
  background: var(--accent);
  color: var(--white);
  padding: 14px 22px;
  border-radius: 8px;
  font-size: 0.95rem;
}

.project_status strong { font-weight: 700; }

@media (max-width: 800px)
{
  .project_card {
    aspect-ratio: auto;
  }
  .project_content {
    position: static;
    width: 100%;
    min-width: 0;
    background: var(--tile-grad);
  }
  .project_bg {
    opacity: 0.05;   /* hier ergänzt */
  }
}

/* ---------- KONTAKT ---------- */

.contact
{
  background: var(--bg);          /* dunkler Hero-Hintergrund */
  color: var(--text);
  text-align: center;
  padding: clamp(25px, 4vw, 50px) 24px clamp(12px, 2vw, 24px);  
  /* volle Breite über die Seitenränder hinaus, wie der About-Block */
  margin-left: calc(var(--rand-links) * -1);
  margin-right: calc(var(--rand-rechts) * -1);
}

.contact_eyebrow
{
  color: var(--blue);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: clamp(0.85rem, 1.4vw, 1.8rem);
  margin-bottom: 18px;
}

.contact_title
{
	font-size:clamp(1.25em,3.5vw,2.6rem);
	color: var(--white);
	line-height:1.25;
	letter-spacing:-.04em;
	margin:0 0 28px;
	font-weight:600
}

.contact_text
{
  max-width: 1000px;
  margin: 0 auto 35px;
  color: var(--text-lead);
  font-size: clamp(1rem, 1vw, 1.25rem);
  line-height: 1.55;
}

.contact_btn
{
  display: inline-block;
  background: var(--bluebtn);
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 16px 28px;
  border-radius: 10px;
  margin-bottom: 32px;
  transition: background 0.15s ease;
}

.contact_btn:hover
{
  background: var(--blue-hover);
}

.contact_address
{
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.contact_maillink
{
  color: var(--blue2);
  text-decoration: none;
}

.contact_maillink:hover
{
  text-decoration: underline;
}

.contact_heading
{
  display: flex;
  align-items: center;          /* Icon vertikal mittig zum Titel */
  justify-content: center;      /* Gruppe insgesamt zentriert */
  gap: 18px;
  margin-bottom: 28px;
}

/* der Titel hatte unten margin – hier zurücknehmen, sitzt jetzt am Wrapper */
.contact_heading .contact_title
{
  margin: 0;
}

.contact_badge
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--badge-bg1), var(--badge-bg2));
  border: 1px solid var(--badge-border);
  box-shadow: 0 0 24px var(--badge-glow);  /* blauer Schein */
}

.contact_badge .icon-mask
{
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  color: var(--blue);   /* blaues Icon, wie das Shield */
}

/* ---------- FOOTER ---------- */
.footer
{
  border-top: 1px solid var(--w12);  /* dünne Linie */
  /* volle Breite über die Seitenränder, wie die anderen Abschnitte */
  margin-left: calc(var(--rand-links) * -1);
  margin-right: calc(var(--rand-rechts) * -1);
}

.footer_inner
{
  max-width: var(--width_content);   /* gleiche Breite wie Hero/Features */
  margin: 0 auto;
  padding: clamp(12px, 2vw, 20px) clamp(12px, 2vw, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;   /* Copyright links, Links rechts */
  gap: 16px;
  flex-wrap: wrap;
}

.footer_copy
{
  color: var(--footerdark);
  font-size: 0.95rem;
  margin: 0;
}

.footer_nav
{
  display: flex;
  gap: 24px;
}

.footer_nav a
{
  color: var(--footerdark);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer_nav a:hover
{
  color: var(--text);      /* beim Hover heller */
}

/* ---------- RECHTLICHE SEITEN (Impressum / Datenschutz) ---------- */
/* Design wie der "Über uns"-Abschnitt: heller Grund, zentriert */
.legal
{
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--body-bg);
  color: var(--ink);
  text-align: left;
  max-width: var(--width_legal);
  margin: 0 auto;
  padding: 28px 24px 5px;
}

.legal_company
{
  font-size: clamp(15px, 2.1vw, 31.3px);
  font-weight: 600;
  color: var(--white);
  max-width: 50%;
  letter-spacing: 0.0002em;
  margin-bottom: 2%;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;	
}

/* Haupttitel wie about_title */
.legal__title
{
	color: var(--blue);
	font-size:clamp(1.25em,3.0vw,3.0rem);
	line-height:1.25;
	letter-spacing:-.04em;
	margin:0 0 28px;
	font-weight:600
}

.legal__section { margin-bottom: 40px; }

/* Überschriften wie about_eyebrow (blau), ohne Trennlinie */
.legal h2
{
  color: var(--white);
  font-weight: 700;
  font-size: clamp(12px, 1.5vw, 25px);
  margin: 18px 0 18px;
}

.legal h3
{
  color: var(--white);
  font-size: clamp(10px, 1.2vw, 20px);
  font-weight: 700;
  margin: 15px 0 15px;
}

/* Absätze wie about_text */
.legal p
{
  max-width: var(--width_legal);
  margin: 0 auto 22px;
  color: var(--text-muted);
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  line-height: 1.6;
}

.legal_topbar
{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.legal_nav
{
  display: flex;
  align-items: center;          
  gap: clamp(12px, 2vw, 32px);
  flex-shrink: 0;
  color: var(--text-body);
}

.legal_nav a
{
  font-family: "Segoe UI", Arial, sans-serif;
  display: inline-flex;
  align-items: center;          
  color: var(--white);
  text-decoration: none;
  font-size: clamp(11px, 0.8vw, 14px);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.15s ease;
  margin-bottom: 32px;
}

.legal_nav a:hover { text-decoration:underline };

/* Absatztext als Blocksatz */
.legal__justify
{
  text-align: justify;
}

.legal a { color: var(--text-indent); }

.legal__maillink { color: var(--text-indent); text-decoration: none; }
.legal__maillink:hover { text-decoration: underline; }