/*
Theme Name: Schreinerei Woitzik Custom Theme
Theme URI: https://schreinerei-erding.de/
Description: Ein maßgeschneidertes, modernes und blitzschnelles Theme für die Schreinerei Woitzik.
Version: 1.0.0
Author: Dein Name / Gemini
Author URI: https://schreinerei-erding.de/
Text Domain: schreinerei-woitzik
*/

/* --- GRUNDLEGENDE STYLES (MODERN & REIN) --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #2c2c2c; /* Edles Anthrazit statt hartem Schwarz */
    background-color: #fcfbfa; /* Minimal warmes Off-White */
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Container für saubere Abstände */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- VIRTUELLER RUNDGANG STYLING --- */
.rundgang-section {
    margin-top: 40px;
    margin-bottom: 40px;
}

.rundgang-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Das sorgt für ein perfektes 16:9 Seitenverhältnis */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #eae6e1;
    background: #fcfbfa;
}

.rundgang-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- EDLES TYPOGRAFIE-UPGRADE FÜR UNTERSEITEN --- */

/* Der erste Absatz bekommt eine größere, einladende Schrift (Intro-Text) */
.content-container > p:first-of-type {
    font-size: 1.25rem;
    line-height: 1.8;
    color: #2c2c2c;
    font-weight: 500;
}

/* Wunderschöne Zitat-Box für euer Leitmotiv */
.content-container blockquote {
    background-color: #fcfbfa;
    border-left: 4px solid #a67c52;
    padding: 30px 40px;
    margin: 40px 0;
    font-style: italic;
    font-family: Georgia, serif;
    font-size: 1.3rem;
    color: #555;
    line-height: 1.7;
    position: relative;
    border-radius: 0 8px 8px 0;
    box-shadow: inset 0 0 20px rgba(166,124,82,0.02);
}

.content-container blockquote::before {
    content: "“";
    font-size: 5rem;
    color: rgba(166,124,82,0.15);
    position: absolute;
    top: -10px;
    left: 10px;
    font-family: Georgia, serif;
}

/* Mehr Charakter für die Zwischenüberschriften */
.content-container h2 {
    font-size: 2rem;
    color: #2c2c2c;
    margin-top: 50px;
    margin-bottom: 25px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.content-container h3 {
    font-size: 1.4rem;
    color: #2c2c2c;
    margin-top: 35px;
    margin-bottom: 15px;
    font-weight: 600;
}

/* Schicke, strukturierte Listen mit edlen Häkchen statt Standard-Punkten */
.content-container ul {
    list-style: none;
    padding-left: 0;
    margin: 30px 0;
}

.content-container li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    font-size: 1.05rem;
    color: #444;
}

/* Das maßgeschneiderte Häkchen-Icon vor jedem Listenpunkt */
.content-container li::before {
    content: "✓";
    position: absolute;
    left: 5px;
    top: 2px;
    color: #a67c52;
    font-weight: bold;
    font-size: 1.1rem;
}

/* Fettgedruckter Text in Listen (z.B. "Persönliche Beratung:") hervorheben */
.content-container li strong {
    color: #2c2c2c;
    font-weight: 600;
}

/* --- PREMIUM SPALTEN-LAYOUT FÜR LEISTUNGEN --- */
.page-body .content-container {
    max-width: 1100px;
}

.wp-block-columns {
    display: flex;
    gap: 80px;
    align-items: center;
    margin-bottom: 100px;
}

.wp-block-column {
    flex: 1;
    margin: 0 !important;
}

.wp-block-column .wp-block-image,
.wp-block-column img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.wp-block-column p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

@media (max-width: 992px) {
    .wp-block-columns {
        flex-direction: column !important;
        gap: 30px;
        margin-bottom: 60px;
    }
    .wp-block-column .wp-block-image,
    .wp-block-column img {
        height: 250px;
    }
}

/* --- HINWEIS ÖFFNUNGSZEITEN FOOTER --- */
.footer-note {
    color: #a67c52 !important;
    font-size: 0.95rem;
    margin-top: 15px;
    font-weight: 500;
}

/* ==========================================================================
   Kochkurse Übersicht (Premium-Grid & Karten)
   ========================================================================== */
.kochkurse-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 30px !important;
    padding: 20px 0 !important;
}

.kochkurse-grid article {
    background: #ffffff !important;
    border: 1px solid #eadecc !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.kochkurse-grid article:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 30px rgba(166, 124, 82, 0.12) !important;
    border-color: #a67c52 !important;
}

.kochkurse-grid .kurs-bild-wrapper img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
}

.kochkurse-grid .post-content {
    padding: 30px 25px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.kochkurse-grid .post-content h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
}

.kochkurse-grid .post-content h2 a {
    color: #222222 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.kochkurse-grid .post-content h2 a:hover {
    color: #a67c52 !important;
}

.kochkurse-grid .post-excerpt {
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
    flex-grow: 1 !important;
}

.kochkurse-grid .button-wrapper {
    margin-top: auto !important;
}

.kochkurse-grid .kurs-buchen-btn {
    display: block !important;
    text-decoration: none !important;
    text-align: center !important;
    background-color: #a67c52 !important;
    color: #ffffff !important;
    padding: 13px 20px !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: background-color 0.2s ease !important;
}

.kochkurse-grid .kurs-buchen-btn:hover {
    background-color: #8c6540 !important;
}

/* ==========================================================================
   INTERNATIONALE CF7 CORE-LOGIK (Verwandelt Boxen bedingungslos in feine Linien)
   ========================================================================== */

/* 1. Radikale Vernichtung aller Standard-Kästen auf der gesamten Seite */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea,
.wpcf7-form-control:not(.wpcf7-submit) {
    display: block !important;
    width: 100% !important;
    border: none !important;
    border-bottom: 1px solid #999999 !important; /* Die feine Unterlinie */
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    color: #999999 !important; /* Edles Platin-Grau für Text & Wunschdatum */
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
}

/* 2. Focus-Effekt bei Klick: Linie wird Schreinerei-Braun */
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus,
.wpcf7-form-control:focus {
    outline: none !important;
    border: none !important;
    border-bottom: 2px solid #a67c52 !important;
    color: #2c2c2c !important; /* Schrift wird beim Tippen tief dunkel */
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 3. Placeholder dezent grau halten */
.wpcf7-form ::placeholder {
    color: #bbb !important;
    opacity: 1 !important;
}

/* 4. Labels optimieren */
.wpcf7-form label {
    font-size: 14px !important;
    color: #2c2c2c !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 8px !important;
    display: block !important;
    width: 100% !important;
}

/* 5. Wunschdatum & Uhrzeit im Grid nebeneinander */
.woitzik-form-grid-2 {
    display: flex !important;
    gap: 25px !important;
}
.woitzik-form-grid-2 > div,
.woitzik-form-grid-2 > span {
    flex: 1 !important;
}

.wpcf7-form textarea {
    min-height: 60px !important;
    resize: vertical !important;
}

/* 6. High-End Button mit Gold-Braun-Glow */
.wpcf7-form .wpcf7-submit,
.wpcf7-form input[type="submit"].wpcf7-submit {
    width: 100% !important;
    border: none !important;
    border-bottom: none !important;
    background: linear-gradient(135deg, #b9936c 0%, #a67c52 100%) !important;
    color: #ffffff !important;
    padding: 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    box-shadow: 0 5px 20px rgba(166, 124, 82, 0.3) !important;
    transition: all 0.3s ease !important;
    margin-top: 15px !important;
    display: block !important;
}

.wpcf7-form .wpcf7-submit:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 25px rgba(166, 124, 82, 0.45) !important;
}

/* ==========================================================================
   POSITIONIERUNG & RAHMEN-LOGIK (Kontaktseite vs. Kochkurse)
   ========================================================================== */

/* Split-Layout auf der Kontaktseite */
.kontakt-seite-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 60px !important;
    max-width: 1200px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
}

.kontakt-info-links { flex: 1 1 450px !important; color: #333 !important; }
.kontakt-form-rechts { flex: 1 1 500px !important; }

/* Die Schwarz-Weiß Icons links */
.kontakt-info-links .sw-icon {
    font-size: 20px !important;
    color: #2c2c2c !important;
    display: inline-block;
    width: 24px;
    text-align: center;
    font-weight: normal !important;
}

.oeffnungszeiten-box { 
    display: flex !important; 
    gap: 40px !important; 
    margin-top: 15px !important; 
    border-left: 2px solid #eadecc !important; 
    padding-left: 20px !important; 
    color: #555 !important; 
    line-height: 1.8 !important;
}

/* A) FINALE METRIK FÜR DAS KONTAKTFORMULAR (Mit breitem Seitenabstand) */
.kontakt-form-rechts .wpcf7-form {
    background: #ffffff !important;
    max-width: 650px !important;
    padding: 40px 35px !important; 
    border: 1px solid #eae5dd !important; 
    border-radius: 8px !important;
    box-shadow: 
        0 0 0 30px #ffffff, 
        0 20px 50px rgba(0, 0, 0, 0.06) !important; /* Das fette Galerie-Passepartout */
    margin: 30px 0 30px 35px !important; /* Hält den perfekten Abstand zum linken Text */
}

/* B) FINALE METRIK FÜR DIE KOCHKURSE EINZELSEITEN (Absolut zentriert) */
.wpcf7-form:not(.kontakt-form-rechts .wpcf7-form) {
    max-width: 650px !important;
    margin: 50px auto !important; /* Auto links & rechts zwingt das Formular exakt in die Mitte */
    background: #ffffff !important;
    padding: 40px 35px !important;
    border-radius: 8px !important;
    border: 1px solid #eae5dd !important; 
    box-shadow: 
        0 0 0 30px #ffffff, 
        0 20px 50px rgba(0, 0, 0, 0.06) !important;
}

/* Mobile Anpassungen für Handys */
@media (max-width: 768px) {
    .kontakt-seite-wrapper { gap: 40px !important; margin: 20px auto !important; }
    .woitzik-form-grid-2 { flex-direction: column !important; gap: 20px !important; }
    .kontakt-form-rechts .wpcf7-form,
    .wpcf7-form:not(.kontakt-form-rechts .wpcf7-form) {
        margin: 30px auto !important;
        padding: 25px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important; /* Mobil etwas flacher, da kein Platz für 30px Passepartout */
    }
}