/* ─── Care Concept iFrame Embed Styles (v1.26) ─── */
:root {
  --cc-iframe-height-desktop: 1000px; 
  --cc-iframe-height-mobile: 90vh;
  --cc-wrapper-min-height: 400px;

  /* Fallback Box Styles */
  --cc-fallback-bg: #f8f9fa;
  --cc-fallback-border: #dee2e6;
  --cc-fallback-text: #495057;
  
  /* Fallback Button Styles */
  --cc-btn-bg: #0d6efd;
  --cc-btn-bg-hover: #0b5ed7;
  --cc-btn-text: #ffffff;
}

.cc-embed-wrapper {
  position: relative;
  width: 100%;
  min-height: var(--cc-wrapper-min-height, 400px);
  margin: 15px 0;
}

.cc-embed__frame {
  width: 100%;
  height: var(--cc-iframe-height-desktop, 1000px); 
  border: none;
  display: block;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

/* iOS iframe wrapper fix: verhindert leeres Rendern beim Scrollen */
.cc-iframe-scroll-fix {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  height: var(--cc-iframe-height-desktop, 1000px);
  width: 100%;
}

/* Auto-Modus: der manuelle Wert bleibt bis zur ersten sicheren Höhenmeldung
   als Fallback aktiv. Danach steuert --cc-iframe-auto-height beide Elemente. */
.cc-embed-wrapper[data-height-mode="auto"] {
  min-height: 0;
}

.cc-embed-wrapper[data-height-mode="auto"] .cc-iframe-scroll-fix,
.cc-embed-wrapper[data-height-mode="auto"] .cc-embed__frame {
  height: var(--cc-iframe-auto-height, var(--cc-iframe-height-desktop, 1000px));
}

/* Der innere Scrollbalken darf erst verschwinden, wenn eine echte Höhe
   angekommen ist. Sonst wäre ein Formular ohne Höhensender abgeschnitten und
   der Auto-Modus schlechter als der manuelle. */
.cc-embed-wrapper[data-height-mode="auto"][data-cc-auto-height-ready] .cc-iframe-scroll-fix,
.cc-embed-wrapper[data-height-mode="auto"][data-cc-auto-height-ready] .cc-embed__frame {
  overflow-y: hidden;
}

/* Fallback-Container (Standard: ausgeblendet) */
.cc-fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 20px;
  text-align: center;
  background: var(--cc-fallback-bg);
  border-radius: 8px;
  border: 1px solid var(--cc-fallback-border);
  min-height: 200px;
}

.cc-fallback p {
  margin: 0;
  color: var(--cc-fallback-text);
  font-size: 15px;
  line-height: 1.6;
}

.cc-fallback__btn {
  display: inline-block;
  padding: 12px 28px;
  background-color: var(--cc-btn-bg);
  color: var(--cc-btn-text) !important;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none !important;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cc-fallback__btn:hover {
  background-color: var(--cc-btn-bg-hover);
  color: var(--cc-btn-text) !important;
}

/* Responsive (Mobile) */
@media (max-width: 768px) {
  .cc-iframe-scroll-fix,
  .cc-embed__frame {
    height: var(--cc-iframe-height-mobile, 90vh) !important;
  }

  .cc-embed-wrapper[data-height-mode="auto"] .cc-iframe-scroll-fix,
  .cc-embed-wrapper[data-height-mode="auto"] .cc-embed__frame {
    height: var(--cc-iframe-auto-height, var(--cc-iframe-height-mobile, 90vh)) !important;
  }
}