/* Kommentierte CSS-Datei für Projektmanagement-Website */
:root {
/*  Hintergrund einige Teile Web*/
  --bg: #ffffff;

/*  Hintergrund Oben beim Logo */
  --card: #353535;

/*  Hintergrund CTA Bottons und LOGO Text Farbe*/
 --accent: #e8c243;

/*  Farbe Text Überall ausser Titel H1 unsd H2*/
  --muted: #191919;

  --muted1: ##CCCCCC;


  --ff: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --fs-base: 16px;
  --fs-h1: 34px;
  --fs-h2: 26px;
  --fs-small: 13px;
  --radius: 10px;
  --gap: 24px;
/*  --maxw: 1100px; Breite Inhalt Tabelle - Zentrum */
  --maxw: 1100px;
}

body { margin:0; font-family:var(--ff); font-size:var(--fs-base); background:var(--bg); color:#ffffff; line-height:1.6; } /* TextFarbe des Ersten Header LINE */

header { position:sticky; top:0; background:#ffffff; border-bottom:0px solid rgba(255,255,255,0.05); z-index:100; } /* Farbe im HEADER beim LOGO  */

.nav { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; max-width:var(--maxw); margin:auto; }
.logo { font-weight:700; font-size:20px; color:var(--accent); }
nav ul { display:flex; gap:16px; list-style:none; margin:0; padding:0; }
nav a { color:var(--muted); text-decoration:none; transition:color 0.3s ease; }
nav a:hover { color:#2a44c1; font-weight: bold;}


.logo1 { font-weight:700; font-size:21px; color:#1a2a79; text-align:left;}
.logo3 { font-weight:700; font-size:19px; color:#1a2a79; text-align:left;}

.logo2 { font-weight:760; font-size:22px; color:#e0dfcc;} 
.logo2:hover { font-weight:760; font-size:23px; color:#e8bd2e; }

#hero { text-align:center; padding:80px 20px; background: linear-gradient(180deg, #0e217d 0%, #89a7e8  100%); } /* Farbe und HERO Bereich - Farbe ist scading 180 Gr. Von Farbe bis Farbe */


#hero h1 { font-size:var(--fs-h1); margin-bottom:20px; }
#hero p { color:var(--muted1); margin-bottom:30px; }

.btn-primary { background:var(--accent); color:#021616; padding:10px 20px; border-radius:var(--radius); font-weight:600; text-decoration:none; display:inline-block; transition: transform 0.2s ease, background 0.3s ease; }  /*  Farbe bei den Text der Bottons*/


.btn-primary:hover { transform:translateY(-2px); background:#1131cf; color:#ffffff}  /* Hover Farbe bei den Bottons*/

/* #4d54e8  Schönes Blau */
/* #1131cf;  Schönes Blau */

.schulung {color:#021616;}

section { padding:30px 20px; max-width:var(--maxw); margin:auto; }

section h2 { font-size:var(--fs-h2); color:#1a2a79; margin-bottom:16px; }  /* Font and Color H2 TITLE  */
/* section h2:hover  --> Neu 29.02.2026 */
section h2:hover { font-weight:700; font-size:26.5px;; color:#1131cf; margin-bottom:16px; }

section p, section li { color:var(--muted); }
ul { padding-left:20px; margin-bottom:20px; }

#kontakt { text-align:center; background:#353535; padding:60px 20px; } /* Farbe KONTAKT BEREICH*/
#kontakt p { color:var(--muted); }

#kontakt1 { text-align:center; padding:10px 10px; background: linear-gradient(180deg, #0e217d 0%, #89a7e8 100%); }

#kontakt1 p { color:#ffffff; }


footer { background:#ffffff; color:#132b9c; text-align:center; padding:20px 10px; font-size:var(--fs-small); z-index:100; }   /* Farbe FOOTER ganz unten */

.nav_new { color:var(--muted); text-decoration:none; font-weight: bold; align-items:left; margin:0;padding:0;}

nav_new a:hover { color:#2046fa; font-weight: bold;}
nav_new ul { display:flex; gap:16px; list-style:none; margin:0; padding:0; }


footer_new {color:#2046fa; text-align:center; padding:20px 10px; font-size:var(--fs-small); z-index:100; }
footer_new a:hover { color:#2046fa; font-weight: bold;}

/* @media (max-width:768px) { nav ul { flex-direction:column; gap:10px; } #hero { padding:60px 16px; } section { padding:40px 16px; } } */
@media (max-width:300px) { nav ul { flex-direction:column; gap:10px; } #hero { padding:60px 16px; } section { padding:40px 16px; } }

styled-table { align="center" margin:0; padding:0px 0px; font-weight:700; font-size:19px; color:#1a2a79; text-align:left;}
  
}