/* ══════════════════════════════════════════════════════════════
   a24-neu.css – Startseite: Live-Website-Check, Mobil-Leiste,
   Sprunglink. Stand 29.10.2026
   ══════════════════════════════════════════════════════════════ */

/* ── Sprunglink (Barrierefreiheit) ── */
.a24-skip {
    position: absolute; left: 12px; top: -60px; z-index: 100000;
    background: #fff; color: #0F172A !important; padding: 10px 16px;
    border-radius: 8px; font-weight: 600; text-decoration: none;
}
.a24-skip:focus { top: 12px; }

/* ── HERO ── */
.a24-hero { position: relative; overflow: hidden; overflow: clip; }
#hero-text.a24-hero { padding-top: 150px !important; padding-bottom: 90px !important; }
.a24-hero::before {
    content: ""; position: absolute; left: 50%; top: 40%; width: 900px; height: 900px;
    transform: translate(-50%, -50%); pointer-events: none;
    background: radial-gradient(circle, rgba(106,178,207,.16) 0%, rgba(106,178,207,0) 60%);
}
.a24-hero .container { position: relative; z-index: 2; }
.a24-hero .sub-title { display: block; color: #6ab2cf !important; letter-spacing: 3px; font-size: 13px; margin-bottom: 14px; }
.a24-hero h1.title { margin-bottom: 18px; }
.a24-hero-lead { color: rgba(255,255,255,.75); font-size: 18px; line-height: 1.7; max-width: 680px; margin: 0 auto 36px; }

/* ── CHECK-KARTE ── */
.a24-check {
    max-width: 760px; margin: 0 auto; text-align: left;
    background: rgba(255,255,255,.04); border: 1px solid rgba(106,178,207,.35);
    border-radius: 18px; padding: 30px 32px;
    box-shadow: 0 0 0 6px rgba(106,178,207,.05), 0 30px 80px rgba(0,0,0,.35);
    scroll-margin-top: 110px;
}
.a24-check-q { color: #fff; font-size: 22px; font-weight: 700; margin: 0 0 6px; font-family: var(--atf-ff-heading); }
.a24-check-hint { color: rgba(255,255,255,.55); font-size: 14px; margin: 0 0 18px; }
.a24-check-form { display: flex; gap: 10px; }
.a24-check-form input[type=text] {
    flex: 1 1 auto; min-width: 0; height: 58px; border-radius: 12px; border: 2px solid rgba(255,255,255,.15);
    background: #fff; color: #0F172A; font-size: 17px; padding: 0 18px; outline: none;
}
.a24-check-form input[type=text]:focus { border-color: #6ab2cf; box-shadow: 0 0 0 4px rgba(106,178,207,.3); }
.a24-check-btn {
    flex: 0 0 auto; height: 58px; padding: 0 26px; border: 0; border-radius: 12px; cursor: pointer;
    background: #f59e0b; color: #0F172A; font-weight: 800; font-size: 17px; white-space: nowrap;
    transition: background .2s, transform .2s;
}
.a24-check-btn:hover { background: #e08f0a; transform: translateY(-1px); }
.a24-check-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.a24-check-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.5; }
.a24-check-consent input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: #6ab2cf; }
.a24-check-consent a { color: #6ab2cf; text-decoration: underline; }
.a24-check-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 0; list-style: none; color: rgba(255,255,255,.55); font-size: 13px; }
.a24-check-meta li::before { content: "✓ "; color: #6ab2cf; font-weight: 700; }
.a24-check-error { display: none; margin: 12px 0 0; color: #fca5a5; font-size: 14px; }

/* Fortschritt */
.a24-check-progress { display: none; text-align: center; padding: 10px 0; }
.a24-radar {
    width: 120px; height: 120px; margin: 0 auto 18px; border-radius: 50%; position: relative;
    border: 2px solid rgba(106,178,207,.35);
    background: radial-gradient(circle, rgba(106,178,207,.12) 0%, transparent 65%);
}
.a24-radar::after {
    content: ""; position: absolute; inset: -2px; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(106,178,207,.75), rgba(106,178,207,0) 25%);
    animation: a24spin 1.6s linear infinite;
    -webkit-mask: radial-gradient(circle, transparent 0 56px, #000 57px); mask: radial-gradient(circle, transparent 0 56px, #000 57px);
}
@keyframes a24spin { to { transform: rotate(360deg); } }
.a24-progress-domain { color: #fff; font-weight: 700; font-size: 18px; margin: 0 0 4px; }
.a24-progress-status { color: rgba(255,255,255,.65); font-size: 15px; margin: 0 0 14px; min-height: 24px; }
.a24-progress-bar { height: 6px; background: rgba(255,255,255,.1); border-radius: 6px; overflow: hidden; max-width: 420px; margin: 0 auto; }
.a24-progress-bar span { display: block; height: 100%; width: 0; background: #6ab2cf; transition: width 1.2s ease; }

/* Ergebnis */
.a24-check-result { display: none; }
.a24-result-head { display: flex; align-items: center; gap: 22px; margin-bottom: 20px; }
.a24-ring { --v: 0; --c: #6ab2cf; width: 120px; height: 120px; flex: 0 0 120px; border-radius: 50%; position: relative;
    background: conic-gradient(var(--c) calc(var(--v) * 1%), rgba(255,255,255,.1) 0); }
.a24-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #111a2e; }
.a24-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 36px; font-weight: 800; }
.a24-result-domain { color: #6ab2cf; font-size: 14px; margin: 0 0 4px; word-break: break-all; }
.a24-result-verdict { color: #fff; font-size: 20px; font-weight: 700; line-height: 1.35; margin: 0; }
.a24-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin: 0 0 18px; }
.a24-cat { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.a24-cat-label { color: rgba(255,255,255,.8); font-size: 14px; }
.a24-cat-val { font-weight: 800; font-size: 15px; }
.a24-cat-bar { grid-column: 1 / -1; height: 6px; background: rgba(255,255,255,.1); border-radius: 6px; overflow: hidden; }
.a24-cat-bar span { display: block; height: 100%; width: 0; border-radius: 6px; transition: width 1s ease .2s; }
.a24-result-tip { background: rgba(245,158,11,.1); border-left: 3px solid #f59e0b; color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.6; padding: 12px 14px; border-radius: 0 10px 10px 0; margin: 0 0 20px; }
.a24-result-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.a24-result-cta a { flex: 1 1 240px; text-align: center; padding: 16px 18px; border-radius: 12px; font-weight: 700; text-decoration: none !important; }
.a24-cta-pdf { background: #f59e0b; color: #0F172A !important; }
.a24-cta-pdf:hover { background: #e08f0a; }
.a24-cta-talk { background: #fff; color: #0F172A !important; }
.a24-cta-talk:hover { background: #e2e8f0; }
.a24-result-note { color: rgba(255,255,255,.4); font-size: 12px; margin: 14px 0 0; }
.a24-result-again { background: none; border: 0; color: #6ab2cf; text-decoration: underline; cursor: pointer; padding: 0; font-size: 13px; }

.a24-hero-alt { margin: 26px 0 0; color: rgba(255,255,255,.6); font-size: 15px; }
.a24-hero-alt a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid #6ab2cf; }

/* ── Desktop-Tab: ausblenden, wenn der Check sichtbar ist ── */
.schnellcheck-tab { transition: opacity .3s, transform .3s; }
body.a24-check-visible .schnellcheck-tab { opacity: 0; transform: translateX(-110%); pointer-events: none; }

/* ── Mobil-Leiste ── */
.a24-mobilebar { display: none; }
@media (max-width: 767px) {
    #hero-text.a24-hero { padding-top: 125px !important; padding-bottom: 60px !important; }
    .a24-hero-lead { font-size: 16px; margin-bottom: 26px; }
    .a24-check { padding: 22px 18px; border-radius: 16px; }
    .a24-check-q { font-size: 19px; }
    .a24-check-form { flex-direction: column; }
    .a24-check-btn { width: 100%; }
    .a24-result-head { gap: 16px; }
    .a24-ring { width: 96px; height: 96px; flex-basis: 96px; }
    .a24-ring b { font-size: 28px; }
    .a24-result-verdict { font-size: 17px; }
    .a24-cats { grid-template-columns: 1fr; }

    .schnellcheck-tab { display: none !important; }
    .a24-mobilebar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
        height: 60px; padding-bottom: env(safe-area-inset-bottom);
        background: #0F172A; border-top: 1px solid rgba(255,255,255,.12);
        box-shadow: 0 -6px 24px rgba(0,0,0,.25); transition: transform .3s;
    }
    .a24-mobilebar a { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; text-decoration: none !important; }
    .a24-mb-check { flex: 1 1 auto; background: #f59e0b; color: #0F172A !important; }
    .a24-mb-call { flex: 0 0 38%; color: #fff !important; }
    body.a24-check-visible .a24-mobilebar { transform: translateY(110%); }
    body { padding-bottom: 60px; }
    #back_to_top.active { top: calc(100% - 140px); }
}
@media (prefers-reduced-motion: reduce) {
    .a24-radar::after { animation: none; }
    .a24-progress-bar span, .a24-cat-bar span { transition: none; }
}
/* ── Schritt C (29.10.2026): Über mich, CTA-Telefon, Kontraste ── */
.a24-about-photo { border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.a24-about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.a24-about-facts { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.a24-about-facts li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; border-radius: 40px; padding: 8px 16px; font-size: 14px; }
.a24-cta-phone {
    flex: 0 0 auto; width: 140px; height: 140px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #6ab2cf; color: #0F172A !important; font-size: 54px; text-decoration: none !important;
    box-shadow: 0 0 0 10px rgba(106,178,207,.18), 0 0 0 22px rgba(106,178,207,.08); transition: transform .2s;
}
.a24-cta-phone:hover { transform: scale(1.05); }
.a24-cta-tel { color: #6ab2cf !important; text-decoration: underline; font-weight: 700; }
.atf-portfolio-subtitle { color: #475569 !important; }
.copyright a, .footer-copyright a { text-decoration: underline; }
/* Kontraste (WCAG AA) – Über mich und Newsletter liegen auf Hellblau #6ab2cf → dunkle Schrift */
#about.atf-about-area .title, #about.atf-about-area p, #about.atf-about-area .text-white { color: #0F172A !important; opacity: 1 !important; }
#about .a24-about-facts li { background: rgba(15,23,42,.08); border-color: rgba(15,23,42,.25); color: #0F172A; }
.atf-newsletter .privacy-text, .atf-newsletter label, .atf-newsletter label a { color: #0F172A !important; }
.footer-legal-list a[href="login"] { opacity: .8 !important; }
footer p a[href*="andi24.de"] { text-decoration: underline; }
.aoc .aoc-text a { color: #1d5f7a !important; text-decoration: underline; }
/* Kundenstimmen: nur echte Kunden – drei Avatare kreisen langsam um den Stern (keiner dauerhaft oben) */
section#client .circle-graphic { --r: 128px; }
section#client .a24-orbit { position: absolute; inset: 0; animation: a24orbit 40s linear infinite; }
section#client .a24-orbit .avatar {
    top: 50%; left: 50%; right: auto; bottom: auto; margin: -40px 0 0 -40px;
    transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
    animation: a24counter 40s linear infinite;
}
section#client .a24-orbit .avatar:nth-child(1) { --a: 0deg; }
section#client .a24-orbit .avatar:nth-child(2) { --a: 120deg; }
section#client .a24-orbit .avatar:nth-child(3) { --a: 240deg; }
section#client .a24-orbit .avatar:hover { filter: brightness(1.08); }
section#client .circle-graphic:hover .a24-orbit,
section#client .circle-graphic:hover .a24-orbit .avatar { animation-play-state: paused; }
@keyframes a24orbit { to { transform: rotate(360deg); } }
@keyframes a24counter {
    from { transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); }
    to   { transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a) - 360deg)); }
}
@media (max-width: 767px) { section#client .circle-graphic { --r: 118px; } }
@media (prefers-reduced-motion: reduce) {
    section#client .a24-orbit, section#client .a24-orbit .avatar { animation: none; }
}


/* ===== Kontaktformular mobil (29.10.2026) ===== */
.form-check:has(> #privacy-check){display:flex;align-items:flex-start;gap:12px}
#privacy-check{float:none;flex:0 0 20px;margin:3px 0 0 !important}
#privacy-check + .form-check-label{margin:0}
.h-captcha{max-width:100%}
@media (max-width:575px){
  div:has(> #ajax-contact-form-page){padding:22px 18px !important}
}

/* Druck-Lexikon-Links auf Leistungsseiten (31.10.2026) */
.a24-lexlink{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:14px;font-weight:600;color:#0a6f99;text-decoration:underline;text-underline-offset:3px}
.a24-lexlink:hover,.a24-lexlink:focus-visible{color:#E5007E}
.service-card-transparent .a24-lexlink{color:#9fd3ea}
.service-card-transparent .a24-lexlink:hover,.service-card-transparent .a24-lexlink:focus-visible{color:#fff}
.row:has(.a24-lexlink) > [class*="col-"] > .service-card-transparent,.row:has(.a24-lexlink) > [class*="col-"] > .service-card-small{height:100%}