/* =========================================================
   1. RESET
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
#theme-attribution { display: none; }
.entry-content a { text-decoration: none; }


/* =========================================================
   2. DESIGN VARIABLEN
========================================================= */
:root {
    --green:        #22C55E;
    --green-d:      #16A34A;
    --navy:         #0B1120;
    --light:        #F0FDF4;
    --border:       #D1FAE5;
    --text:         #0F172A;
    --mid:          #555555;
    --ff:           'Plus Jakarta Sans', system-ui, sans-serif;
}


/* =========================================================
   3. FULL-WIDTH BREAKOUT
========================================================= */
body.responsive.layout-full #page-wrapper .full-container {
    max-width: 100% !important;
    padding: 0 !important;
}
.panel-grid, .panel-grid-cell { padding: 0 !important; margin: 0 !important; }
.entry-content { padding: 0 !important; }


/* =========================================================
   4. SMART SLIDER — ausblenden
========================================================= */
.n2-section-smartslider,
.n2_ss_swiper-container,
[id^="n2-ss-"],
.so-widget-smart-slider-3,
.wp-widget-smart-slider-3 { display: none !important; }


/* =========================================================
   5. VANTAGE CONTENT — Padding & Title entfernen
========================================================= */
#main, #primary, .site-content, .site-main, #content,
.content-area, article.page, article.hentry {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.page-title, .entry-title, h1.entry-title,
header.entry-header, .entry-header, .vantage-page-title,
.site-content > header, .site-main > header {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* =========================================================
   6. AIOSEO BREADCRUMB ausblenden
========================================================= */
.aioseo-breadcrumbs,
.aioseo-breadcrumb-wrapper,
nav.aioseo-breadcrumbs,
[class*="aioseo-breadcrumb"] {
    display: none !important;
}
.aioseo-breadcrumbs ~ ul,
.aioseo-breadcrumbs ~ nav,
.aioseo-breadcrumb-wrapper ~ ul,
nav.aioseo-breadcrumbs + ul,
.breadcrumbs ~ ul, .breadcrumb ~ ul, nav.breadcrumb + ul {
    display: none !important;
}


/* =========================================================
   7. NAVIGATION (Desktop) — Dark CI
========================================================= */
html body div#masthead,
html body header#masthead,
html body #masthead,
html body .site-header {
    background: #0B1120 !important;
    background-color: #0B1120 !important;
    border-bottom: 1px solid rgba(34,197,94,.15) !important;
}

html body #masthead .site-title a {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
}
html body #masthead .site-title a:hover { color: #22C55E !important; }

html body #masthead .main-navigation a {
    color: rgba(255,255,255,.75) !important;
    background: transparent !important;
}
html body #masthead .main-navigation a:hover,
html body #masthead .main-navigation .current-menu-item > a {
    color: #22C55E !important;
}

html body #masthead .main-navigation ul ul {
    background: #0B1120 !important;
    border: 1px solid rgba(34,197,94,.2) !important;
}
html body #masthead .main-navigation ul ul a {
    color: rgba(255,255,255,.6) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
html body #masthead .main-navigation ul ul a:hover {
    color: #22C55E !important;
    background: rgba(34,197,94,.06) !important;
}

html body #masthead .menu-toggle {
    color: #ffffff !important;
    background: transparent !important;
    border-color: rgba(255,255,255,.2) !important;
}

@media(max-width:768px) {
    html body .main-navigation ul { background: #0B1120 !important; }
    html body .main-navigation ul a { border-bottom: 1px solid rgba(255,255,255,.08) !important; }
}


/* =========================================================
   8. MOBILE MENÜ (Vantage Off-Canvas)
========================================================= */
body .mobile-nav-frame {
    background: #0B1120 !important;
    padding: 12px !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

body .mobile-nav-frame .title {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    margin: 4px 4px 12px !important;
    padding: 8px 12px 14px !important;
    text-align: left !important;
}
body .mobile-nav-frame .title h3,
body .mobile-nav-frame .title span,
body .mobile-nav-frame > h3 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .3em !important;
    text-transform: uppercase !important;
    color: #22C55E !important;
    text-shadow: none !important;
    text-align: left !important;
}

body .mobile-nav-frame .close,
body .mobile-nav-frame a.close,
body .mobile-nav-frame .title a {
    color: #22C55E !important;
    font-size: 20px !important;
    opacity: 1 !important;
    transition: transform .25s !important;
}
body .mobile-nav-frame .close:hover { transform: rotate(90deg) !important; }

body .mobile-nav-frame form.search,
body .mobile-nav-frame .search,
body .mobile-nav-frame input[type="search"],
body .mobile-nav-frame input[type="text"],
body .mobile-nav-frame .search-form,
body .mobile-nav-frame form[role="search"],
body .mobile-nav-frame .searchform,
body .mobile-nav-frame form {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body .mobile-nav-frame .sub-menu,
body .mobile-nav-frame ul ul,
body .mobile-nav-frame li ul,
body .mobile-nav-frame li.menu-item-has-children > ul {
    display: block !important;
    max-height: none !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

body .mobile-nav-frame li > a::after,
body .mobile-nav-frame .menu-item-has-children > a::after,
body .mobile-nav-frame li.has-children > a::after,
body .mobile-nav-frame a > i,
body .mobile-nav-frame a > span.arrow,
body .mobile-nav-frame .arrow,
body .mobile-nav-frame .mobile-nav-icon {
    display: none !important;
    content: none !important;
}

body .mobile-nav-frame ul,
body .mobile-nav-frame .menu {
    background: transparent !important;
    border: none !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body .mobile-nav-frame ul li,
body .mobile-nav-frame .menu-item {
    background: transparent !important;
    border: none !important;
    margin: 2px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body .mobile-nav-frame ul li a,
body .mobile-nav-frame ul li a.link {
    background: transparent !important;
    color: rgba(255,255,255,.85) !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    padding: 13px 16px !important;
    border: none !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    display: block !important;
    transition: all .2s !important;
}

body .mobile-nav-frame ul li a:hover,
body .mobile-nav-frame ul li a:active,
body .mobile-nav-frame ul li.current-menu-item > a,
body .mobile-nav-frame ul li.current-page-ancestor > a {
    background: rgba(34,197,94,.1) !important;
    color: #22C55E !important;
}

body .mobile-nav-frame ul ul li a,
body .mobile-nav-frame .sub-menu li a {
    padding: 10px 16px 10px 36px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.55) !important;
}
body .mobile-nav-frame ul ul li a::before,
body .mobile-nav-frame .sub-menu li a::before {
    content: '— ' !important;
    display: inline !important;
    color: rgba(255,255,255,.3) !important;
    margin-right: 4px !important;
}

body .mobile-nav-frame > ul > li:last-child > a,
body .mobile-nav-frame .menu > li:last-child > a {
    background: linear-gradient(135deg, rgba(34,197,94,.2), rgba(22,163,74,.15)) !important;
    color: #22C55E !important;
    font-weight: 700 !important;
    margin-top: 12px !important;
    padding: 16px !important;
}

body .mobile-nav-overlay {
    background: rgba(11,17,32,.6) !important;
    backdrop-filter: blur(4px) !important;
}


/* =========================================================
   9. UTILITY
========================================================= */
.w { max-width: 1100px; margin: 0 auto; padding: 0 48px; }
.eye { font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--green); }
.r { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.r.v { opacity: 1; transform: none; }
.r[data-d="1"] { transition-delay: .12s; }
.r[data-d="2"] { transition-delay: .24s; }
.r[data-d="3"] { transition-delay: .36s; }


/* =========================================================
   10. PAGE HERO
========================================================= */
.page-hero {
    position: relative;
    height: 65vh;
    min-height: 440px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.page-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    filter: brightness(.45) saturate(1.1);
}
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11,17,32,.98) 0%, rgba(11,17,32,.6) 40%, transparent 100%),
                linear-gradient(to right, rgba(11,17,32,.5) 0%, transparent 60%);
}
.page-hero-content {
    position: relative;
    z-index: 2;
    padding: 0 48px 120px;
    max-width: 700px;
    margin: 0 auto 0 0;
    width: 100%;
}
.page-hero-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
    margin-bottom: 16px;
}
.page-hero h1 {
    font-size: clamp(44px, 7vw, 96px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .95;
    color: #fff;
}
.page-hero h1 em { font-style: normal; color: var(--green); }
.page-hero-sub {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 300;
    color: rgba(255,255,255,.45);
    max-width: 540px;
    line-height: 1.5;
}


/* =========================================================
   11. SEKTIONEN
========================================================= */
.section {
    padding: 100px 0;
    border-bottom: 1px solid var(--border);
    background: var(--light);
}
.section.alt { background: #ffffff; }

.section-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
    align-items: center;
}
@media(min-width:860px) {
    .section-grid { grid-template-columns: 1fr 1fr; gap: 88px; }
}

h2.section-title {
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
    color: var(--text);
    margin: 20px 0 32px;
}
h2.section-title em { font-style: normal; color: var(--green); }

p.section-text {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--mid);
    margin-bottom: 20px;
}

.section-img { aspect-ratio: 4/3; overflow: hidden; }
.section-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s;
}
.section-img:hover img { transform: scale(1.04); }


/* =========================================================
   12. FEATURES
========================================================= */
.features {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 40px;
    border-top: 1px solid var(--border);
}
.feature {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}
.feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}
.feature-text strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.feature-text span {
    font-size: 14px;
    font-weight: 300;
    color: var(--mid);
}


/* =========================================================
   13. PAKETE
========================================================= */
.pkg-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    margin-top: 64px;
}
@media(min-width:700px) { .pkg-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1000px) { .pkg-grid { grid-template-columns: repeat(4,1fr); } }

.pkg {
    background: #fff;
    border: 1px solid var(--border);
    padding: 40px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color .3s, transform .3s;
}
.pkg:hover { border-color: var(--green); transform: translateY(-4px); }
.pkg-num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--green);
}
.pkg-name {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
    line-height: 1.1;
}
.pkg-tag {
    display: inline-block;
    background: var(--light);
    border: 1px solid var(--border);
    padding: 3px 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--green-d);
    align-self: flex-start;
}
.pkg p {
    font-size: 14px;
    font-weight: 300;
    color: var(--mid);
    line-height: 1.65;
}


/* =========================================================
   14. GENRES / REFERENZEN / PULLQUOTE
========================================================= */
.genre-tag {
    background: var(--light);
    border: 1px solid var(--border);
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--green-d);
}

.refs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    gap: 2px;
    margin-top: 40px;
}
.ref-item {
    background: #fff;
    border: 1px solid var(--border);
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    transition: background .3s, border-color .3s;
}
.ref-item:hover { background: var(--light); border-color: var(--green); }

.pullquote {
    background: linear-gradient(135deg, #0B1120 0%, #0F172A 100%);
    border-left: 4px solid var(--green);
    padding: 48px 52px;
    margin: 64px 0;
}
.pullquote blockquote {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 300;
    font-style: italic;
    color: rgba(255,255,255,.75);
    line-height: 1.5;
    margin-bottom: 20px;
}
.pullquote cite {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--green);
    font-style: normal;
}


/* =========================================================
   15. BEWERTUNGEN
========================================================= */
.review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 64px;
}
@media(min-width:700px) { .review-grid { grid-template-columns: repeat(3,1fr); } }

.review {
    background: #fff;
    border: 1px solid var(--border);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color .3s, transform .3s;
}
.review:hover { border-color: var(--green); transform: translateY(-3px); }
.review-stars { color: var(--green); font-size: 16px; letter-spacing: 2px; }
.review-text {
    font-size: 15px;
    font-weight: 300;
    color: var(--mid);
    line-height: 1.7;
    font-style: italic;
    flex: 1;
}
.review-text strong { font-weight: 700; color: var(--text); font-style: normal; }


/* =========================================================
   16. CTA
========================================================= */
.page-cta { padding: 120px 48px; text-align: center; }
.page-cta h2 {
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: #fff;
    margin: 16px auto 40px;
    max-width: 700px;
}
.page-cta h2 em { font-style: normal; color: var(--green); }

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, var(--green), var(--green-d));
    color: #fff;
    padding: 18px 40px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(34,197,94,.25);
    transition: opacity .3s, gap .3s;
}
.cta-btn::after { content: '→'; }
.cta-btn:hover { opacity: .88; gap: 20px; }
.cta-sub {
    margin-top: 24px;
    font-size: 14px;
    font-weight: 300;
    color: var(--mid);
}


/* =========================================================
   17. YOUTUBE
========================================================= */
.yt-section { background: #0B1120; padding: 100px 0; }
.yt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
    align-items: center;
}
@media(min-width:860px) { .yt-grid { grid-template-columns: 1fr 1.4fr; } }

.yt-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
}
.yt-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* =========================================================
   18. CONTACT FORM 7
========================================================= */
.wpcf7 {
    width: 100%;
    max-width: 700px;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

.wpcf7-form label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    color: #888 !important;
    display: block;
    margin-bottom: 8px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
    width: 100% !important;
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    color: var(--text) !important;
    outline: none !important;
    -webkit-appearance: none !important;
    transition: border-color .3s, box-shadow .3s !important;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    border-color: var(--green) !important;
    box-shadow: 0 0 0 3px rgba(34,197,94,.12) !important;
}

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

.wpcf7-form input[type="submit"] {
    background: linear-gradient(135deg, #22C55E, #16A34A) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 18px 48px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(34,197,94,.25) !important;
}
.wpcf7-form input[type="submit"]:hover { opacity: .88 !important; }

.wpcf7-form input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #22C55E !important;
    margin-right: 10px !important;
}

.wpcf7-mail-sent-ok {
    background: #F0FDF4 !important;
    color: #16A34A !important;
    border-left: 4px solid #22C55E !important;
    padding: 14px 20px !important;
    margin-top: 20px !important;
}
.wpcf7-mail-sent-ng, .wpcf7-validation-errors {
    background: #FEF2F2 !important;
    color: #ef4444 !important;
    border-left: 4px solid #ef4444 !important;
    padding: 14px 20px !important;
    margin-top: 20px !important;
}

@media (max-width: 768px) {
    .wpcf7 { padding: 0 20px !important; }
}


/* =========================================================
   19. WEISSER RAND ÜBER FOOTER ENTFERNEN
========================================================= */
#page-wrapper,
#page,
.site,
#main,
#primary,
.content-area,
article.hentry,
.hentry,
.entry-content,
.site-content,
#content .hentry:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.panel-grid:last-child,
.panel-row-style:last-child,
.so-panel:last-child,
.panel-last-style,
.so-widget-wrapper:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#colophon,
footer.site-footer,
.site-footer {
  margin-top: 0 !important;
}