/*
Theme Name: Roman Lutz Theme
Theme URI: https://www.romanlutz.de
Author: Reifenservice Roman Lutz
Description: Ein maßgeschneidertes Vintage-Theme im Stil der amerikanischen 1940er Jahre für den Reifenservice in Gera.
Version: 1.0.0
Text Domain: roman-lutz-theme
*/
/* Lokale Schriftarten laden */
@font-face {
    font-family: 'Arvo';
    src: url('fonts/arvo-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Arvo';
    src: url('fonts/arvo-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/open-sans-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

:root {
    --mint-green: #7fa99b;
    --vintage-cream: #f4edd2;
    --dark-charcoal: #2b2b2b;
    --rust-orange: #c85a17;
}

body {
    background-color: var(--vintage-cream);
    color: var(--dark-charcoal);
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
    font-family: 'Arvo', Georgia, serif;
    color: var(--dark-charcoal);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-section {
    background-color: var(--mint-green);
    color: #fff;
    padding: 100px 20px;
    text-align: center;
    border-bottom: 8px double var(--dark-charcoal);
}

.vintage-btn {
    background-color: var(--rust-orange);
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    border: 2px solid var(--dark-charcoal);
    display: inline-block;
    margin-top: 20px;
}

.vintage-btn:hover {
    background-color: var(--dark-charcoal);
    color: var(--vintage-cream);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.service-card {
    background: #fff;
    border: 3px solid var(--dark-charcoal);
    padding: 20px;
    box-shadow: 5px 5px 0px var(--dark-charcoal);
    text-align: center;
}

.footer-vintage {
    background-color: var(--dark-charcoal);
    color: var(--vintage-cream);
    padding: 40px 20px;
    text-align: center;
    font-size: 0.9em;
}