/* =============================================================
   Kundenraum · Mobile-Optimierung
   Gestaffelt: Tablet (≤760px) → Phone (≤520px) → kleines Phone (≤380px).
   Ziel: alle drei Nutzungsmodi (schauen, prüfen, freigeben) sollen
   mobil ohne Frust gehen. Tap-Targets ≥ 44×44px, font-size ≥ 16px in
   Eingaben (verhindert iOS-Auto-Zoom), Karussell-Slides skalieren
   mit der Viewport-Breite statt fixer Pixel.
   ============================================================= */
@media (max-width:760px) {
  .cl-topbar { padding:18px 18px 6px; flex-wrap:wrap; gap:8px; }
  .cl-page { padding:28px 18px 50px; }
  .cl-hero-content { padding:32px 24px; }
  .cl-hero--cover { grid-template-columns:1fr; }
  .cl-hero-image { min-height:220px; order:-1; }
  .cl-hero-title { font-size:30px; }
  /* Einspaltig steht das Bild ueber dem Text, die Karte waechst
     frei nach unten — hier gibt es keinen Grund zu kuerzen, und
     vier Zeilen waeren auf schmalem Schirm auch sehr wenig Text. */
  .cl-hero-intro {
    -webkit-line-clamp:none;
    line-clamp:none;
    display:block;
    max-width:none;
  }
  .cl-stats { grid-template-columns:1fr 1fr; }
  .cl-block-title { font-size:24px; }
  .cl-upload-date { display:none; }

  /* Karussell-Slides skalieren mit Viewport-Breite — 72% der Breite,
     so dass die Nachbarn rechts/links als "es geht weiter" sichtbar
     bleiben. Mindest- und Maximumgröße für gute Optik. */
  .cl-slide { width:clamp(180px, 72vw, 280px); }

  .cl-lightbox { padding:14px; }
  .cl-lightbox-body { grid-template-columns:1fr; grid-template-rows:1fr auto; }
  .cl-lightbox-notes { max-height:40vh; }
  .cl-lightbox.notes-hidden .cl-lightbox-body { grid-template-rows:1fr; }

  /* Eingabefelder: 16px Mindest-Schriftgröße, sonst zoomt iOS rein */
  .field,
  .cl-comment textarea,
  .cl-form textarea,
  .cl-offer-name input,
  .cl-stage-form textarea {
    font-size:16px;
  }

  /* Annahme-Sektion: enger packen, größere Tap-Targets */
  .cl-offer-card { padding:18px 18px 16px; }
  .cl-offer-title { font-size:20px; line-height:1.3; }
  .cl-offer-check {
    padding:14px 14px;
    font-size:14px;
    align-items:center;
  }
  .cl-offer-check input[type="checkbox"] {
    width:20px; height:20px;
  }
  .cl-offer-btn {
    width:100%;
    padding:14px 22px;
    font-size:15px;
    justify-content:center;
  }
  .cl-offer-signature-area { padding:12px; }
  .cl-signature-canvas { height:200px; }
  .cl-signature-tab { padding:9px 14px; font-size:13px; }

  /* Konzept-Karten: Thumb kleiner, mehr Platz für Text */
  .cl-concept-card { padding:14px; gap:12px; }
  .cl-concept-thumb { width:56px; height:42px; }
  .cl-concept-ico { width:42px; height:42px; font-size:18px; border-radius:10px; }
  .cl-concept-name { font-size:13.5px; }
  .cl-concept-btn { padding:9px 14px; font-size:13px; }

  /* Anmerkungen-Formular: Senden-Button volle Breite */
  .cl-form .btn-primary,
  .cl-stage-form .btn-primary {
    width:100%;
    justify-content:center;
    padding:12px 18px;
  }
}

/* --- Schmale Phones --- */
@media (max-width:520px) {
  .cl-page { padding:22px 14px 90px; /* unten Platz für Sticky-CTA */ }
  .cl-hero-content { padding:26px 18px; }
  .cl-hero-title { font-size:26px; line-height:1.15; }
  .cl-hero-intro { font-size:14px; }
  .cl-block-title { font-size:22px; }

  /* Galerie-Karte: weniger Außenraum, mehr Platz fürs Karussell */
  .cl-gallery-card { padding:14px 12px 12px; }
  .cl-gallery-title { font-size:12px; margin-bottom:10px; }

  /* Karussell-Pfeile bleiben tappable */
  .cl-carousel-nav { width:40px; height:40px; flex-shrink:0; }

  /* Lightbox: auf kleinem Bildschirm Vollbild */
  .cl-lightbox { padding:0; }
  .cl-lightbox-body { border-radius:0; }

  /* Slide-Bild größer machen — der Kunde muss erkennen können */
  .cl-slide { width:clamp(220px, 82vw, 320px); }

  /* Annahme-Form noch luftiger */
  .cl-offer-card { padding:16px; border-left-width:4px; }
  .cl-offer-name input { padding:12px 14px; font-size:16px; }

  /* Unterschrift: Bedien-Knöpfe groß genug für Daumen */
  .cl-signature-pane-foot { gap:8px; }
  .cl-signature-pane-foot .btn-ghost {
    padding:8px 16px;
    min-height:36px;
  }
}

/* --- Sehr kleine Phones (alte iPhone SE etc.) --- */
@media (max-width:380px) {
  .cl-hero-title { font-size:22px; }
  .cl-block-title { font-size:20px; }
  .cl-offer-title { font-size:18px; }
  .cl-concept-thumb { width:48px; height:36px; }
}

/* =============================================================
   Sticky-CTA: schwebt unten am Bildschirm, wenn ein nicht-bestätigtes
   Angebot vorhanden ist. Tap = scroll zur Annahme-Sektion. Verschwindet,
   sobald die Sektion sichtbar ist (IntersectionObserver in JS).
   ============================================================= */
.cl-sticky-cta {
  position:fixed;
  left:14px; right:14px; bottom:14px;
  z-index:50;
  background:var(--accent);
  color:#fff;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(192,57,43,.30),
             0 2px 6px rgba(0,0,0,.10);
  padding:13px 16px;
  display:none;            /* default versteckt */
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  letter-spacing:.005em;
  /* Sanftes Reinblenden, wenn aktiviert */
  animation:cl-sticky-in .35s ease-out;
  /* Safe-area für Geräte mit Home-Indikator */
  padding-bottom:max(13px, calc(13px + env(safe-area-inset-bottom)));
  bottom:max(14px, env(safe-area-inset-bottom));
}
.cl-sticky-cta.is-active { display:flex; }
.cl-sticky-cta-text {
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.cl-sticky-cta-eyebrow {
  font-size:10.5px;
  font-weight:500;
  opacity:.82;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.cl-sticky-cta-title {
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cl-sticky-cta-arrow {
  flex-shrink:0;
  font-size:18px;
  opacity:.95;
}
@keyframes cl-sticky-in {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Sticky-CTA nur auf Mobile */
@media (min-width:761px) {
  .cl-sticky-cta { display:none !important; }
}

/* =============================================================
   Fullscreen-Lightbox auf Mobile
   Statt der Desktop-Lightbox (mit Notes-Panel) ein echter
   Vollbild-Modus mit Pinch-Zoom. Wird vom JS aktiviert, wenn der
   Viewport ≤ 760px ist.
   ============================================================= */
.cl-fs-lightbox {
  position:fixed;
  inset:0;
  z-index:200;
  background:#000;
  display:none;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  /* fade-in */
  animation:cl-fs-in .2s ease-out;
}
.cl-fs-lightbox.is-open { display:flex; }
.cl-fs-image-wrap {
  flex:1;
  overflow:auto;            /* erlaubt Pan nach Pinch-Zoom */
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:pinch-zoom;  /* native Pinch-Zoom-Geste */
  -webkit-overflow-scrolling:touch;
}
.cl-fs-image-wrap img {
  display:block;
  max-width:100%;
  max-height:100vh;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.cl-fs-bar {
  position:absolute;
  top:0; left:0; right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  padding-top:max(14px, env(safe-area-inset-top));
  color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0));
  pointer-events:none;
}
.cl-fs-title {
  font-size:14px;
  font-weight:500;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
  pointer-events:auto;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cl-fs-close {
  pointer-events:auto;
  background:rgba(255,255,255,.15);
  border:none;
  color:#fff;
  width:40px;
  height:40px;
  border-radius:20px;
  font-size:22px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.cl-fs-hint {
  position:absolute;
  bottom:max(20px, env(safe-area-inset-bottom));
  left:0; right:0;
  text-align:center;
  color:rgba(255,255,255,.75);
  font-size:12px;
  pointer-events:none;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
  opacity:0;
  animation:cl-fs-hint-fade 3.5s ease-out forwards;
}
@keyframes cl-fs-in {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes cl-fs-hint-fade {
  0%   { opacity:0; }
  15%  { opacity:1; }
  80%  { opacity:1; }
  100% { opacity:0; }
}

/* Body-Lock, wenn Fullscreen offen ist — verhindert
   Hintergrund-Scroll */
body.cl-fs-open { overflow:hidden; touch-action:none; }


/* Datei-Umbenennen (Admin): dezenter Hinweis auf Doppelklick */
.file-rename {
  cursor:text;
  border-bottom:1px dotted transparent;
}
.file-rename:hover { border-bottom-color:var(--line-2); }


/* --- Mobile-Nachbesserung (2026-08-19) -------------------------
 * Kennzahlen-Kacheln: kleinere Icons/Abstaende, Beschriftungen
 * duerfen umbrechen statt abgeschnitten zu werden.
 * Dokument-Karten: auf schmalen Screens stapeln (Button unter den
 * Text), Dateinamen brechen um statt zu "K..." zu verkuemmern. */
@media (max-width:760px) {
  .cl-stat { padding:14px 12px; gap:10px; }
  .cl-stat-ico {
    width:36px; height:36px;
    font-size:15px; border-radius:9px;
  }
  .cl-stat-avatar { width:36px; height:36px; }
  .cl-stat > div { min-width:0; }
  .cl-stat-label { font-size:10px; overflow-wrap:break-word; }
  .cl-stat-value { font-size:19px; }
  .cl-stat-value--sm { font-size:12.5px; overflow-wrap:break-word; }
}
@media (max-width:560px) {
  .cl-concept-card { flex-wrap:wrap; }
  .cl-concept-name { white-space:normal; overflow-wrap:anywhere; }
  .cl-concept-hint { overflow-wrap:anywhere; }
  .cl-concept-body { flex:1 1 55%; }
  .cl-concept-btn {
    flex:1 1 100%;
    display:flex; align-items:center; justify-content:center;
    margin-top:4px;
  }
}