/* ============================================================
   AutoDM - Custom CSS für GHL
   Einfügen: Funnel → Seite → Settings (Zahnrad) → Custom CSS
   Einmal pro Seite. Die HTML-Snippets 1-6 nutzen diese Styles.
   ============================================================ */
/* Schriften-Import: in GHL wirkungslos (stand nicht am Anfang des <style>), live laufen daher Systemschriften.
   Zum Aktivieren von Inter + JetBrains Mono diese Zeile wieder einkommentieren:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');
*/

:root {
    --adm-black: #050604;
    --adm-surface: #0B0F0B;
    --adm-surface-2: #0F1710;
    --adm-green: #004225;
    --adm-green-soft: #0A5C36;
    --adm-gold: #D4AF37;
    --adm-gold-soft: #E8CE7A;
    --adm-text: #F4F2EC;
    --adm-text-dim: #9BA095;
    --adm-line: rgba(212, 175, 55, 0.16);
    --adm-line-green: rgba(10, 92, 54, 0.45);
    --adm-radius: 14px;
}

/* GHL-Grundfläche schwarz, kein horizontales Scrollen */
body, .hl_page-preview--content {
    background: var(--adm-black) !important;
}

body {
    overflow-x: hidden;
}

.c-section, .c-row, .c-column {
    max-width: 100vw;
    overflow-x: clip;
}

/* Basis innerhalb der Snippets */
.adm * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.adm {
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--adm-text);
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    background: var(--adm-black);
    padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.adm img {
    max-width: 100%;
    display: block;
}

.adm-wrap {
    width: min(100% - 2.5rem, 1080px);
    margin-inline: auto;
}

.adm-wrap-narrow {
    width: min(100% - 2.5rem, 760px);
    margin-inline: auto;
}

/* Typografie */
.adm-display {
    font-weight: 800;
    font-size: clamp(1.85rem, 4vw + 1rem, 3.3rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

h2.adm-display, .adm-h2 {
    font-size: clamp(1.55rem, 2.6vw + 0.8rem, 2.4rem);
}

.adm-gold {
    color: var(--adm-gold);
}

.adm-mono-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--adm-gold);
    margin-bottom: 1.1rem;
}

.adm-mono-label::before {
    content: "// ";
    color: var(--adm-text-dim);
}

.adm-lead {
    color: var(--adm-text-dim);
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    max-width: 46ch;
}

/* Schritt-Chip */
.adm-step-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--adm-surface);
    border: 1px solid var(--adm-line-green);
    border-radius: 999px;
    padding: 0.45rem 1.15rem 0.45rem 0.55rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: lowercase;
    color: var(--adm-text);
}

.adm-step-chip .adm-num {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--adm-green);
    border: 1px solid var(--adm-line);
    color: var(--adm-gold);
    font-weight: 700;
    font-size: 0.8rem;
}

/* CTA-Button */
.adm-btn {
    display: inline-block;
    background: linear-gradient(160deg, var(--adm-green-soft), var(--adm-green) 60%);
    color: var(--adm-gold-soft) !important;
    border: 1px solid rgba(212, 175, 55, 0.4);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    padding: 1.05rem 2.6rem;
    border-radius: 10px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    box-shadow: 0 10px 30px rgba(0, 66, 37, 0.45);
}

.adm-btn:hover {
    transform: translateY(-2px);
    border-color: var(--adm-gold);
    box-shadow: 0 14px 38px rgba(0, 66, 37, 0.65);
}

.adm-btn-note {
    margin-top: 0.85rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    text-transform: lowercase;
    color: var(--adm-text-dim);
}

.adm-cta {
    text-align: center;
}

/* Hero */
.adm-hero {
    position: relative;
    text-align: center;
}

.adm-hero::before {
    content: "";
    position: absolute;
    inset: -25% -30% auto -30%;
    height: 75vh;
    background: radial-gradient(ellipse 55% 50% at 50% 0%, rgba(0, 66, 37, 0.45), transparent 70%);
    pointer-events: none;
}

.adm-hero > * {
    position: relative;
}

.adm-wordmark {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
}

.adm-wordmark .adm-tld {
    color: var(--adm-gold);
}

.adm-hero .adm-display {
    margin-bottom: 1.2rem;
}

.adm-hero .adm-lead {
    margin: 0 auto 2.2rem;
}

.adm-hero .adm-step-chip {
    margin-bottom: 1.5rem;
}

/* Video-Rahmen (um GHL-Video oder iframe-Embed) */
.adm-video-frame {
    position: relative;
    max-width: 880px;
    margin-inline: auto;
    border-radius: var(--adm-radius);
    overflow: hidden;
    border: 1px solid var(--adm-line);
    background: radial-gradient(ellipse at 50% 130%, rgba(0, 66, 37, 0.55), transparent 65%), var(--adm-surface);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.adm-video-frame iframe, .adm-video-frame video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.adm-video-slot {
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    text-transform: lowercase;
    color: var(--adm-text-dim);
}

/* Benefits */
.adm-head {
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 3.2rem);
}

.adm-head .adm-step-chip {
    margin-bottom: 1.4rem;
}

.adm-benefits {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 720px) {
    .adm-benefits {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
    }
}

.adm-benefit {
    background: var(--adm-surface);
    border: 1px solid var(--adm-line-green);
    border-radius: var(--adm-radius);
    padding: 1.8rem 1.5rem;
}

.adm-benefit .adm-idx {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--adm-gold);
    display: block;
    margin-bottom: 0.9rem;
}

.adm-benefit h3 {
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

.adm-benefit p {
    color: var(--adm-text-dim);
    font-size: 0.94rem;
}

.adm-benefit strong {
    color: var(--adm-gold-soft);
    font-weight: 600;
}

/* Booking-Rahmen (um GHL-Kalender-Embed) */
.adm-booking {
    background: var(--adm-surface);
    border: 1px solid var(--adm-line);
    border-radius: var(--adm-radius);
    padding: clamp(0.8rem, 2vw, 1.2rem);
    margin-bottom: 2.5rem;
}

.adm-booking iframe {
    display: block;
    width: 100%;
    min-height: 640px;
    border: 0;
    border-radius: 8px;
}

/* Case Studies (Longform) */
.adm-cases {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: 1fr;
}

@media (min-width: 860px) {
    .adm-cases {
        grid-template-columns: 1fr 1fr;
        gap: 1.4rem;
    }
}

.adm-case {
    background: var(--adm-surface);
    border: 1px solid var(--adm-line-green);
    border-radius: var(--adm-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.adm-case .adm-video-frame {
    max-width: none;
    width: 100%;
    margin: 0;
    flex-shrink: 0;
    border: none;
    border-bottom: 1px solid var(--adm-line-green);
    border-radius: 0;
    box-shadow: none;
}

.adm-case .adm-body {
    padding: 1.5rem 1.5rem 1.7rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.adm-case .adm-who {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    text-transform: lowercase;
    color: var(--adm-gold);
    margin-bottom: 0.5rem;
}

.adm-case h3 {
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.015em;
    margin-bottom: 1rem;
}

.adm-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-top: auto;
}

.adm-stat {
    background: var(--adm-black);
    border: 1px solid var(--adm-line-green);
    border-radius: 10px;
    padding: 0.85rem 1rem;
}

.adm-stat .adm-value {
    font-weight: 800;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    letter-spacing: -0.02em;
    color: var(--adm-gold);
    line-height: 1.15;
}

.adm-stat .adm-label {
    font-size: 0.8rem;
    color: var(--adm-text-dim);
    margin-top: 0.1rem;
    line-height: 1.4;
}

/* Shortform */
.adm-shorts {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}

@media (min-width: 860px) {
    .adm-shorts {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.2rem;
    }
}

.adm-short {
    background: var(--adm-surface);
    border: 1px solid var(--adm-line-green);
    border-radius: var(--adm-radius);
    overflow: hidden;
}

.adm-short .adm-clip {
    position: relative;
    aspect-ratio: 9 / 16;
    background: radial-gradient(ellipse at 50% 120%, rgba(0, 66, 37, 0.5), transparent 65%), var(--adm-surface-2);
}

.adm-short .adm-clip iframe, .adm-short .adm-clip video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.adm-short .adm-clip .adm-video-slot {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

.adm-short .adm-meta {
    padding: 0.85rem 1rem 1rem;
}

.adm-short .adm-name {
    font-weight: 700;
    font-size: 0.9rem;
}

.adm-short .adm-result {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    text-transform: lowercase;
    color: var(--adm-gold);
    margin-top: 0.15rem;
}

/* Garantie */
.adm-guarantee {
    text-align: center;
    position: relative;
}

.adm-guarantee::before {
    content: "";
    position: absolute;
    inset: 0 -30%;
    background: radial-gradient(ellipse 50% 60% at 50% 60%, rgba(0, 66, 37, 0.35), transparent 70%);
    pointer-events: none;
}

.adm-guarantee > div {
    position: relative;
}

.adm-guarantee .adm-display {
    margin-bottom: 1.6rem;
}

.adm-badge {
    display: inline-block;
    background: var(--adm-surface);
    border: 1px solid var(--adm-line);
    border-radius: var(--adm-radius);
    padding: 1.4rem 2rem;
    margin-bottom: 2.4rem;
}

.adm-badge .adm-big {
    font-weight: 800;
    font-size: clamp(1.3rem, 2.8vw, 1.8rem);
    letter-spacing: -0.02em;
    color: var(--adm-gold);
}

.adm-badge .adm-small {
    font-size: 0.95rem;
    color: var(--adm-text-dim);
    margin-top: 0.3rem;
    max-width: 40ch;
}

/* Footer */
.adm-footer {
    border-top: 1px solid var(--adm-line-green);
    padding: 2rem 0 2.5rem;
    text-align: center;
}

.adm-footer .adm-links {
    display: flex;
    justify-content: center;
    gap: 1.8rem;
    flex-wrap: wrap;
}

.adm-footer a {
    color: var(--adm-text-dim);
    text-decoration: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    text-transform: lowercase;
}

.adm-footer a:hover {
    color: var(--adm-gold);
}

.adm-footer .adm-copy {
    margin-top: 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    text-transform: lowercase;
    color: rgba(155, 160, 149, 0.5);
}

.adm-divider {
    border: none;
    border-top: 1px solid var(--adm-line-green);
    width: min(100% - 2.5rem, 1080px);
    margin-inline: auto;
}