NewHome
:root {
--main-bg: #1e1e1e;
--accent: #c0392b;
--text: #f0f0f0;
--muted: #bbbbbb;
--highlight: #f5c542;
--font: 'Montserrat', sans-serif;
}
/* Hintergrund mit Farbkleksen */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
url('https://www.deine-seite.de/uploads/klecks-rot.png') no-repeat top left,
url('https://www.deine-seite.de/uploads/klecks-blau.png') no-repeat bottom right;
background-size: 250px, 300px;
opacity: 0.15;
z-index: -1;
pointer-events: none;
}
.hero {
background:
url('https://www.deine-seite.de/uploads/pinselstrich-hero.png') no-repeat center top,
linear-gradient(to bottom, #1a1a1a, #121212);
background-size: cover;
padding-top: 8rem;
}
/* Überschriften mit Pinselstrich */
h2 {
position: relative;
display: inline-block;
font-weight: 700;
font-size: 2rem;
color: var(--highlight);
}
h2::after {
content: '';
position: absolute;
left: -10px;
bottom: -8px;
width: 110%;
height: 20px;
background: url('https://www.deine-seite.de/uploads/pinselstrich-unter.png') no-repeat center;
background-size: contain;
opacity: 0.4;
z-index: -1;
}
/* Optional: künstlerischer Rahmen um Section */
section {
padding: 4rem 2rem;
max-width: 1000px;
margin: auto;
position: relative;
border-left: 5px solid var(--highlight);
background-color: rgba(255, 255, 255, 0.02);
}
section::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 100px;
height: 100px;
background: url('https://www.deine-seite.de/uploads/klecks-gelb.png') no-repeat center;
background-size: contain;
opacity: 0.1;
transform: rotate(-15deg);
z-index: 0;
}