a, a:hover, a:active, a:visited, a:link {
  text-decoration: none;
}

/* ------------------------------------ */
/* 1. Reset und Body Styling (Schwarzer Hintergrund, Zentrierung) */
/* ------------------------------------ */
.metal-page-body {
	/* Setzt den schwarzen Hintergrund und stellt die volle Höhe sicher */
	background-color: #000;
	min-height: 100vh;
	margin: 0;
	/* Zentriert den Inhalt (die Buchstaben) */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden; /* Verhindert Scrollen, falls der Text zu groß ist */
	margin-top: -200px; /* zurück nach oben schieben */
}

.metal-text-container {
    position: relative; /* Ein einfacher Wrapper, falls weitere Elemente hinzukommen */
}

/* Bildhintergrund */
.bild-text {
	background-image: url('https://m240i.de/images/red/car2.jpg');
	font-size: 50vw;
	font-weight: 900;
	font-family: Arial, sans-serif;
	transform: rotate(-3deg);
    /* WICHTIG: Hintergrundbild direkt auf den Text anwenden */
    background-size: cover;
    background-position: center;
    /* Text transparent machen und den Hintergrund nur im Text anzeigen */
    color: transparent; 
    background-clip: text; 
    -webkit-background-clip: text; 
}

/* ------------------------------------ */
/* 2. Der METALL-Effekt */
/* ------------------------------------ */
.metall-text {
    font-size: 50vw; /* Schriftgröße: Nutzt Viewport Units für Responsivität */
    font-weight: 900; /* Sehr dicke Schrift */
    font-family: Arial, sans-serif; /* Wählen Sie eine sehr fette, serifenlose Schrift */
    transform: rotate(-3deg); /* Rotation: Leicht gedreht */
    color: transparent; /* Grundvoraussetzung für den Metall-Effekt: Text wird transparent */
    
    /* ------------------------------------ */
    /* Der komplexe Metall-Gradient         */
    /* ------------------------------------ */
    background-image: linear-gradient(
        to bottom, 
        #f00,
		#f00,
		#f00,
        #000,
        #666,
        #fff,
        #444,
        #000,
        #fff
    );

    /* Schneidet den Gradienten auf die Textform zu */
    -webkit-background-clip: text; /* Wichtig für WebKit-Browser (Chrome, Safari) */
    background-clip: text;
}    
    /* ------------------------------------ */
    /* Text-Schatten für Konturen und Glanz */
    /* ------------------------------------ */
.text-schatten {
    filter:drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.6)) drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.1)); 
}
    /* ------------------------------------ */


@media (max-width: 700px) {
	.bild-text { transform: rotate(80deg); }
	.metal-page-body { margin-top: 0px; }
 a, a:hover, a:active, a:visited, a:link {text-decoration: none;}
}