/* =============================================================
   base.responsive.css  —  Gemeinsames Responsive-Grundgeruest
   -------------------------------------------------------------
   THEME-AGNOSTISCH (keine Farben/Logos). Nur Layout- und
   Breakpoint-Regeln, die ALLE Seiten unter diesem Server erben
   sollen (TZJ, MediPhys, sisaB, Schokoladenpalais ...).
   Ziel-Location (Phase 2): packages/tzj_base/Resources/Public/Css/
   Aktuell via page.includeCSS NACH site.v2.css eingebunden.

   Breakpoints: Mobil <768px | Tablet 768-1023px | Desktop >=1024px
   Pflicht-Testbreiten: 375 / 768 / 1280
   ============================================================= */

/* ---- 1) Karten-Raster: mobile-first 1 -> Tablet 2 -> Desktop 3 ---- */
@media (max-width: 767px){
  .cards-row--2,
  .cards-row--3 { grid-template-columns: 1fr !important; }
}
@media (min-width: 768px) and (max-width: 1023px){
  .cards-row--2,
  .cards-row--3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1024px){
  .cards-row--2 { grid-template-columns: repeat(2, 1fr) !important; }
  .cards-row--3 { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---- 2) Seiten-Innenabstand auf Mobil reduzieren (statt 32px) ---- */
@media (max-width: 767px){
  .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---- 3) Horizontales Ueberlaufen auf Mobil verhindern ---- */
@media (max-width: 767px){
  html, body { overflow-x: hidden; }
  .card-cta, .header-cta, .tzj-jobs-teaser__cta, .job-item__btn { white-space: normal; }
}

/* ===== COWORK NAV/HERO/TEASER (2026-06-15) ===== */

/* Hamburger nur mobil; Toggle unsichtbar */
.tzj-nav-toggle{ position:absolute; left:-9999px; width:1px; height:1px; }
.tzj-nav-burger{ display:none; }
.tzj-nav-burger span{ display:block; width:24px; height:3px; border-radius:3px; background:var(--blue); }

@media (max-width: 767px){
  /* Header: Grid -> einfache Flex-Zeile */
  .header__grid{ display:flex !important; flex-wrap:wrap; align-items:center; padding:8px 16px !important; gap:8px; }
  .header__logo-wrap{ order:1; padding:0 !important; background:transparent !important; }
  .tzj-nav-burger{ order:2; margin-left:auto; display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
                   width:46px; height:46px; padding:11px; cursor:pointer; border-radius:10px; border:1px solid var(--n2); background:#fff; }
  .header__toprow{ display:none !important; }
  .header__navrow{ order:3; flex-basis:100%; display:none !important; padding:0 !important; }
  .tzj-nav-toggle:checked ~ .header__grid .header__navrow{ display:block !important; }
  .header__navrow .nav{ flex-direction:column !important; gap:2px !important; padding:6px 0 10px !important; }
  .header__navrow .nav__link{ display:block !important; padding:12px 10px !important; border-bottom:1px solid var(--n2) !important; }
  .header__navrow .nav__link.is-active{ border-left:4px solid var(--orange) !important; background:rgba(17,69,143,.05) !important; }
  .brand__logo{ height:44px !important; }

  /* Hero */
  .tzj-hero{ padding:32px 20px !important; }
  .tzj-hero__ctas{ flex-direction:column; gap:10px; }
  .tzj-hero__cta-primary, .tzj-hero__cta-secondary{ width:100%; text-align:center; box-sizing:border-box; }

  /* Jobs-Teaser */
  .tzj-jobs-teaser{ padding:26px 20px !important; }
  .tzj-jobs-teaser__cta{ width:100%; text-align:center; box-sizing:border-box; }
}

/* ===== COWORK CONTENT/MOBILE (Custom-HTML, Listen) 2026-06-15 ===== */
@media (max-width: 767px){
  /* lange Woerter brechen, nichts erzwingt Ueberbreite */
  .content-area h1,.content-area h2,.content-area h3,.content-area p,.content-area li,.tzj-hero__headline{ overflow-wrap:break-word; word-break:break-word; }
  /* Inline-2-Spalter im Custom-HTML auf 1 Spalte */
  .content-area [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  /* Grid-/Flex-Kinder duerfen unter min-content schrumpfen */
  .content-area [style*="grid"] > *, .content-area [style*="flex"] > *{ min-width:0; }
  /* grosse Inline-Paddings der runden Custom-Boxen zaehmen */
  .content-area div[style*="border-radius"]{ padding-left:18px !important; padding-right:18px !important; }
  /* Bilder nie breiter als der Container */
  .content-area img{ max-width:100%; height:auto; }
}

/* ===== COWORK FORMULARE/MOBILE 2026-06-15 ===== */
@media (max-width: 767px){
  .frame-type-form_formframework .form-control,
  .frame-type-form_formframework input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
  .frame-type-form_formframework textarea,
  .frame-type-form_formframework select{ width:100% !important; box-sizing:border-box !important; }
  .frame-type-form_formframework .btn,
  .frame-type-form_formframework button[type=submit]{ width:100%; }
}