/* ======================================================= */
/* --- 1. CONFIG: VARIABLEN & FARBEN --- */
/* ======================================================= */
:root {
  /* --- BASIS FARBEN (Statisch) --- */
  --color-white: #ffffff;
  --color-white-muted: rgba(255, 255, 255, 0.75);
  --color-black: #000000;
  --color-dark-bg: #1a202c;

  /* --- THEME ACCENT COLORS (Basiswerte) --- */
  /* --accent-gmbh: #00a3ff; */
  --accent-gmbh: #cee6f5;
  --accent-software: #9fabd7;
  --accent-agency: #8fa1af;
  --accent-textil: #1ca591;
  --accent-laims: #b5ff3b;

  /* --- GLAS PHYSIK (Global) --- */
  --glass-radius: 20px;
  --glass-blur: 24px;       /* Starker Blur für gute Lesbarkeit */
  --glass-saturate: 140%;   /* Farben dahinter leuchten leicht */
  --glass-border-width: 1px;
  --glass-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- THEME DEFINITIONEN (Hintergrund, Rahmen, Schatten) --- */
:root {
  /* 1. DARK (Standard Container) */
  --bg-dark: rgba(0, 0, 0, 0.45); /* Etwas dunkler für besseren Kontrast zur Section */
  --bg-dark-hover: rgba(0, 0, 0, 0.55);
  --border-dark: rgba(255, 255, 255, 0.12);
  --shadow-dark: 0 20px 40px rgba(0, 0, 0, 0.6);
  --color-dark-accent: #eef1f4; /* Weißer Akzent */

  /* 2. BRIGHT (Milchglas / Frost) */
  --bg-bright: rgba(255, 255, 255, 0.15);
  --bg-bright-hover: rgba(255, 255, 255, 0.25);
  --border-bright: rgba(255, 255, 255, 0.35);
  --shadow-bright: 0 15px 35px rgba(0, 0, 0, 0.2);
  --color-bright-accent: #ffffff;

  /* 3. GREY (Neutral) */
  --bg-grey: rgba(80, 80, 80, 0.25);
  --bg-grey-hover: rgba(80, 80, 80, 0.35);
  --border-grey: rgba(255, 255, 255, 0.15);
  --shadow-grey: 0 15px 35px rgba(0, 0, 0, 0.4);
  --color-grey-accent: #cfcfcf;

  /* 4. GMBH (Blau) */
  --bg-gmbh: rgba(0, 163, 255, 0.12);
  --bg-gmbh-hover: rgba(0, 163, 255, 0.22);
  --border-gmbh: rgba(100, 200, 255, 0.25);
  --shadow-gmbh: 0 15px 40px rgba(0, 120, 190, 0.25);

  /* 5. SOFTWARE (Lila-Blau) */
  --bg-software: rgba(159, 171, 215, 0.15);
  --bg-software-hover: rgba(159, 171, 215, 0.25);
  --border-software: rgba(180, 190, 230, 0.25);
  --shadow-software: 0 15px 35px rgba(50, 60, 90, 0.3);

  /* 6. AGENCY (Metallic) */
  --bg-agency: rgba(143, 161, 175, 0.2);
  --bg-agency-hover: rgba(143, 161, 175, 0.3);
  --border-agency: rgba(200, 210, 220, 0.25);
  --shadow-agency: 0 15px 35px rgba(20, 30, 40, 0.4);

  /* 7. TEXTIL (Teal) */
  --bg-textil: rgba(28, 165, 145, 0.15);
  --bg-textil-hover: rgba(28, 165, 145, 0.25);
  --border-textil: rgba(100, 220, 200, 0.25);
  --shadow-textil: 0 18px 40px rgba(10, 50, 45, 0.4);

  /* 8. LAIMS (Neon) */
  --bg-laims: rgba(181, 255, 59, 0.08); /* Sehr transparent, da Farbe kräftig */
  --bg-laims-hover: rgba(181, 255, 59, 0.18);
  --border-laims: rgba(200, 255, 100, 0.3);
  --shadow-laims: 0 15px 40px rgba(80, 100, 40, 0.25);
}

/* ======================================================= */
/* --- 2. BASE GLASS ENGINE (Die Physik) --- */
/* ======================================================= */

/* WICHTIG: Jedes Glass-Element muss diese Klasse haben.
   Sie kümmert sich um Blur, Radius und Rauschen.
   Farben kommen dann über die Theme-Klassen.
*/
.glass-base {
  position: relative;
  border-style: solid;
  border-width: var(--glass-border-width);
  border-radius: var(--glass-radius);
  
  /* Der Glas-Effekt */
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  
  /* Übergänge für Hover */
  transition: var(--glass-transition);
  
  /* Clipping für Noise/Glare */
  overflow: hidden; 
  /* Reset: Keine Textfarbe erzwingen! */
}

/* Hochwertiges Noise-Texture (Körnung) für besseres "Griff-Gefühl" */
.glass-base::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  opacity: 0.07; /* Subtil */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Shine/Glare Effekt von oben links für 3D-Tiefe */
.glass-base::after {
  content: "";
  position: absolute; 
  inset: 0;
  background: linear-gradient(
    135deg, 
    rgba(255,255,255,0.15) 0%, 
    rgba(255,255,255,0.01) 40%, 
    transparent 100%
  );
  pointer-events: none;
  z-index: -1;
}

/* Hover-Verhalten für Karten */
.glass-base:hover {
  transform: translateY(-4px); /* Leichtes Schweben */
}

/* Optional: Wenn man mit der Maus drüber geht, wird das Glas "klar" */
.glass-base:hover::before {
  opacity: 0.01;
  transition: opacity 0.3s ease;
}

/* Sonderfall: SECTION Backgrounds (sollen nicht schweben) */
section.glass-base:hover, 
.no-hover.glass-base:hover {
  transform: none;
}

/* Das Rausch-Element */
.glass-base::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  
  /* Dein Basis-Level (so wie es dir im Ruhezustand gefällt) */
  opacity: 0.05; 
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,..."); /* Dein SVG Code hier */
  pointer-events: none;

  /* WICHTIG: Damit das Rauschen weich ausblendet */
  transition: opacity 0.4s ease; 
}

/* Beim Hover wird das Glas "klar" */
.glass-base:hover::before {
  opacity: 0; /* Rauschen verschwindet sanft */
}

/* AUSNAHME: Die große Hintergrund-Section soll ihr Rauschen behalten */
section.glass-base:hover::before {
  opacity: 0.15 !important; /* Bleibt sichtbar, da man die Section nicht "hovert" */
}

/* ======================================================= */
/* --- 3. CONTAINER THEMES (Nur Hintergrund & Rahmen) --- */
/* ======================================================= */

/* Nutzung: <div class="glass-base glass-dark">...</div> */

/* DARK */
.glass-dark {
  background: var(--bg-dark);
  border-color: var(--border-dark);
  box-shadow: var(--shadow-dark);
}
.glass-dark:hover { background: var(--bg-dark-hover); border-color: rgba(255,255,255,0.25); }

/* BRIGHT */
.glass-bright {
  background: var(--bg-bright);
  border-color: var(--border-bright);
  box-shadow: var(--shadow-bright);
}
.glass-bright:hover { background: var(--bg-bright-hover); }

/* GREY */
.glass-grey {
  background: var(--bg-grey);
  border-color: var(--border-grey);
  box-shadow: var(--shadow-grey);
}
.glass-grey:hover { background: var(--bg-grey-hover); }

/* GMBH (Blau) */
.glass-gmbh {
  background: var(--bg-gmbh);
  border-color: var(--border-gmbh);
  box-shadow: var(--shadow-gmbh);
}
.glass-gmbh:hover { background: var(--bg-gmbh-hover); }

/* SOFTWARE */
.glass-software {
  background: var(--bg-software);
  border-color: var(--border-software);
  box-shadow: var(--shadow-software);
}
.glass-software:hover { background: var(--bg-software-hover); }

/* AGENCY */
.glass-agency {
  background: var(--bg-agency);
  border-color: var(--border-agency);
  box-shadow: var(--shadow-agency);
}
.glass-agency:hover { background: var(--bg-agency-hover); }

/* TEXTIL */
.glass-textil {
  background: var(--bg-textil);
  border-color: var(--border-textil);
  box-shadow: var(--shadow-textil);
}
.glass-textil:hover { background: var(--bg-textil-hover); }

/* LAIMS */
.glass-laims {
  background: var(--bg-laims);
  border-color: var(--border-laims);
  box-shadow: var(--shadow-laims);
}
.glass-laims:hover { background: var(--bg-laims-hover); }


/* ======================================================= */
/* --- 4. TYPOGRAPHIE (Farben & Akzente) --- */
/* ======================================================= */

/* Standard Textfarben (Global für Dark Mode) */
.text-white { color: var(--color-white) !important; }
.text-muted { color: var(--color-white-muted) !important; }

/* THEME AKZENTE FÜR HEADERS (h1-h6) & SPANS */
.text-dark     { color: var(--color-dark-accent) !important; }
.text-bright   { color: var(--color-bright-accent) !important; }
.text-grey     { color: var(--color-grey-accent) !important; }
.text-gmbh     { color: var(--accent-gmbh) !important; }
.text-software { color: var(--accent-software) !important; }
.text-agency   { color: var(--accent-agency) !important; }
.text-textil   { color: var(--accent-textil) !important; }
.text-laims    { color: var(--accent-laims) !important; }

/* ======================================================= */
/* --- 5. BUTTONS (Background & Hover Logic) --- */
/* ======================================================= */

.btn-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.6rem;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.25s ease;
}

/* btn-dark */
.btn-dark {
  background: rgba(255,255,255,0.1);
  color: var(--color-white);
  border-color: rgba(255,255,255,0.2);
}
.btn-dark:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }

/* btn-gmbh */
.btn-gmbh {
  background: var(--accent-gmbh);
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 163, 255, 0.3);
}
.btn-gmbh:hover { background: #33b5ff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 163, 255, 0.5); }

/* btn-software */
.btn-software {
  background: var(--accent-software);
  color: #1a202c; /* Dunkler Text für Kontrast */
}
.btn-software:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* btn-agency */
.btn-agency {
  background: var(--accent-agency);
  color: #1a202c;
}
.btn-agency:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* btn-textil */
.btn-textil {
  background: var(--accent-textil);
  color: #fff;
  box-shadow: 0 4px 15px rgba(28, 165, 145, 0.3);
}
.btn-textil:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(28, 165, 145, 0.5); }

/* btn-laims (Neon) */
.btn-laims {
  background: var(--accent-laims);
  color: #000; /* Schwarz auf Neon */
  box-shadow: 0 4px 15px rgba(181, 255, 59, 0.3);
}
.btn-laims:hover { 
  background: #c4ff66; 
  transform: translateY(-2px); 
  box-shadow: 0 0 25px rgba(181, 255, 59, 0.5); 
}

/* btn-bright (Weiß) */
.btn-bright {
  background: #ffffff;
  color: #000000;
}
.btn-bright:hover { background: #f0f0f0; transform: translateY(-2px); }


/* ======================================================= */
/* --- 6. PAGE BACKGROUND (Setup) --- */
/* ======================================================= */

#page-background-image-container{
  position: fixed;
  inset: 0;
  z-index: -1000;
  background: url("./assets/bilder/abstract1.png") center / cover no-repeat;
}

#page-background-image-container::after{
  content:"";
  position:absolute; inset:0;
  /* Stärkere Vignette für besseren Fokus auf Inhalte */
  background: radial-gradient(circle at 50% 0%, rgba(0,0,0,0.5), #000000);
}

/* Hintergrund bleibt wie zuvor */
#page-background-image-container{
  position: fixed;
  inset: 0;
  z-index: -1000;
  background: url("./assets/bilder/abstract1.png") center / cover no-repeat;
}
#page-background-image-container::after{
  content:"";
  position:absolute; inset:0;
  /* dunkleres, weiches Vignette */
  background: radial-gradient(1200px 600px at 50% 0%, rgba(0,0,0,.42), rgba(0,0,0,.6));
}

/* Dunkler Glass-Look */
.glass{
  position: relative;
  padding: clamp(1rem, 2vw, 2rem);
  /* border-radius: var(--glass-radius); */
  color: var(--glass-text);

  /* Layer-Stack: Farbe + leichtes Rauschen für Tiefe */
  background:
    /* linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0)) , */
    var(--glass-bg);

  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* Überschriften & Textfarben feinjustiert */
.glass-h1,.glass-h2,.glass-h3{ color: #ffffff; }
.glass-p{ color: rgba(255,255,255,.94); }
.glass .muted{ color: rgba(255,255,255,.72); }
.glass-a{ color:#d6e6ff; text-decoration: underline; }
.glass-ctaBtn {color: #d6e6ff; border: 1px solid var(--glass-border); }

/* Dezentes Glare, etwas prägnanter */
.glass::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 40%);
  pointer-events:none;
}

/* Mini-Korn/Noise (reines CSS, performant) */
.glass::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  opacity:.06;                        /* sehr subtil */
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff 0, transparent 60%),
    radial-gradient(1.2px 1.2px at 60% 70%, #fff 0, transparent 60%),
    radial-gradient(0.8px 0.8px at 80% 40%, #fff 0, transparent 60%);
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* Fallbacks */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass{
    background: rgba(12,12,12,.88);
  }
}
@media (prefers-reduced-transparency: reduce){
  .glass{
    background: rgba(12,12,12,.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}