/* ============================================================
   Anschlussfinanzierung.one — Mobile.css v2 (Professional)
   Ergänzung zu style.css — Mobile-first Korrekturen
   ============================================================ */

/* === 1. GLOBAL === */
html {
  overflow-x: clip;
}
/* Sicherstellen dass Container nie überläuft */
@media (max-width: 767px) {
  .container {
    padding: 0 16px;
  }
  /* Alle Sections kompakter */
  .af-section {
    padding: 40px 0;
  }
  .af-section--lg {
    padding: 48px 0;
  }
  .af-section--sm {
    padding: 28px 0;
  }
  /* Section Heads kompakter */
  .af-section__head {
    margin-bottom: 32px;
  }
  .af-section__head h2 {
    font-size: 1.5rem;
    margin-bottom: 8px;
  }
  .af-section__head p {
    font-size: .92rem;
  }
}

/* === 2. HEADER === */
@media (max-width: 767px) {
  :root { --header-h: 56px; }
  .af-logo__text {
    font-size: .8rem;
    letter-spacing: -.02em;
  }
  /* Header inner: logo left, burger right, no gap overflow */
  .af-header__inner {
    gap: 0;
  }
  .af-header__actions {
    margin-left: auto;
    gap: 8px;
  }
  /* Burger größer für besseres Tap-Target */
  .af-burger {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* === 3. MOBILE NAV — bereits gut, kleine Verbesserungen === */
@media (max-width: 767px) {
  .af-mobile-nav {
    width: 100vw; /* Full-width auf Phone */
  }
}
@media (min-width: 400px) {
  .af-mobile-nav {
    width: min(380px, 95vw);
  }
}

/* === 4. HOMEPAGE — HERO (h-hero) === */
@media (max-width: 767px) {
  /* Hero kompakter */
  .h-hero {
    padding: 36px 0 0 !important;
  }
  /* Eyebrow kleiner */
  .h-hero__eyebrow {
    font-size: .72rem !important;
    padding: 4px 12px !important;
    margin-bottom: 14px !important;
  }
  /* H1 kompakter */
  .h-hero h1 {
    font-size: 1.65rem !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em !important;
    margin-bottom: 14px !important;
  }
  /* Tagline */
  .h-hero__tagline {
    font-size: .9rem !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
  }
  /* Savings Strip: Stack auf Mobile */
  .h-savings-strip {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .h-savings-strip__label {
    font-size: .8rem !important;
  }
  .h-savings-strip__input {
    width: 100% !important;
    font-size: 1.05rem !important;
    padding: 10px 14px !important;
  }
  .h-savings-strip__unit {
    display: none !important;
  }
  .h-savings-strip__result {
    width: 100% !important;
    text-align: left !important;
    padding: 10px 14px !important;
  }
  /* CTAs */
  .h-hero__ctas {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .btn-teal,
  .btn-ghost-white {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    font-size: .95rem !important;
  }
  /* Promise items in a row */
  .h-promise__inner {
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
  .h-promise__item {
    font-size: .78rem !important;
  }
  /* Calc Card: bleibt sichtbar, wird kompakter */
  .h-calc-card {
    padding: 18px 16px !important;
    margin-top: 24px !important;
  }
  .h-calc-card__title {
    font-size: .82rem !important;
    padding: 8px 12px !important;
    margin-bottom: 14px !important;
  }
  /* Calc Grid: 1 Spalte */
  .h-calc-grid2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* === 5. HOMEPAGE — ZINSTABELLE (KRITISCH: min-width:580px) === */
/* Kein Zugriff auf inline-style, deshalb Spalten auf Handy ausblenden */
@media (max-width: 579px) {
  /* "Typ" Spalte (2. Spalte) ausblenden */
  table td:nth-child(2),
  table th:nth-child(2) {
    display: none !important;
  }
  /* "Stärke" Spalte (5. Spalte) ausblenden */
  table td:nth-child(5),
  table th:nth-child(5) {
    display: none !important;
  }
  /* Padding der Zellen reduzieren */
  table td, table th {
    padding: 12px 8px !important;
  }
  /* CTA-Button in letzter Spalte: kleiner */
  table td:last-child a {
    padding: 6px 10px !important;
    font-size: .75rem !important;
  }
  /* Logo-Boxes im Anbieter-Namen: kleiner */
  table td:first-child > div > div:first-child {
    width: 30px !important;
    height: 30px !important;
    font-size: .68rem !important;
  }
}
/* Auf etwas breiteren Handys: min-width reduzieren */
@media (max-width: 767px) {
  .container div[style*="overflow-x:auto"] {
    border-radius: 12px !important;
  }
}

/* === 6. HOMEPAGE — PICKER GRID === */
@media (max-width: 539px) {
  .h-picker-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .h-picker-card {
    padding: 16px 12px !important;
    gap: 8px !important;
    border-radius: 14px !important;
  }
  .h-picker-card__title {
    font-size: .88rem !important;
  }
  .h-picker-card__desc {
    font-size: .75rem !important;
  }
}
@media (max-width: 359px) {
  .h-picker-grid {
    grid-template-columns: 1fr !important;
  }
}

/* === 7. HOMEPAGE — TESTIMONIALS === */
@media (max-width: 767px) {
  .h-testi-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .h-testi-card {
    padding: 20px 18px !important;
    border-radius: 16px !important;
  }
  .h-testi-card__quote {
    font-size: .88rem !important;
  }
}

/* === 8. HOMEPAGE — ANBIETER CARDS === */
@media (max-width: 767px) {
  .h-anbieter-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .h-anbieter-card {
    padding: 20px 18px !important;
  }
  .h-anbieter-card__zins {
    font-size: 1.6rem !important;
  }
  .h-anbieter-card__cta {
    padding: 12px 16px !important;
    font-size: .88rem !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* === 9. HOMEPAGE — TRUST STATS === */
@media (max-width: 767px) {
  .h-trust__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .h-trust-item__num {
    font-size: 1.6rem !important;
  }
}

/* === 10. HOMEPAGE — HUB PILLARS === */
@media (max-width: 767px) {
  .h-hub-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .h-hub-pillar {
    padding: 20px 18px !important;
  }
}

/* === 11. HOMEPAGE — SECTION HEADINGS === */
@media (max-width: 767px) {
  .h-section-title {
    font-size: 1.45rem !important;
    line-height: 1.25 !important;
  }
  .h-section-sub {
    font-size: .88rem !important;
  }
  /* Section header mit Flex: Stack auf mobile */
  .container > div[style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
}

/* === 12. POST SEITEN — KRITISCH === */
@media (max-width: 1023px) {
  /* Post Layout: Full-width ohne Sidebar */
  .af-post-layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 28px 0 40px !important;
  }
  /* Sidebar auf Mobile komplett ausblenden */
  .af-sidebar {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* Post Header */
  .af-post__header {
    margin-bottom: 20px !important;
  }
  .af-post__title {
    font-size: 1.5rem !important;
    line-height: 1.22 !important;
    margin-bottom: 12px !important;
  }
  /* Post Excerpt (lead text) */
  .af-post__header p[style*="1.1rem"] {
    font-size: .95rem !important;
    line-height: 1.65 !important;
  }
  /* Post Hero Image */
  .af-post__hero-img img {
    border-radius: 12px !important;
  }
  /* Post Meta */
  .af-post__meta {
    font-size: .76rem !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-bottom: 12px !important;
  }
  /* Breadcrumb */
  .af-breadcrumb {
    font-size: .74rem !important;
    flex-wrap: wrap !important;
  }
  /* TOC */
  nav[aria-label="Inhaltsverzeichnis"] {
    padding: 14px 16px !important;
    margin-bottom: 20px !important;
  }
  nav[aria-label="Inhaltsverzeichnis"] ol {
    padding-left: 14px !important;
  }
  nav[aria-label="Inhaltsverzeichnis"] li {
    font-size: .84rem !important;
  }
  /* Post Content Typography */
  .af-post__content {
    font-size: .95rem !important;
    line-height: 1.72 !important;
  }
  .af-post__content h2 {
    font-size: 1.25rem !important;
    margin-top: 28px !important;
    margin-bottom: 10px !important;
  }
  .af-post__content h3 {
    font-size: 1.05rem !important;
    margin-top: 20px !important;
    margin-bottom: 8px !important;
  }
  .af-post__content table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: .82rem !important;
  }
  .af-post__content img {
    border-radius: 10px !important;
  }
  /* Inline CTA im Post Content */
  .af-inline-cta {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .af-inline-cta__btn {
    width: 100% !important;
    justify-content: center !important;
  }
  /* Author Box */
  .af-post__author-box {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 16px !important;
  }
  /* Tags */
  .af-post__tags {
    gap: 8px !important;
  }
}

/* === 13. BLOG LISTING === */
@media (max-width: 767px) {
  .af-post-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .af-post-card {
    border-radius: 14px !important;
  }
  .af-post-card__body {
    padding: 16px !important;
  }
  .af-post-card__title {
    font-size: .92rem !important;
    line-height: 1.35 !important;
  }
}

/* === 14. BUTTONS — Mobile === */
@media (max-width: 767px) {
  .af-btn--xl {
    padding: 13px 24px !important;
    font-size: .95rem !important;
    width: 100% !important;
    justify-content: center !important;
  }
  /* Buttons in hero sections full-width */
  .af-hero .af-btn,
  .h-hero .af-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* === 15. FOOTER === */
@media (max-width: 767px) {
  .af-footer__top {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .af-footer__links {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .af-footer__links a {
    font-size: .82rem !important;
    padding: 6px 0 !important; /* Besseres Tap-Target */
  }
  .af-socket__inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 6px !important;
    font-size: .76rem !important;
  }
}
@media (max-width: 479px) {
  .af-footer__links {
    grid-template-columns: 1fr !important;
  }
}

/* === 16. RELATED POSTS === */
@media (max-width: 767px) {
  section.af-section--bg .af-post-grid {
    grid-template-columns: 1fr !important;
  }
}

/* === 17. GLOSSAR === */
@media (max-width: 767px) {
  /* A-Z Nav scrollbar */
  .af-glossar-nav {
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 4px !important;
  }
}

/* === 18. CORE WEB VITALS — CLS Prevention === */
/* Bilder immer mit aspect-ratio um CLS zu verhindern */
.af-post-card__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.af-post-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.af-post__hero-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

/* === 19. TOUCH TARGETS — Minimum 44px === */
@media (max-width: 767px) {
  .af-nav__link,
  .af-mn__item,
  .af-mn__fbtn,
  .af-footer__links a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Pagination */
  .af-pagination a,
  .af-pagination span {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* === 20. PRINT NEVER === */
@media (max-width: 767px) {
  /* Animationen reduzieren für Performance */
  .af-card--hover:hover {
    transform: none !important;
  }
  .af-btn:hover {
    transform: none !important;
  }
}

/* === 21. "3 SCHRITTE" GRID — Mobile Fix === */
@media (max-width: 767px) {
  .h-how-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .h-how-grid .how-line {
    display: none !important;
  }
  .h-how-grid > div {
    padding: 0 8px !important;
    border-bottom: 1px solid var(--border);
    padding-bottom: 28px !important;
  }
  .h-how-grid > div:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
}

/* === 22. FINANCEADS IFRAME — Mobile === */
@media (max-width: 767px) {
  /* Iframe-Container auf Mobile nicht zu hoch */
  .container iframe[src*="financeads"] {
    height: 700px !important;
  }
}