/* =====================================================================
   TLC MOBILE (25.10.2026) – Korrekturen nur fuer Handys (bis 767px).
   Desktop bleibt unveraendert. Geladen nach responsive.css.
   ===================================================================== */

/* Listen-Symbole (in incl/_layout.cfm aus ❌ / ✨ ersetzt) – gilt auch Desktop */
.tlc-ico-x, .tlc-ico-ok { display: inline-block; font-weight: 600; font-size: 15px; line-height: 1; }
.tlc-ico-x  { color: #b39a86; }
.tlc-ico-ok { color: #8a6e5a; }

/* Buttons leicht abgerundet (Desktop + Handy), passend zu Karten und Kacheln */
.btn, a.btn, button.btn,
.tlc-table .startBellaBookingDirect, .tlc-table .startMaPrestoDirect,
.startBellaBookingDirect.btn, .startMaPrestoDirect.btn { border-radius: 6px !important; }

/* "Mehr erfahren": laengere Texte zum Aufklappen (Google liest sie trotzdem) */
.tlc-more { margin-top: 18px; }
.tlc-more summary { cursor: pointer; list-style: none; display: inline-block; color: #8a6e5a; font-weight: 500;
    border-bottom: 1px solid #d6c3b4; padding-bottom: 2px; }
.tlc-more summary::-webkit-details-marker { display: none; }
.tlc-more summary::after { content: " +"; }
.tlc-more[open] summary::after { content: " –"; }
.tlc-more[open] summary { margin-bottom: 12px; }
.tlc-more h4 { font-size: 1.15rem; margin: 18px 0 6px; }
.tlc-more[open] p { text-align: left !important; }

@media (max-width: 767px) {

  /* 6 – weniger Leerraum zwischen den Abschnitten */
  .pt-8 { padding-top: 56px !important; }
  .pb-8 { padding-bottom: 56px !important; }
  .pt-7, .pt-6 { padding-top: 40px !important; }
  .pb-7, .pb-6 { padding-bottom: 40px !important; }
  .pt-5 { padding-top: 32px !important; }
  .pb-5 { padding-bottom: 32px !important; }
  .mb-5 { margin-bottom: 1.5rem !important; }

  /* 1 – Hero straffer: kleine Dachzeile, Titel, ein kurzer Absatz, Button */
  section[class*="hero-"]:not(.hero-section) { padding-top: 104px !important; padding-bottom: 40px !important; }
  section[class*="hero-"]:not(.hero-section) h1 { font-size: 1.85rem !important; line-height: 1.2 !important; }
  section[class*="hero-"]:not(.hero-section) h1 > .section-id { font-size: .68rem !important; letter-spacing: 1.5px !important; margin-bottom: 10px !important; line-height: 1.4 !important; }
  section[class*="hero-"]:not(.hero-section) p.lead, section[class*="hero-"]:not(.hero-section) p {
    font-size: 1rem !important; line-height: 1.55 !important; margin: 12px auto 18px !important;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  section[class*="hero-"]:not(.hero-section) p ~ p { display: none !important; }

  /* 7 – laengere Absaetze linksbuendig, Ueberschriften bleiben zentriert */
  section:not([class*="hero-"]) .container p:not(.tlc-finder-hint) { text-align: left; }
  section:not([class*="hero-"]) .container h2, section:not([class*="hero-"]) .container h3 { text-align: center; }
  /* ... aber kurze Merksaetze (fett), Zitate (kursiv) und Hinweise bleiben zentriert */
  section:not([class*="hero-"]) .container p:has(> strong:only-child),
  section:not([class*="hero-"]) .container p:has(> b:only-child),
  section:not([class*="hero-"]) .container p[style*="font-weight"],
  section:not([class*="hero-"]) .container p[style*="italic"],
  section:not([class*="hero-"]) .container p.text-center { text-align: center !important; }

  /* Problem-/Vorteil-Listen kompakter */
  .tlc-table-center td { padding: 5px 6px !important; vertical-align: top; }
  .tlc-table-center td.icon { width: 26px; text-align: center; }

  /* 3 – "Ergebnis"-Kaesten: sichtbar aufklappbar (+ / –) */
  .accordion-thumb { position: relative; padding-right: 44px !important; }
  .accordion-thumb p { font-size: 1rem !important; margin: 0; text-align: left !important; }
  .txt-block .accordion .accordion-item .accordion-thumb:after,
  .accordion .accordion-item .accordion-thumb:after {
    content: "+" !important; position: absolute !important; left: auto !important; right: 18px !important; top: 50% !important;
    transform: translateY(-50%); font-size: 1.3rem !important; color: #8a6e5a !important; font-weight: 300;
  }
  .txt-block .accordion .accordion-item.is-active .accordion-thumb:after,
  .accordion .accordion-item.is-active .accordion-thumb:after { content: "–" !important; }

  /* 4 – Preiszeilen: "269 CHF" auf einer Zeile, schlankere Buchen-Buttons */
  .tlc-price-box { padding: 14px !important; border-radius: 14px !important; }
  .tlc-table td { padding: 11px 4px !important; }
  .tlc-table td:nth-child(2) { white-space: nowrap; font-size: .95rem; }
  .tlc-table .startBellaBookingDirect, .tlc-table .startMaPrestoDirect {
    padding: 7px 12px !important; font-size: 11px !important; letter-spacing: 1.5px !important; white-space: nowrap;
  }

  /* "Was passt zu dir?"-Auswahl: 2x2 wie am Desktop, kompakt */
  .tlc-choice-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 18px !important; }
  .tlc-choice { margin-top: 0 !important; padding: 14px 10px !important; text-align: center; }
  .tlc-choice strong { font-size: .95rem; line-height: 1.25; margin-bottom: 4px; }
  .tlc-choice span { font-size: 13px; }
  /* Einleitungssatz direkt unter einer Ueberschrift bleibt zentriert */
  section:not([class*="hero-"]) .container h2 + p, section:not([class*="hero-"]) .container h3 + p { text-align: center !important; }

  /* 5 – "Fuer wen ist das geeignet?"-Karten in voller Breite */
  .tlc-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; padding: 0 4px; }
  .tlc-card { width: auto !important; max-width: none !important; margin: 0 !important; text-align: left; }
  .tlc-card a, .tlc-card .details { color: #8a6e5a !important; font-size: .9rem; }
}