/* ============================================================
   videoproduktion-flensburg.css – Page-specific styles for videoproduktion-flensburg.html
   ============================================================ */

p { line-height: 1.7; margin-bottom: 1rem; }

/* ── VIDEO HERO ── */
.video-hero {
    position: relative;
    height: 85vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #000;
}

.video-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.video-hero-bg video { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }

.video-hero-content { position: relative; z-index: 2; text-align: center; padding: 20px; width: 100%; }
.video-hero-content h1 { font-size: 58px; line-height: 1.2; margin-bottom: 20px; }
.video-hero-content p { font-size: 18px; color: #ddd; max-width: 700px; margin: 0 auto 32px; }

/* ── CONTENT SECTIONS ── */
.content-section { padding: 80px 0; background-color: #000; }
.content-section.bg-dark { background-color: #111; }

.content-block { max-width: 820px; margin: 0 auto 50px; }
.content-block h2 { font-size: 32px; margin-bottom: 24px; position: relative; padding-bottom: 16px; }
.content-block h2::after { content: ''; position: absolute; width: 60px; height: 3px; background-color: #fff; bottom: 0; left: 0; }
.content-block p { color: #ccc; }
.content-block p strong { color: #fff; }

/* ── HIGHLIGHTS ── */
.highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 10px; }
.highlight-item { padding: 28px; border: 1px solid #222; text-align: center; }
.highlight-item i { font-size: 32px; margin-bottom: 14px; color: #fff; }
.highlight-item h3 { font-size: 17px; margin-bottom: 10px; }
.highlight-item p { font-size: 14px; color: #999; margin: 0; }

/* ── FAQ ── */
.faq-section { padding: 80px 0; background-color: #000; }

.faq-section .section-title {
    font-size: 36px;
    margin-bottom: 50px;
    text-align: center;
    position: relative;
    padding-bottom: 15px;
}

.faq-section .section-title::after {
    content: '';
    position: absolute;
    width: 80px; height: 3px;
    background-color: #fff;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
}

.faq-grid { max-width: 820px; margin: 0 auto; }

/* Flensburg FAQ uses position:absolute variant for the + sign */
.faq-section details.faq-item summary {
    padding: 20px 40px 20px 0;
    display: block;
    position: relative;
}

.faq-section details.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 400;
}

.faq-section details.faq-item[open] summary::after {
    content: '−';
    transform: translateY(-50%);
}

/* ── INTERNAL LINKS ── */
.internal-links { background-color: #111; padding: 80px 0; text-align: center; }
.internal-links h2 { font-size: 30px; margin-bottom: 12px; }
.internal-links > .container > p { color: #aaa; font-size: 16px; margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto; }

.internal-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; }
.internal-link-card { border: 1px solid #2a2a2a; padding: 28px 22px; text-decoration: none; color: #fff; transition: all 0.3s ease; background-color: #0a0a0a; }
.internal-link-card:hover { border-color: #fff; }
.internal-link-card i { font-size: 26px; margin-bottom: 12px; display: block; }
.internal-link-card h3 { font-size: 16px; margin-bottom: 8px; }
.internal-link-card p { font-size: 13px; color: #777; margin: 0; }

/* ── CTA ── */
.cta-section { background-color: #fff; color: #000; padding: 80px 0; text-align: center; }
.cta-section h2 { font-size: 36px; margin-bottom: 16px; color: #000; }
.cta-section p { font-size: 17px; color: #555; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; }

/* ── RESPONSIVE ── */
@media screen and (max-width: 768px) {
    .video-hero { height: 65vh; }
    .video-hero-content h1 { font-size: 32px; }
    .video-hero-content p { font-size: 15px; }
    .btn-outline { margin-left: 0; margin-top: 12px; display: block; }
    .content-section { padding: 50px 0; }
    .content-block h2 { font-size: 24px; }
    .highlights { grid-template-columns: 1fr; gap: 16px; }
    .faq-section .section-title { font-size: 28px; }
    .internal-links-grid { grid-template-columns: 1fr 1fr; }
    .cta-section h2 { font-size: 26px; }
    .content-section .container { padding: 0 16px; }
}

@media (max-width: 480px) {
    .video-hero-content h1 { font-size: 26px; }
    .btn-outline { display: block; margin: 12px auto 0; }
    .internal-links-grid { grid-template-columns: 1fr; }
}