/* ==========================================================================
   8unlimited — Mobil-Feinschliff (Klappboxen, Dichte, Karussells).
   Wirkt ausschließlich unter 700 px (Klappboxen entstehen nur dort per
   mobil.js) — der Desktop bleibt garantiert unverändert.
   ========================================================================== */

/* ---- Klappboxen (natives <details>, Editorial-Look) ---------------------- */
details.klappbox {
  border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--weiss); margin: 10px 0; overflow: hidden;
}
details.klappbox > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
details.klappbox > summary::-webkit-details-marker { display: none; }
.kb-titel {
  font-family: var(--label); font-size: 11.5px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--tinte-soft);
}
.kb-zusammen {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 12.5px; white-space: nowrap;
}
.kb-punkt {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hairline); display: inline-block;
}
.kb-punkt.pos { background: var(--gruen); }
.kb-punkt.neg { background: var(--rot); }
.kb-kuerzel { font-family: var(--mono); font-size: 12px; }
.kb-kuerzel.pos { color: var(--gruen); }
.kb-kuerzel.neg { color: var(--rot); }
.kb-kuerzel.neutral { color: var(--tinte-soft); }
.kb-chevron {
  flex: none; width: 9px; height: 9px; margin-left: 4px;
  border-right: 2px solid var(--tinte-soft); border-bottom: 2px solid var(--tinte-soft);
  transform: rotate(45deg); transition: transform 0.18s ease;
}
details.klappbox[open] > summary .kb-chevron { transform: rotate(225deg); }
.kb-inhalt { padding: 2px 14px 12px; }
.kb-inhalt > .sektion { margin: 0; }
.kb-inhalt .unter-titel { display: none; } /* Titel steht schon im Klappkopf */

/* ---- „mehr anzeigen" für lange Kartentexte -------------------------------- */
.m-clamp {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-clamp.offen { display: block; -webkit-line-clamp: unset; }
.m-mehr {
  background: none; border: none; padding: 4px 0 0; cursor: pointer;
  font-family: var(--label); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--akzent);
}

/* ---- Nur Handy: Karussells + Dichte-Pass ----------------------------------- */
@media (max-width: 699px) {

  /* Editionen & Termin-Vorschau als wischbare Snap-Karussells */
  .editionen, .termin-vorschau {
    display: flex; overflow-x: auto; gap: 10px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 6px;
  }
  .editionen::-webkit-scrollbar, .termin-vorschau::-webkit-scrollbar { display: none; }
  .editionen > * { flex: 0 0 84%; scroll-snap-align: start; }
  .termin-vorschau > * { flex: 0 0 72%; scroll-snap-align: start; }

  /* Dichte-Pass: Boxen wirken auf dem Handy sonst aufgeblasen */
  .a-box, .akteur-karte, .neben-karte, .these-karte, .fokus-karte, .kern-karte,
  .status-karte, .geo-karte, .faktor-karte, .phase-karte, .signal-karte,
  .marke-chip, .druck-box, .lab-kachel, .hs-dossier, .geo-lage {
    padding: 10px 12px;
  }
  .sektion { margin-bottom: 26px; }
  .sektion-kopf h2 { font-size: 21px; }
  .a-sektion { margin-top: 22px; }
  .artikel-kopf h1 { font-size: clamp(24px, 6.4vw, 30px); }
  .a-lead p { font-size: 17.5px; }
  .hero { padding: 16px 14px; }
  .edition-karte { min-height: 0; }
  .phasen-grid, .faktoren-grid { gap: 8px; }
  .phase-karte .phase-basis { font-size: 11.5px; }
  .faktor-deutung { font-size: 13.5px; }
  .status-grid, .geo-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .status-karte .s-wert { font-size: 16px; }
  .geo-karte h3 { font-size: 16px; }
  .ampel-methodik { font-size: 12.5px; }
}

/* ---- Portfolio-Dashboard mobil (Neuaufbau 07/2026) ---- */
@media (max-width: 700px) {
  .pf2-gesamt { font-size: 34px; }
  .pf2-gesamt .waehrung { font-size: 20px; }
  .pf2-hero { gap: 14px; padding-top: 10px; }
  .pf2-kacheln { grid-template-columns: repeat(2, 1fr); gap: 8px; min-width: 0; }
  .pf2-kachel-wert { font-size: 16.5px; }
  .pf2-doppel { grid-template-columns: 1fr; }
  .pf2-tabs { position: sticky; top: 0; background: var(--papier); z-index: 5; }
  .pf2-tab { font-size: 14px; padding: 8px 10px 6px; }
  .pf2-szn-regler, .pf2-szn-balkenreihe { grid-template-columns: 96px 1fr 64px; }
  .pf2-akt-datum { min-width: 72px; }
}

/* ---- Feinschliff 10.07.2026: Dialog/Suggest/Konto auf schmalen Screens ---- */
@media (max-width: 700px) {
  .pf2-suggest { max-height: 46vh; }
  .pf2-suggest-zeile { padding: 10px; font-size: 15px; }
  .konto-kopf { flex-wrap: wrap; }
  .konto-kopf .knopf { margin-left: 0 !important; width: 100%; }
  #konto-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 700px) {
  .pf2-gesamt { font-size: 34px; }
  .phase-karte.v2 .phase-zustand { font-size: 22px; }
  .pf2-karte { padding: 14px; border-radius: 14px !important; }
}