:root {
    /* Farbpalette für Farbraum.ink */
    --color1: #212121; /* Dunkles Grau / Basis-Textfarbe */
    --color2: #FF7043; /* Kräftiges Orange / Akzentfarbe */
    --color3: #CFD8DC; /* Helles Grau / Subtile Trennung */
    --color4: #00BCD4; /* Türkis / Sekundärer Akzent/Tiefe */
    --color5: #F5F5F5; /* Hintergrund-Basis / Weißer Text */
}

/* Neuer Body-Hintergrund: Oranger Gradient */
body {
    background: linear-gradient(135deg, var(--color5) 0%, var(--color5) 50%, #FFCCBC 100%);
    background-attachment: fixed; /* Damit der Gradient statisch bleibt */
    color: var(--color1);
    /* Neue moderne Schriftart */
    font-family: 'Inter', sans-serif; 
    overflow-x: hidden;
}

/* Neue Schriftarten */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;700&display=swap');

h1,
h2,
h3,
h4 {
    /* Neue elegante Serifenschrift für Titel */
    font-family: 'Lora', 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;
}