/*
Theme Name: BBQ Alpenrauch
Theme URI: https://bbq-alpenrauch.de/
Author: Kevin Smola
Description: Responsives, modernes Starter-Theme für BBQ Alpenrauch Events. Customizer-ready!
Version: 1.1
Tags: responsive, seo, bbq, event, modern, customizer
Text Domain: bbq-alpenrauch
*/

:root {
    --bbq-primary: #FF6B35;
    --bbq-secondary: #232931;
    --bbq-accent: #60D394;
    --bbq-link: #FF6B35;
    --bbq-btn: #FF6B35;
    --bbq-btn-hover: #EA4335;
    --bbq-bg: #191A1D;
    --bbq-font: 'Segoe UI', 'Roboto', 'Arial', 'Helvetica Neue', 'Liberation Sans', 'Noto Sans', sans-serif;
    --bbq-headline-font: 'Segoe UI', 'Roboto', 'Arial', 'Helvetica Neue', 'Liberation Sans', 'Noto Sans', sans-serif;
    --bbq-headline-color: #F5F5F7;
}


body {
    font-family: var(--bbq-font);
    background: var(--bbq-bg);
    color: #fff;
    font-size: 1.09em;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bbq-headline-font);
    color: var(--bbq-headline-color);
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

h1 {
    font-size: 2.4em;
    line-height: 1.15;
    margin-top: 0.5em;
}
h2 { font-size: 2em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.1em; }

a {
    color: var(--bbq-link);
    text-decoration: underline;
    transition: color .15s;
}
a:hover, a:focus {
    color: var(--bbq-primary);
    text-decoration: none;
}

.btn-bbq {
    background: var(--bbq-btn);
    color: #fff;
    border-radius: 999px;
    padding: .7em 2em;
    font-weight: 600;
    border: none;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10);
    letter-spacing: 0.02em;
    transition: background .2s, transform .15s;
    font-size: 1.1em;
    cursor: pointer;
}
.btn-bbq:hover, .btn-bbq:focus {
    background: var(--bbq-btn-hover);
    color: #fff;
    transform: translateY(-3px) scale(1.05);
    outline: none;
}

.bg-bbq { background: var(--bbq-secondary); }
.text-bbq { color: var(--bbq-primary) !important; }
.smoky-bg {
    background: linear-gradient(120deg, var(--bbq-secondary) 80%, var(--bbq-bg) 100%);
}
.card {
    border-radius: 1.2rem;
    box-shadow: 0 2px 16px 0 rgba(30,24,17,.18);
    overflow: hidden;
    background: #222;
    border: none;
    margin-bottom: 2em;
}
.card-title {
    font-family: var(--bbq-headline-font);
    font-size: 1.6em;
    color: var(--bbq-primary);
    margin-bottom: .5em;
}
.card-text {
    color: #ddd;
}
.alert {
    border-radius: 1em;
}

.bbq-social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2em;
    margin: 2em 0 0 0;
}
.bbq-social-links a {
    transition: transform .15s, color .2s;
    opacity: 0.88;
    font-size: 2.2em;
    display: inline-flex;
    align-items: center;
}
.bbq-social-links a:hover, .bbq-social-links a:focus {
    color: #25d366;
    transform: scale(1.18);
    opacity: 1;
}

input, textarea, select {
    border-radius: 8px !important;
    background: #242424 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
    padding: 0.7em 1em;
    font-size: 1em;
    margin-bottom: 1em;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--bbq-primary);
    border-color: var(--bbq-primary) !important;
    background: #1a1a1a !important;
}
.wpcf7-form label {
    color: var(--bbq-primary);
    font-weight: 600;
}
.wpcf7-submit {
    margin-top: 1em;
}

@media (max-width: 991px) {
    .card { margin-bottom: 1.5em; }
    h1 { font-size: 2em; }
}
@media (max-width: 767px) {
    .btn-bbq { width: 100%; padding-left: 0; padding-right: 0; }
    .card { margin-bottom: 1em; }
    .bbq-social-links { gap: 1.4em; font-size: 2em; }
    h1 { font-size: 1.4em; }
}

::-webkit-input-placeholder { color: #888; }
::-moz-placeholder { color: #888; }
:-ms-input-placeholder { color: #888; }
::placeholder { color: #888; }
img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5em;
}
.shadow, .card, .btn-bbq {
    box-shadow: 0 2px 12px 0 rgba(30,24,17,.09);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1.2em;
}

.header-action-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.6em;
    border: 2px solid var(--bbq-primary, #FF6B35);
    background: transparent;
    color: var(--bbq-primary, #FF6B35);
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    position: relative;
}
.header-action-link.mail {
    background: var(--bbq-primary, #FF6B35);
    color: #fff;
    border: none;
}
.header-action-link:hover,
.header-action-link:focus {
    background: var(--bbq-primary, #FF6B35);
    color: #fff;
    border-color: var(--bbq-primary, #FF6B35);
    box-shadow: 0 2px 8px 0 rgba(30,24,17,0.11);
}
.header-action-link.mail:hover,
.header-action-link.mail:focus {
    background: #EA4335; /* kräftiger Orange-Rot auf Hover für E-Mail */
}
.header-faq-link {
    color: var(--bbq-primary, #FF6B35);
    font-weight: 600;
    text-decoration: underline;
    font-size: 1.1em;
    padding: 0 0.7em 0 0.2em;
    border: none;
    background: transparent;
    transition: color .15s;
}
.header-faq-link:hover,
.header-faq-link:focus {
    color: #EA4335;
    text-decoration: none;
}

/* Contact Form 7 Button */
.wpcf7 form input[type="submit"],
.wpcf7 form .wpcf7-submit {
    background: var(--bbq-primary, #FF6B35) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0.75em 2.2em !important;
    font-weight: 700 !important;
    font-size: 1.16em !important;
    box-shadow: 0 2px 10px 0 rgba(30,24,17,0.12) !important;
    margin-top: 1em !important;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.15s;
    cursor: pointer !important;
    outline: none !important;
    letter-spacing: 0.01em;
    display: inline-block;
}

.wpcf7 form input[type="submit"]:hover,
.wpcf7 form input[type="submit"]:focus,
.wpcf7 form .wpcf7-submit:hover,
.wpcf7 form .wpcf7-submit:focus {
    background: #EA4335 !important;
    color: #fff !important;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 16px 0 rgba(30,24,17,0.14);
}

@media (max-width: 600px) {
    .wpcf7 form input[type="submit"],
    .wpcf7 form .wpcf7-submit {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        font-size: 1.14em !important;
    }
}