/* ============================================================
   ARBEITGEBER OHNE SITZ IN DEUTSCHLAND, Prefix aaod- (Figur aaodf-)
   Gilt fuer /arbeitgeber-ohne-sitz-in-deutschland.
   Gebaut 2026-10-22 nach dem Regelwerk ohne KI-Look: Navy flat, keine
   Verlaeufe und Schatten, Kapitelmarken links, Listen mit Haarlinien,
   Radien hoechstens 6 px, Hover nur bei Links.
   ============================================================ */

/* ---------- Hero ---------- */
.aaod-hero { background: #1e3a5f; padding: 100px 0 80px; }
.aaod-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.aaod-kicker {
    display: block;
    margin: 0 0 18px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    color: #93c5fd;
}
.aaod-hero h1 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 0 22px;
}
.aaod-hero-sub {
    max-width: 540px;
    margin: 0 0 30px;
    font-size: 1.1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.85);
}
.aaod-hero-fakten {
    max-width: 540px;
    margin: 0 0 32px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 1rem;
    line-height: 1.7;
    color: #ffffff;
}
.aaod-hero-fakten strong { font-variant-numeric: tabular-nums; }
.aaod-hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.aaod-btn-white,
.aaod-btn-outline {
    display: inline-block;
    padding: 15px 32px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}
.aaod-btn-white { background: #ffffff; color: #1e3a5f; }
.aaod-btn-white:hover { background: #dbeafe; }
.aaod-btn-outline { border: 2px solid rgba(255, 255, 255, 0.6); color: #ffffff; padding: 13px 30px; }
.aaod-btn-outline:hover { border-color: #ffffff; }

/* ---- Hero-Figur: das Anmeldeformular (Prefix aaodf-) ----
   Vier Registrierungen, die ein auslaendischer Arbeitgeber in Deutschland
   braucht, als Formularzeilen mit Kaestchen. Die Kaestchen fuellen sich
   nacheinander, dann erscheint der Haken. Keine echten Nummern, die
   Kaestchen bleiben leer gefuellt (keine Zahl ohne Beleg).
   Hintergrund der Figur ca. #284366: Kaestchen #93c5fd (6,1:1),
   Haken #6ee7b7 (7,0:1), Beschriftung rgba(255,255,255,.72). */
.aaod-hero-visual { display: flex; justify-content: flex-end; }
.aaodf { width: 100%; max-width: 470px; }
.aaodf-liste { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.aaodf-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    gap: 4px 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.aaodf-zeile:last-child { border-bottom: 0; }
.aaodf-name { font-size: 0.86rem; font-weight: 700; color: #ffffff; line-height: 1.3; }
.aaodf-stelle { display: block; font-size: 0.72rem; font-weight: 500; color: rgba(255, 255, 255, 0.72); }
.aaodf-felder { display: flex; gap: 3px; }
.aaodf-felder span {
    display: block;
    width: 13px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    animation: aaodf-fuell 0.25s ease-out forwards;
    animation-delay: calc(0.4s + var(--i) * 0.07s);
}
.aaodf-haken {
    width: 18px;
    height: 18px;
    color: #6ee7b7;
    opacity: 0;
    animation: lk-figure-ein 0.3s ease-out forwards;
    animation-delay: calc(0.4s + var(--h) * 0.07s);
}
@keyframes aaodf-fuell {
    to { background: #93c5fd; border-color: #93c5fd; }
}
@media (prefers-reduced-motion: reduce) {
    .aaodf-felder span { animation: none; background: #93c5fd; border-color: #93c5fd; }
    .aaodf-haken { animation: none; opacity: 1; }
}

/* ---------- Abschnitte ---------- */
.aaod-section { padding: 80px 0; background: #ffffff; }
.aaod-section--grau { background: #f8fafc; }
.aaod-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.aaod-kopf { max-width: 720px; margin: 0 0 40px; }
.aaod-kopf h2 {
    font-size: clamp(1.7rem, 3.5vw, 2.3rem);
    font-weight: 800;
    line-height: 1.2;
    color: #1f2937;
    margin: 0 0 12px;
}
.aaod-kopf p { margin: 0; font-size: 1.05rem; line-height: 1.7; color: #4b5563; }
.aaod-text { max-width: 760px; }
.aaod-text p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.75; color: #4b5563; }
.aaod-text a,
.aaod-liste a,
.aaod-ablauf a,
.aaod-note a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 3px; }

/* Liste mit Haarlinien: Begriff links, Erklaerung rechts */
.aaod-liste { margin: 0; max-width: 1000px; border-top: 1px solid #e2e8f0; }
.aaod-liste-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 8px 40px;
    padding: 20px 0;
    border-bottom: 1px solid #e2e8f0;
}
.aaod-liste dt { font-size: 1.02rem; font-weight: 700; line-height: 1.45; color: #1f2937; }
.aaod-liste dd { margin: 0; font-size: 0.97rem; line-height: 1.7; color: #4b5563; }

/* Zwei Spalten: passt / passt nicht */
.aaod-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1000px; }
.aaod-zwei h3 {
    margin: 0 0 14px;
    padding-top: 14px;
    border-top: 2px solid #1e3a5f;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
}
.aaod-zwei-nein h3 { border-top-color: #9ca3af; }
.aaod-zwei ul { margin: 0; padding: 0 0 0 1.1rem; }
.aaod-zwei li { margin: 0 0 10px; font-size: 0.97rem; line-height: 1.65; color: #4b5563; }

/* Preistabelle */
.aaod-tabelle-wrap {
    max-width: 1000px;
    overflow-x: auto;
    margin: 0 0 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #ffffff;
}
.aaod-tabelle { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.95rem; }
.aaod-tabelle th,
.aaod-tabelle td {
    padding: 14px 18px;
    border-bottom: 1px solid #eef2f7;
    text-align: right;
    color: #4b5563;
    font-variant-numeric: tabular-nums;
}
.aaod-tabelle th:first-child,
.aaod-tabelle td:first-child { text-align: left; }
.aaod-tabelle thead th { font-size: 0.82rem; font-weight: 700; color: #1f2937; background: #f8fafc; }
.aaod-tabelle tbody tr:last-child td { border-bottom: 0; }
.aaod-tabelle td:first-child { font-weight: 700; color: #1f2937; }
.aaod-tabelle td span { display: block; font-size: 0.8rem; font-weight: 400; color: #6b7280; }
.aaod-tabelle .aaod-lk { font-weight: 800; color: #1e40af; background: #eff6ff; }
.aaod-note { max-width: 1000px; margin: 0 0 2rem; font-size: 0.88rem; line-height: 1.65; color: #6b7280; }

/* Ablauf */
.aaod-ablauf {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 1000px;
    counter-reset: aaod-schritt;
    border-top: 2px solid #1e3a5f;
}
.aaod-ablauf li {
    counter-increment: aaod-schritt;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0 16px;
    padding: 20px 0;
    border-bottom: 1px solid #e2e8f0;
}
.aaod-ablauf li::before {
    content: counter(aaod-schritt, decimal-leading-zero);
    font-size: 0.95rem;
    font-weight: 700;
    color: #1d4ed8;
    font-variant-numeric: tabular-nums;
}
.aaod-ablauf h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 700; color: #1f2937; }
.aaod-ablauf p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: #4b5563; }
.aaod-wer { font-weight: 600; color: #1f2937; }

/* Zitate: globale .stbvv-anchor-box, hier nur links ausgerichtet */
.aaod-section .stbvv-anchor-box { max-width: 1000px; margin: 0 0 1.5rem; }

/* FAQ: globale .faq-item mit toggleFAQ */
.aaod-faq { max-width: 860px; }

/* Abschluss */
.aaod-cta { background: #1e3a5f; padding: 80px 0; }
.aaod-cta h2 { margin: 0 0 16px; font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; color: #ffffff; }
.aaod-cta p { max-width: 640px; margin: 0 0 28px; font-size: 1.08rem; line-height: 1.75; color: rgba(255, 255, 255, 0.85); }
.aaod-cta-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.aaod-cta-meta { font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); }
.aaod-cta a.aaod-mail { color: #ffffff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .aaod-hero-container { grid-template-columns: 1fr; gap: 40px; }
    .aaod-hero-visual { justify-content: flex-start; }
    .aaod-hero { padding: 70px 0 60px; }
    .aaod-zwei { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
    .aaod-liste-zeile { grid-template-columns: 1fr; gap: 6px; }
    .aaod-section, .aaod-cta { padding: 60px 0; }
}
@media (max-width: 480px) {
    .aaod-tabelle { min-width: 0; font-size: 0.82rem; }
    .aaod-tabelle th, .aaod-tabelle td { padding: 10px 8px; }
    .aaodf-felder { gap: 2px; }
    .aaodf-felder span { width: 9px; height: 15px; }
    .aaod-ablauf li { grid-template-columns: 36px minmax(0, 1fr); gap: 0 10px; }
}