/* =========================================
   DACHDECKEREI VIERTEL - GLOBAL STYLE
   ========================================= */

/* --- 1. DESIGN SYSTEM & VARIABLEN --- */
:root {
    --color-slate: #3E4444;    /* Dunkelgrau (Hintergrund/Text) */
    --color-white: #FFFFFF;    /* Weiß */
    --color-copper: #D35400;   /* Akzentfarbe (Kupfer/Orange) */
    --color-dark: #2C3030;     /* Footer */
    --color-grey-light: #F4F4F4; 
    
    --font-heading: 'Oswald', 'Franklin Gothic Medium', sans-serif;
    --font-body: 'Roboto', 'Segoe UI', sans-serif;
    
    --header-height: 80px;
    --banner-height: 55px;
    --container-width: 1200px;
}

/* --- 2. RESET & BASIS --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: var(--color-white);
    color: var(--color-slate);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* GANZ WICHTIG: Platz für Navi (80px) + Banner (55px) */
    padding-top: calc(var(--header-height) + var(--banner-height));
    margin: 0;
}

main { flex: 1; position: relative; z-index: 1; }

/* --- 3. TYPOGRAFIE --- */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}
h1 { font-size: 3.5rem; color: var(--color-white); }
h2 { font-size: 2.5rem; color: var(--color-slate); }
h3 { font-size: 1.5rem; }

.text-light { color: var(--color-white); }
.text-copper { color: var(--color-copper); }
.bg-slate { background-color: var(--color-slate); color: var(--color-white); }
.bg-light { background-color: var(--color-grey-light); }

/* --- 4. UI ELEMENTE --- */
.divider-copper {
    display: block; width: 60px; height: 4px; 
    background-color: var(--color-copper); margin: 0 0 1.5rem 0;
}

.btn {
    display: inline-block; padding: 1rem 2rem;
    font-family: var(--font-heading); text-transform: uppercase;
    text-decoration: none; font-weight: 500;
    border: 2px solid var(--color-copper);
    background-color: var(--color-copper); color: var(--color-white);
    transition: all 0.2s ease; cursor: pointer; border-radius: 0;
}
.btn:hover { background-color: transparent; color: var(--color-copper); }

.btn-outline {
    background-color: transparent; border-color: var(--color-white); color: var(--color-white);
}
.btn-outline:hover { background-color: var(--color-white); color: var(--color-slate); }

.emergency-box {
    border: 4px solid var(--color-copper);
    background-color: #fff0e6;
    padding: 2rem;
    margin-bottom: 3rem;
    text-align: center;
}

/* --- 5. LAYOUT --- */
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 2rem; }
section { padding: 5rem 0; position: relative; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }

.img-technical {
    width: 100%; height: 100%; min-height: 300px; object-fit: cover;
    border-bottom: 4px solid var(--color-copper);
    filter: contrast(1.1) grayscale(0.2);
}

/* ======================================================================== 
   6. HEADER & BANNER (FIXED UND ÜBERLAPPUNGSFREI)
   ======================================================================== */

.viertel-main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: #3E4444;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.logo {
    font-family: var(--font-heading); font-size: 1.8rem;
    color: var(--color-white); border: 2px solid var(--color-white);
    padding: 0.2rem 0.8rem; text-decoration: none; z-index: 1002;
}

.nav-menu { list-style: none; display: flex; gap: 1.2rem; }
.nav-menu a {
    color: var(--color-white); text-decoration: none;
    text-transform: uppercase; font-weight: 500; font-size: 0.9rem;
    padding-bottom: 5px; transition: color 0.2s;
}
.nav-menu a:hover, .nav-menu a.active { 
    color: var(--color-copper); border-bottom: 2px solid var(--color-copper); 
}

.hamburger { display: none; cursor: pointer; z-index: 1002; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--color-white); transition: all 0.3s ease; }

/* --- BANNER (SITZT EXAKT UNTER DER NAVI) --- */
.viertel-top-banner {
    position: fixed;
    top: var(--header-height); /* Hängt sich exakt an die Unterkante des Headers */
    left: 0;
    right: 0;
    height: var(--banner-height);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    background: linear-gradient(90deg, #2c3030 0%, #3a3f3f 100%);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--color-copper);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    z-index: 9998; /* Unter dem Header einsortiert */
}

.viertel-top-banner::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--color-copper);
}

.viertel-top-banner a {
    font-weight: 700; color: white; text-decoration: none; border-bottom: 1px solid currentColor;
}
.viertel-top-banner a:hover { opacity: 0.85; }

/* --- 7. FOOTER --- */
footer {
    background-color: var(--color-slate); color: var(--color-white);
    border-top: 1px solid var(--color-copper); padding: 4rem 0 2rem 0;
    position: relative; z-index: 10;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E');
}

.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 3rem; }
.footer-col h4 { font-family: var(--font-heading); color: var(--color-white); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem; }
.footer-col p, .footer-col a { font-family: var(--font-body); font-size: 0.95rem; color: #ccc; text-decoration: none; line-height: 1.8; display: block; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--color-copper); }
.hwk-seal-placeholder { width: 120px; height: 120px; border: 1px dashed #666; background-color: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; margin-top: 1rem; font-size: 0.7rem; color: #888; text-align: center; }
.social-links { display: flex; gap: 1rem; }
.social-icon { font-size: 1.5rem; color: var(--color-white); transition: color 0.3s ease; }
.social-icon:hover { color: var(--color-copper); }
.footer-bottom { text-align: center; border-top: 1px solid #555; padding-top: 2rem; font-size: 0.8rem; color: #888; }

/* --- 8. FORMULARE --- */
.form-group { margin-bottom: 1.5rem; }
label { display: block; margin-bottom: 0.5rem; font-weight: 500; text-transform: uppercase; font-size: 0.85rem; }
input, select, textarea { width: 100%; padding: 1rem; border: 1px solid #ccc; background-color: #f9f9f9; font-family: var(--font-body); font-size: 1rem; border-radius: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-copper); background-color: var(--color-white); }

/* --- 9. LEISTUNGEN --- */
.grid-system-final { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; align-items: stretch; }
.col-card-final { background-color: #f9f9f9; border-top: 6px solid var(--color-slate); border-bottom: 1px solid #ddd; display: flex; flex-direction: column; height: 100%; position: relative; transition: transform 0.2s ease; }
.col-card-final:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.col-img-final { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: grayscale(100%); border-bottom: 4px solid var(--color-copper); }
.col-body-final { padding: 0 2rem 2rem 2rem; display: flex; flex-direction: column; flex-grow: 1; }
.col-body-final h3 { color: var(--color-slate); font-size: 1.5rem; margin: 1.5rem 0; padding-bottom: 0.5rem; border-bottom: 2px solid #ddd; }
.accordion { padding: 0.8rem 0; border-bottom: 1px solid #eee; color: var(--color-slate); font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: transparent; border: none; width: 100%; text-align: left; font-family: var(--font-heading); font-size: 1rem; }
.accordion:hover { color: var(--color-copper); }
.accordion:after { content: '+'; font-weight: bold; }
.accordion.active:after { content: '-'; }
.panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; font-size: 0.9rem; color: #555; background: white; }
.panel p { margin: 1rem 0; }
.col-cta-bottom { margin-top: auto; padding-top: 2rem; width: 100%; }
.emergency-section { background-color: var(--color-slate); color: var(--color-white); border: 4px solid var(--color-copper); position: relative; overflow: hidden; }
.checklist { list-style: none; margin-top: 1.5rem; }
.checklist li { margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative; }
.checklist li::before { content: "!"; position: absolute; left: 0; color: var(--color-copper); font-weight: bold; }

/* --- 10. REFERENZEN & MODAL & TIMELINE --- */
.filter-bar { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.filter-btn { background: transparent; border: 1px solid #ccc; color: var(--color-slate); padding: 0.8rem 1.5rem; text-transform: uppercase; font-family: var(--font-heading); font-weight: 700; cursor: pointer; transition: all 0.3s ease; }
.filter-btn:hover, .filter-btn.active { border-color: var(--color-copper); background-color: var(--color-copper); color: var(--color-white); }
.portfolio-card { position: relative; height: 300px; overflow: hidden; cursor: pointer; border-bottom: 4px solid var(--color-slate); }
.portfolio-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; filter: grayscale(100%); }
.portfolio-card:hover .portfolio-img { transform: scale(1.1); filter: grayscale(0%); }
.portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(211, 84, 0, 0.9); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; text-align: center; padding: 2rem; }
.portfolio-card:hover .portfolio-overlay { opacity: 1; }
.portfolio-title { color: white; font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 0.5rem; text-transform: uppercase; transform: translateY(20px); transition: transform 0.3s ease; }
.portfolio-card:hover .portfolio-title { transform: translateY(0); }
.modal-backdrop { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(44, 48, 48, 0.95); backdrop-filter: blur(5px); overflow-y: auto; }
.modal-content { background-color: white; margin: 5% auto; width: 90%; max-width: 900px; position: relative; border: 4px solid var(--color-copper); animation: slideDown 0.4s ease; }
@keyframes slideDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-close { position: absolute; top: 10px; right: 20px; font-size: 3rem; color: var(--color-slate); cursor: pointer; font-weight: bold; line-height: 0.8; }
.modal-close:hover { color: var(--color-copper); }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; }
.modal-img-container { height: 100%; min-height: 400px; }
.modal-img { width: 100%; height: 100%; object-fit: cover; }
.modal-info { padding: 3rem; }
.timeline-container { position: relative; padding-left: 2rem; border-left: 4px solid var(--color-copper); margin-left: 1rem; }
.timeline-item { margin-bottom: 3rem; position: relative; }
.timeline-item::before { content: ''; position: absolute; left: -2.6rem; top: 0.5rem; width: 16px; height: 16px; background-color: var(--color-slate); border: 2px solid var(--color-white); }
.timeline-year { color: var(--color-copper); font-weight: bold; font-family: var(--font-heading); }

/* --- 11. KONTAKT SEITE SPEZIAL --- */
.grid-contact-split { display: grid; grid-template-columns: 1fr 3fr; gap: 4rem; }
.contact-sidebar-item { margin-bottom: 2.5rem; padding-left: 1rem; border-left: 2px solid var(--color-copper); }
.contact-sidebar-item h4 { color: var(--color-slate); margin-bottom: 0.5rem; font-size: 1.1rem; }
.contact-icon { color: var(--color-copper); font-size: 1.5rem; margin-bottom: 0.5rem; display: block; }
.file-upload-area { border: 2px dashed #ccc; background-color: #f9f9f9; padding: 2rem; text-align: center; cursor: pointer; transition: all 0.3s ease; margin-bottom: 1.5rem; position: relative; }
.file-upload-area:hover, .file-upload-area.dragover { border-color: var(--color-copper); background-color: #fff0e6; }
.file-upload-area input[type="file"] { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; }
.map-section { width: 100%; height: 450px; background-color: var(--color-slate); overflow: hidden; position: relative; border-top: 4px solid var(--color-copper); }
.map-frame { width: 100%; height: 100%; border: 0; filter: grayscale(100%) invert(92%) contrast(83%); opacity: 0.8; }
.success-message { display: none; background-color: var(--color-slate); color: white; padding: 2rem; text-align: center; border: 2px solid var(--color-copper); margin-top: 2rem; }
.emergency-hero { background-color: var(--color-slate); color: white; padding: 3rem 2rem; border-bottom: 6px solid var(--color-copper); text-align: center; }

/* --- 12. BENTO GRID (INDEX) --- */
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0; }
.bento-item { min-height: 300px; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; text-decoration: none; color: white; position: relative; overflow: hidden; }
.image-caption { font-size: 0.5rem; color: #888; font-style: italic; margin-top: 0.4rem; display: block; font-family: var(--font-body); line-height: 1.2; }
.hero-status-badge { display: inline-flex; align-items: center; gap: 10px; background-color: rgba(184, 115, 51, 0.15); border: 1px solid var(--color-copper); color: var(--color-white); padding: 0.8rem 1.5rem; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.85rem; font-weight: bold; margin-bottom: 2rem; backdrop-filter: blur(4px); }
.hero-status-badge i { color: var(--color-copper); font-size: 1.1rem; }

/* ======================================================================== 
   13. RESPONSIVE MEDIA QUERIES
   ======================================================================== */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .nav-menu { gap: 1rem; }
}

@media (max-width: 900px) {
    .grid-contact-split { grid-template-columns: 1fr; gap: 2rem; }
    .contact-sidebar-item { border-left: none; border-bottom: 2px solid var(--color-copper); padding-bottom: 1rem; padding-left: 0; }
}

@media (max-width: 768px) {
    h1 { font-size: 2.5rem; }
    .grid-2 { grid-template-columns: 1fr; gap: 2rem; }
    .modal-grid { grid-template-columns: 1fr; }
    .modal-img-container { height: 250px; min-height: auto; }
    
    .hamburger { display: block; }
    .nav-menu {
        position: fixed; left: -100%; top: var(--header-height);
        flex-direction: column; background-color: var(--color-slate);
        width: 100%; height: calc(100vh - var(--header-height));
        padding: 2rem; gap: 2rem; text-align: center;
        transition: 0.3s; border-top: 1px solid #555;
    }
    .nav-menu.active { left: 0; }
    .nav-menu a { font-size: 1.2rem; display: block; padding: 1rem; border-bottom: 1px solid #4a5050; }
}

@media (max-width: 600px) {
    :root {
        --header-height: 70px;
        --banner-height: 75px; /* Platz für Umbruch */
    }
    .footer-grid { grid-template-columns: 1fr; gap: 3rem; }
    .viertel-main-header { padding: 0 1.5rem; }
    .viertel-top-banner { font-size: 0.85rem; flex-direction: column; text-align: center; padding: 8px; }
}