/* =========================================================================
   gk-mobile.css  –  girokonto.io Mobile-Optimierung + schwebendes Inhalte-TOC
   Additiv geladen nach style.css. Greift nur auf Mobil/Tablet.
   ========================================================================= */

/* ----------------------------------------------------------------------
   0. Globale Mobil-Schutzregeln gegen horizontales Scrollen
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  img, svg, video, iframe { max-width: 100%; height: auto; }
  .entry-content, .inside-article, .container-ober { overflow-wrap: break-word; word-wrap: break-word; }
}

/* Breite Tabellen: horizontal scrollbar statt Layout sprengen.
   Wrappt die bekannten Tabellen-Klassen automatisch per CSS-Scroll. */
@media (max-width: 1024px) {
  .table-wrapper, .gl-tbl-wrap, .alt-cmp-wrap, .gv-table-wrap,
  .gv-seo-table-wrap, .tbl-scroll, .responsive-table {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
  }
  /* Tabellen selbst nicht ueber den Viewport hinaus erzwingen, wenn sie
     keinen Scroll-Wrapper haben – dann lieber umbrechen. */
  .criteria-table, .product-card-tabelle, .bank-data-container table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
  }
}

/* ----------------------------------------------------------------------
   1. Sticky-Footer-Buttons lesbar machen (war 0.5rem ~ 8px)
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  .sticky-footer-buttons { gap: 0.4rem; padding: 0.5rem 0.6rem; }
  .sticky-footer-buttons a {
    font-size: 0.8rem !important;
    padding: 0.6rem 0.5rem;
    line-height: 1.2;
    min-height: 40px;
  }
}
@media (max-width: 360px) {
  .sticky-footer-buttons a { font-size: 0.72rem !important; }
}

/* Inhalt nicht unter fixierten Leisten verstecken. */
@media (max-width: 1024px) {
  body { padding-bottom: 64px; }
  body.gkmtoc-has-footer { padding-bottom: 110px; }
}

/* ----------------------------------------------------------------------
   2. Template-spezifische Grid-/Spalten-Fixes fuer schmale Screens
   ---------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* alternativen-template: 3-Spalten-Feature-Grids stapeln */
  .alt-feats { grid-template-columns: 1fr !important; }
  .alt-proscons, .alt-subject-guidance { grid-template-columns: 1fr !important; }
  /* listicle: Pro/Contra nebeneinander -> gestapelt */
  .gl-proscons, .pros-cons-grid { grid-template-columns: 1fr !important; }
  /* review-Templates: zweispaltige Kopfbereiche stapeln */
  .zwei-spalten-oben { display: block !important; }
  .linke-spalte-oben-review, .rechte-spalte-oben-review,
  .left-column-review, .right-column-review { width: 100% !important; float: none !important; }
}

@media (max-width: 480px) {
  .alt-feats, .alt-proscons,
  .alt-profile-grid, .alt-track-grid, .alt-dec-grid, .alt-method-grid {
    grid-template-columns: 1fr !important;
  }
  .ab-props { grid-template-columns: 1fr !important; }
  .typ-grid { grid-template-columns: 1fr !important; }
}

/* Author-Hover-Card (300px) nie breiter als Viewport */
@media (max-width: 1024px) {
  .gk-author-hover-card { max-width: 90vw; }
}

/* Tab-Navigationen mit horizontalem Scroll sauber zeigen */
@media (max-width: 768px) {
  .alt-tab-nav, .tab-titles, .cluster1-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
}

/* ----------------------------------------------------------------------
   3. ATM-Finder responsiv (geldautomatenfinder.php)
   ---------------------------------------------------------------------- */
@media (max-width: 600px) {
  .atm-finder > div[style*="flex"] { flex-direction: column; align-items: stretch !important; }
  .atm-finder select, .atm-finder input, .atm-finder button { width: 100% !important; box-sizing: border-box; }
  .atm-finder #map-frame { height: 360px !important; }
}

/* =========================================================================
   4. Schwebendes Inhalts-TOC  (FAB + Bottom-Sheet)
   ========================================================================= */
#gkmtoc { display: none; }

@media (max-width: 1024px) {
  #gkmtoc { display: block; }

  /* ---- Floating Action Button ---- */
  #gkmtoc-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: none;
    border-radius: 999px;
    background: var(--color-primary, #1a56db);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0,0,0,0.28);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
  }
  body.gkmtoc-has-footer #gkmtoc-fab { bottom: 70px; }
  #gkmtoc-fab:active { transform: scale(0.96); }
  #gkmtoc-fab .gkmtoc-fab__icon { font-size: 1.05rem; }
  body.gkmtoc-open #gkmtoc-fab { opacity: 0; pointer-events: none; }

  /* ---- Overlay ---- */
  #gkmtoc-overlay {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgba(15,23,42,0.5);
    opacity: 0;
    transition: opacity .25s ease;
  }
  body.gkmtoc-open #gkmtoc-overlay { opacity: 1; }

  /* ---- Bottom-Sheet ---- */
  #gkmtoc-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1002;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
  }
  #gkmtoc-sheet.is-open { transform: translateY(0); }

  .gkmtoc-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #eef0f3;
    position: relative;
  }
  .gkmtoc-sheet__head::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: #d6dae0;
  }
  .gkmtoc-sheet__title { font-size: 1.05rem; font-weight: 800; color: #0f172a; }
  .gkmtoc-sheet__close {
    border: none;
    background: #f1f3f5;
    color: #475569;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
  }

  .gkmtoc-sheet__nav {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 max(14px, env(safe-area-inset-bottom));
  }
  .gkmtoc-sheet__nav ul { list-style: none; margin: 0; padding: 0; }
  .gkmtoc-sheet__nav li { margin: 0; }
  .gkmtoc-sheet__nav a {
    display: block;
    padding: 12px 20px;
    color: #1f2937;
    font-size: 0.98rem;
    line-height: 1.35;
    text-decoration: none;
    border-left: 3px solid transparent;
  }
  .gkmtoc-sheet__nav li.gkmtoc-lvl-3 a {
    padding-left: 38px;
    font-size: 0.9rem;
    color: #475569;
  }
  .gkmtoc-sheet__nav li.is-active > a {
    color: var(--color-primary, #1a56db);
    border-left-color: var(--color-primary, #1a56db);
    background: #f3f7ff;
    font-weight: 700;
  }
  .gkmtoc-sheet__nav a:active { background: #eef2f7; }
}