@import 'partials/footer.css';
@import 'modular/header.css';
@import 'modular/impressum.css';
@import 'modular/home.css';
@import 'modular/row-reverse.css';


@font-face {
    font-family: 'TrailmadeExtras Regular';
    font-style: normal;
    font-weight: normal;
    src: local('TrailmadeExtras Regular'), url('/user/themes/delivers/fonts/TrailmadeExtras-Regular.otf') format('otf');
    }
    
    
    @font-face {
    font-family: 'Trailmade Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Trailmade Regular'), url('/user/themes/delivers/fonts/Trailmade-Regular.otf') format('otf');
    }
    
    
    @font-face {
    font-family: 'Trailmade Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Trailmade Italic'), url('/user/themes/delivers/fonts/Trailmade-Italic.otf') format('otf');
    }


/*contact form css*/
/* Container Styling */
form[name="kontakt-formular"] {
    max-width: 700px;
    height: 100vh;
    margin: 20px auto;
    text-align: center;
    font-family: Arial, sans-serif;

}

/* Überschrift */
form[name="kontakt-formular"]::before {
    content: url('/user/themes/dein-theme/images/email-icon.png'); /* Füge dein eigenes Icon hinzu */
    display: block;
    margin: 0 auto 10px;
}

h1 {
    font-size: 32px;
    font-weight: bold;
    color: #0000ff;
    margin-bottom: 10px;
}

p {
    font-size: 18px;
    color: #444;
    margin-bottom: 30px;
}

/* Label Styling */
form[name="kontakt-formular"] label {
    display: block;
    text-align: left;
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

/* Input und Textarea Styling */
form[name="kontakt-formular"] input,
form[name="kontakt-formular"] textarea {
    width: 100%;
    border: none;
    border-bottom: 2px solid black;
    padding: 10px;
    font-size: 16px;
    outline: none;
    background: transparent;
    resize: none;
}

/* Platzhalter Styling */
form[name="kontakt-formular"] ::placeholder {
    color: #aaa;
}

/* Button Styling */
form[name="kontakt-formular"] input[type="submit"] {
    display: inline-block;
    border: 2px solid black;
    background: transparent;
    color: #0000ff;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 20px;
    margin-top: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

form[name="kontakt-formular"] input[type="submit"]:hover {
    background: #0000ff;
    color: white;
}


/* Button mit der Klasse 'form-button' ansprechen */
form[name="kontakt-formular"] .form-button {
    margin: 10px;
    border: 1px solid blue; /* blauer Rand */
    padding: 0 20px; /* Abstand im Button */
    background-color: transparent; /* transparenten Hintergrund */
    color: blue; /* Textfarbe */
    font-size: 16px; /* Schriftgröße */
    cursor: pointer; /* Zeiger bei Hover */
    border-radius: 2px; /* Abrundung der Ecken */
    transition: all 0.3s ease; /* sanfter Übergang */
}

/* Hover-Effekt für den Button */
form[name="kontakt-formular"] .form-button:hover {
    background-color: blue; /* blauer Hintergrund beim Hover */
    color: white; /* Textfarbe weiß beim Hover */
}