:root {
  /* Farbpalette für Wachs.ink (Schwarz & Blau) */
  --color1: #081020; /* Sehr Dunkelblau (Fast Schwarz) / Haupt-Hintergrund & Text */
  --color2: #007BFF; /* Kräftiges Wachs-Blau / Akzentfarbe */
  --color3: #E0F7FA; /* Sehr Hellblau / Subtile Trennung */
  --color4: #343A40; /* Dunkles Grau / Sekundär-Text */
  --color5: #FFFFFF; /* Reines Weiß / Kontrast-Text */
}

/* Neue Schriftarten für eine moderne Ästhetik */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&family=Roboto:wght@300;400;500;700&display=swap');

/* Anpassung des Body-Hintergrunds und der Schriftart */
body {
  /* Hintergrund: Vom hellen Grau zum sehr dunklen Blau */
  background: linear-gradient(135deg, var(--color3) 0%, var(--color3) 50%, #B3E5FC 100%);
  background-attachment: fixed;
  color: var(--color1);
  /* Neue moderne Schriftart ohne Serifen */
  font-family: 'Roboto', sans-serif; 
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  /* Neue elegante Sans-Serifenschrift für Titel */
  font-family: 'Montserrat', sans-serif; 
  font-weight: 700; 
  letter-spacing: -0.5px;
}
     
/* Die Tailwind-Klassen-Definitionen bleiben gleich, um die Logik beizubehalten */
.bg-color1 { background-color: var(--color1); }
.bg-color2 { background-color: var(--color2); }
.bg-color3 { background-color: var(--color3); }
.bg-color4 { background-color: var(--color4); }
.bg-color5 { background-color: var(--color5); }

.text-color1 { color: var(--color1); }
.text-color2 { color: var(--color2); }
.text-color3 { color: var(--color3); }
.text-color4 { color: var(--color4); }
.text-color5 { color: var(--color5); }

.border-color1 { border-color: var(--color1); }
.border-color2 { border-color: var(--color2); }

/* Anpassung der Headings für die neuen Fonts */
h1 {
    font-size: 4.5rem; 
    line-height: 1.05;
    font-weight: 700;
}

h2 {
    font-size: 3rem; 
    line-height: 1.2;
    font-weight: 600;
}

h3 {
    font-size: 2rem; 
}

@media (max-width: 768px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2.5rem; }
}

p {
    font-size: 1.125rem; 
    line-height: 1.8;
}

/* Button-Styling anpassen, um die neuen Farben zu reflektieren */
.btn {
    background-color: var(--color2);
    color: var(--color5);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border: 2px solid var(--color2);
}

.btn:hover {
    background-color: transparent;
    color: var(--color2);
    border-color: var(--color2);
}

.btn-secondary {
    background-color: var(--color1);
    color: var(--color5);
    border-color: var(--color1);
}

.btn-secondary:hover {
    background-color: transparent;
    color: var(--color1);
    border-color: var(--color1);
}

/* Stil für Zitate anpassen */
.styled-quote {
    border-left: 4px solid var(--color2); /* Orange Akzent */
}

.styled-quote::before {
    color: var(--color2);
    opacity: 0.2;
}