/* REELCUT ZENTRALES STYLESHEET - Goldstandard + Kontakt-Fix */

:root { 
    --brand-gold: #948058; 
    --text-black: #1f1f1f; 
    --font-main: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

html, body { 
    margin: 0; padding: 0; width: 100%; height: 100%; 
    background-color: #fff; 
    font-family: var(--font-main); 
    -webkit-font-smoothing: antialiased; 
    overflow-x: hidden; scroll-behavior: smooth;
}

/* DESKTOP NAVIGATION */
@media only screen and (min-width: 801px) {
    nav { position: fixed; top: 50px; left: 50px; width: 245px; z-index: 100; display: flex; flex-direction: column; }
    .logo-img { width: 224px; height: auto; margin-bottom: 30px; display: block; }
    .menu-block a { text-decoration: none; color: var(--text-black); display: block; padding: 0.2em 0; transition: color 0.1s ease-in-out; }
    .menu-block a:hover, .menu-block a.active { color: var(--brand-gold) !important; }
    .menu-primary a { font-size: 20px; font-weight: 500; letter-spacing: 0.09em; line-height: 1.6em; }
    .menu-secondary { margin-top: 20px; }
    .menu-secondary a { font-size: 16px; font-weight: 500; letter-spacing: 0.09em; line-height: 1.6em; }
    .mobile-header, .mobile-overlay { display: none !important; }
}

/* EINHEITLICHES LAYOUT (MAX-WIDTH) */
.content-area { 
    position: relative; 
    padding: 50px 50px 100px 350px; 
    max-width: 1000px; 
    color: var(--text-black); 
}

/* SCHMALER SCOPE HEADER */
.hero-container { margin-bottom: 60px; width: 100%; }
.hero-image-wrapper { position: relative; width: 100%; padding-bottom: 35%; background-color: #f4f4f4; overflow: hidden; }
.hero-image-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* GOLDENER KASTEN */
.hero-caption { background-color: var(--brand-gold); color: #fff; padding: 1.2em 2.5em 1.4em 2.5em; }
.hero-caption p { margin: 0; color: #fff !important; font-size: 16px !important; font-weight: 400 !important; letter-spacing: 0.09em !important; line-height: 1.6em !important; text-transform: none; text-align: left; }

/* TYPOGRAFIE */
h1 { font-size: 34px; font-weight: 300; color: #616161; letter-spacing: 0.03em; line-height: 1.5em; margin: 0 0 1em 0; }
h2 { font-size: 24px; font-weight: 300; color: #616161; letter-spacing: 0.03em; margin: 1.5em 0 0.5em 0; }
h3 { font-size: 20px; font-weight: 300; color: #616161; letter-spacing: 0.03em; margin: 1.5em 0 1em; }
p { font-size: 15px; line-height: 1.6em; font-weight: 400; color: #666; letter-spacing: 0.04em; margin: 0 0 1.5em; }
strong { font-weight: 600; color: #333; }

/* LISTEN & ZITATE */
ul.custom-list { list-style: none; padding: 0; margin-bottom: 2em; }
ul.custom-list li { font-size: 15px; color: #666; margin-bottom: 12px; position: relative; padding-left: 20px; line-height: 1.6em; font-weight: 400; }
ul.custom-list li::before { content: "•"; position: absolute; left: 0; color: var(--brand-gold); }
blockquote { font-size: 15px !important; font-weight: 400; font-style: normal; color: rgba(102, 102, 102, 0.55); letter-spacing: 0.03em; line-height: 1.6em; margin: 2em 0; padding: 0 0 0 20px; border-left: 1px solid #ccc; max-width: 800px; }
blockquote span.author { display: block; margin-top: 10px; font-size: 13px; color: #999; text-align: right; font-weight: bold; }

/* VIDEO BLÖCKE */
.video-block { margin-bottom: 70px; width: 100%; }
.video-title { font-size: 18px; font-weight: 300; text-transform: uppercase; letter-spacing: 3px; color: #1a1a1a; margin-bottom: 12px; }
.video-wrapper { position: relative; padding-top: 56.25%; background: #000; width: 100%; margin-bottom: 15px; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video-meta { font-size: 12px; font-weight: 400; color: #888; letter-spacing: 1px; line-height: 1.6; }
.meta-label { text-transform: uppercase; font-size: 10px; color: #bbb; display: inline-block; margin-right: 4px; }

/* BILD & GRID BLÖCKE */
.reelcut-row { display: flex; flex-wrap: wrap; gap: 50px; margin-bottom: 60px; align-items: flex-start; }
.col-text { flex: 1; min-width: 300px; }
.col-media { flex: 0 0 50%; min-width: 300px; }
.col-12 { flex: 0 0 100%; }
.img-container { width: 100%; position: relative; padding-bottom: 66%; background: #f4f4f4; margin-bottom: 10px; overflow: hidden; }
.img-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s; }
.img-container img:hover { opacity: 0.8; }
.copyright-label { font-size: 10px; color: #bbb; margin-top: 5px; display: block; letter-spacing: 1px; }

/* SPEZIAL-STYLES FÜR KONTAKTSEITE (NEU) */
.meta-link { color: var(--brand-gold) !important; text-decoration: none; font-weight: 400; font-size: 15px !important; display: inline; }
.meta-link:hover { text-decoration: underline; }
.email-text { color: #666 !important; font-size: 15px !important; font-weight: 400; display: inline; }

/* FOOTER & TRENNER */
hr { border: 0; border-top: 1px solid #ccc; margin: 60px 0; width: 100%; }
.footer-text { font-size: 14px; color: #888; font-weight: 400; }
.footer-text a { color: var(--brand-gold); text-decoration: none; }

/* MOBILE ANSICHT */
@media only screen and (max-width: 800px) {
    nav { display: none; }
    .content-area { padding: 100px 25px 60px 25px; }
    .col-text, .col-media { flex: 0 0 100%; }
    .mobile-header { position: fixed; top: 0; left: 0; width: 100%; padding: 25px; display: flex; justify-content: space-between; align-items: center; z-index: 1000; box-sizing: border-box; background: rgba(255,255,255,0.95); }
    .logo-img-mobile { width: 160px; height: auto; display: block; }
    .menu-toggle span { display: block; width: 28px; height: 2px; background-color: var(--brand-gold); margin: 6px 0; transition: all 0.2s ease; }
    .mobile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(255,255,255,0.85) 10%, rgba(255,255,255,0.40) 60%, rgba(255,255,255,0.10) 100%); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 2000; display: none; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
    .mobile-overlay a { display: block; text-decoration: none; color: var(--brand-gold); font-size: 20px; font-weight: 500; letter-spacing: 0.09em; line-height: 1.6em; margin: 10px 0; }
    .close-menu { position: absolute; top: 25px; right: 25px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-black); cursor: pointer; font-weight: 500; }
    .mobile-menu-secondary { margin-top: 30px; }
    .mobile-menu-secondary a { font-size: 16px; font-weight: 500; letter-spacing: 0.09em; line-height: 1.6em; }
    .hero-image-wrapper { padding-bottom: 60%; }
    .hero-caption { padding: 1em 1.5em; }
    .hero-caption p { font-size: 14px !important; line-height: 1.4em !important; }
    .col-7, .col-5 { flex: 0 0 100%; }
}

/* DESKTOP GRID & BUTTONS */
@media only screen and (min-width: 801px) {
    .col-7 { flex: 0 0 calc(58.333% - 25px); }
    .col-5 { flex: 0 0 calc(41.666% - 25px); }
}

.testimonial-label { font-size: 10px; text-transform: uppercase; color: #bbb; display: inline-block; margin-right: 8px; letter-spacing: 1px; }
.testimonial-desc { font-size: 13px; color: #888; letter-spacing: 1px; margin-bottom: 15px; line-height: 1.6; font-weight: 400; }
.btn-contact { display: inline-block; padding: 14px 28px; background-color: var(--brand-gold); color: #fff !important; font-weight: 600; letter-spacing: 0.1em; font-size: 14px; text-decoration: none; transition: opacity 0.2s; border: none; }
.btn-contact:hover { opacity: 0.8; }