/* LaunchAmp Analytics: Dienstseiten (2026-10-16). Marineblau #12204A, alles eckig (6 px), keine Pillen oder Plaketten. */
.ax-page { color: #12152B; }
/* Buendig mit LaunchAmps Kopf (.la-shell in header.php: 72rem, Rand 1 / 1,5 rem; ab 1024px 76rem, Rand 1 rem); schmale Abschnitte bleiben linksbuendig. */
.ax-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .ax-wrap { padding: 0 1.5rem; } } @media (min-width: 1024px) { .ax-wrap { max-width: 76rem; padding: 0 1rem; } }
.ax-narrow > * { max-width: 680px; }
.ax-hero { background: linear-gradient(180deg, #12204A, #070D22); color: #fff; padding: 56px 0 48px; }
.ax-hero h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.1; margin: 0 0 14px; font-weight: 700; letter-spacing: -.02em; color: #fff; }   /* style.css faerbt h1-h6 dunkel */
.ax-hero p { font-size: 18px; line-height: 1.5; margin: 0 0 22px; max-width: 640px; color: #D5DBF0; }
.ax-hero p.ax-sub { color: #AEB7D6; margin-top: -10px; overflow-wrap: break-word; }   /* zweiter Absatz im Hero, normale Groesse, etwas gedaempft */
.ax-hero .ax-note { font-size: 13px; color: #AEB7D6; margin: 12px 0 0; }
/* Screenshot rechts im Hero (2026-10-18, Chris): bewusst groesser als bei Product Directory (dort ein Viertel), aber hoechstens 28 rem breit, damit das Bild nicht hoeher wird als der Text und den Hero nicht aufblaeht; unter 1024 px unter dem Text. */
.ax-hero-grid { display: grid; gap: 2.25rem; align-items: center; }
@media (min-width: 1024px) { .ax-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 3rem; } .ax-hero-grid > div:first-child { max-width: 46rem; } }
.ax-win { border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 18px 50px rgba(3,7,20,.45); border: 1px solid rgba(255,255,255,.15); }
.ax-win-bar { display: flex; align-items: center; gap: .35rem; padding: .55rem .75rem; background: #EDEFF5; border-bottom: 1px solid #E1E3EC; }
.ax-win-bar i { width: .6rem; height: .6rem; border-radius: 50%; background: #C9CEDD; }
.ax-win-bar span { margin-left: .6rem; font-size: .72rem; color: #5D6382; }
.ax-win img { display: block; width: 100%; height: auto; }
.ax-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ax-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 6px; font-weight: 600; text-decoration: none; border: 1px solid #12204A; background: #fff; color: #12204A; cursor: pointer; font-family: inherit; font-size: 15px; }
.ax-btn.p { background: #fff; color: #12204A; border-color: #fff; } .ax-hero .ax-btn { border-color: rgba(255,255,255,.5); background: transparent; color: #fff; } .ax-hero .ax-btn.p { background: #fff; color: #12204A; }
.ax-btn.solid { background: #12204A; color: #fff; } .ax-btn:hover { opacity: .92; }
.ax-section { padding: 44px 0; border-bottom: 1px solid #E1E3EC; } .ax-section h2 { font-size: 26px; font-weight: 700; margin: 0 0 16px; letter-spacing: -.01em; }
.ax-section > .ax-wrap > p { line-height: 1.6; color: #444A63; margin: 0 0 12px; }
.ax-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @media (max-width: 760px) { .ax-grid { grid-template-columns: 1fr; } }
.ax-card { background: #fff; border: 1px solid #E1E3EC; border-radius: 6px; padding: 18px 20px; } .ax-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; } .ax-card p { margin: 0; color: #444A63; font-size: 14px; line-height: 1.55; }
.ax-list { margin: 0; padding-left: 20px; line-height: 1.7; columns: 2; column-gap: 32px; list-style: disc; } @media (max-width: 760px) { .ax-list { columns: 1; } }
.ax-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .ax-steps li { counter-increment: s; display: flex; gap: 14px; align-items: flex-start; line-height: 1.55; }
.ax-steps li::before { content: counter(s); flex: none; width: 28px; height: 28px; border-radius: 6px; background: #12204A; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.ax-faq dt { font-weight: 600; margin-top: 16px; } .ax-faq dd { margin: 4px 0 0; color: #444A63; line-height: 1.6; }
.ax-form label { display: block; font-size: 14px; color: #444A63; margin: 14px 0 4px; } .ax-form input[type=text], .ax-form input[type=email] { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #C9CEDD; border-radius: 6px; font: inherit; box-sizing: border-box; }
.ax-form .ax-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-size: 14px; line-height: 1.5; color: #12152B; } .ax-check input { margin-top: 4px; }
.ax-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}   /* Honigtopf: fuer Menschen unsichtbar, nicht display:none */
.ax-err { background: #FCE8E6; border: 1px solid #F5C0BB; color: #A50E0E; border-radius: 6px; padding: 10px 14px; margin: 12px 0; font-size: 14px; } .ax-ok { background: #E6F4EA; border: 1px solid #B7DFC2; color: #0D652D; border-radius: 6px; padding: 10px 14px; margin: 12px 0; }
.ax-code { display: block; background: #F1F3F4; border: 1px solid #DADCE0; border-radius: 6px; padding: 12px 14px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; word-break: break-all; white-space: pre-wrap; }
.ax-note { font-size: 13px; color: #5D6382; line-height: 1.55; }
.ax-page a:not(.ax-btn) { color: #12204A; text-decoration: underline; text-underline-offset: 2px; }
/* Kein-Cookie-Banner-Block nach der Geschichte (Chris, 2026-10-16): seit dem Umbau kleiner gesetzt, keine Plakette. */
.ax-nobanner { background: #E9EDF7; border-bottom-color: #CBD5EA; }
.ax-nobanner h2 { font-size: clamp(22px, 3vw, 24px); color: #12204A; letter-spacing: -.01em; }
.ax-nobanner .ax-wrap > .ax-lead { font-size: 16px; line-height: 1.6; color: #12152B; margin: 0 0 10px; }
.ax-nobanner .ax-wrap > .ax-note { font-size: 13px; color: #5D6382; margin: 0; }
/* "Why I built it" (Chris, 2026-10-16): schlichter Fliesstext in Chris' Worten, kein Zitatschmuck, kein Foto. */
.ax-story .ax-wrap > p { font-size: 17px; line-height: 1.6; color: #12152B; margin: 0; }
/* Bedingungen (terms.php): schlichter Lesetext. */
.ax-legal h1 { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
.ax-legal h2 { font-size: 18px; font-weight: 600; margin: 28px 0 8px; }
.ax-legal p { line-height: 1.65; color: #2B3050; margin: 0 0 10px; }