/* ═══════════════════════════════════════════════════
   Feinrot Framework — Layout Primitives for BS5
   Extracted from TYPO3 zahnarzt-stoll.de CSS
   ═══════════════════════════════════════════════════ */

/* ─── Design Tokens ─── */
:root {
  --ff-primary: #cbae6b;
  --ff-primary-hover: #b89a52;
  --ff-dark: #2b3338;
  --ff-secondary: #D3D3D3;
  --ff-zahneins: #EB6407;
  --ff-light: #ffffff;
  --ff-gray: #f5f5f5;
  --ff-body-font: "Carnas", Tahoma, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-body-size: 1.125rem;
  --ff-body-line-height: 1.55;
  --ff-body-color: #2b3338;
}

/* ─── BS5 Color Overrides ─── */
:root {
  --bs-primary: var(--ff-primary);
  --bs-primary-rgb: 203, 174, 107;
  --bs-secondary: var(--ff-secondary);
  --bs-dark: var(--ff-dark);
  --bs-link-color: var(--ff-primary);
  --bs-link-hover-color: var(--ff-primary-hover);
}

.btn-primary {
  --bs-btn-bg: var(--ff-primary);
  --bs-btn-border-color: var(--ff-primary);
  --bs-btn-hover-bg: var(--ff-primary-hover);
  --bs-btn-hover-border-color: var(--ff-primary-hover);
  --bs-btn-color: #fff;
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--ff-primary-hover); border-color: var(--ff-primary-hover); color: #fff; }
a { color: var(--ff-primary); }
a:hover { color: var(--ff-primary-hover); }
.text-primary { color: var(--ff-primary) !important; }
.bg-primary { background-color: var(--ff-primary) !important; }
.bg-secondary { background-color: var(--ff-secondary) !important; }
.bg-dark { background-color: var(--ff-dark) !important; }


/* ─── Frame System ─── */
.frame { position: relative; padding: 55px 0; }
.frame-container { max-width: 1400px; margin: 0 auto; padding: 0 15px; }
.frame-inner > *:last-child { margin-bottom: 0; }
.frame-noframe, .frame.frame-noframe { padding: 0; }
@media (min-width: 1200px) { .frame { padding: 80px 0; } }

/* ─── Frame Backgrounds ─── */
.frame-background-primary { color: var(--ff-body-color); background-color: var(--ff-primary); }
.frame-background-primary a:not(.btn) { color: #fff; }
.frame-background-primary .topline { color: #fff; }
.frame-background-dark { color: #fff; background-color: var(--ff-dark); }
.frame-background-dark a:not(.btn) { color: var(--ff-primary); }
.frame-background-dark .topline { color: var(--ff-primary); }
.frame-background-secondary { color: var(--ff-body-color); background-color: var(--ff-secondary); }
.frame-background-light { color: var(--ff-body-color); background-color: var(--ff-light); }
.frame-background-zahneins { color: #fff; background-color: var(--ff-zahneins); }
.frame-background-zahneins a:not(.btn) { color: #fff; text-decoration: underline; }
.frame-background-none { background-color: transparent; }

/* ─── fr-grid (CSS Grid for Teaser layouts) ─── */
.fr-grid { display: grid; gap: 0; }
.fr-grid .grid-element-headline { grid-row: 1; grid-column: 1; align-self: end; }
.fr-grid .grid-element-img { grid-row: 1 / 3; grid-column: 2; }
.fr-grid .grid-element-text { grid-row: 2; grid-column: 1; align-self: start; }
.fr-grid .grid-element-img img { width: 100%; height: 100%; object-fit: cover; }

/* Inverted: Image left, text right */
.fr-grid.fr-grid-inverted .grid-element-img { grid-column: 1; }
.fr-grid.fr-grid-inverted .grid-element-headline { grid-column: 2; }
.fr-grid.fr-grid-inverted .grid-element-text { grid-column: 2; }

/* Width variants */
.fr-grid.fr-grid-sehrschmal { grid-template-columns: 32% 68%; }
.fr-grid.fr-grid-sehrschmal.fr-grid-inverted { grid-template-columns: 68% 32%; }
.fr-grid.fr-grid-schmal { grid-template-columns: 43% 57%; }
.fr-grid.fr-grid-schmal.fr-grid-inverted { grid-template-columns: 57% 43%; }
.fr-grid.fr-grid-etwasschmal { grid-template-columns: 47% 53%; }
.fr-grid.fr-grid-etwasschmal.fr-grid-inverted { grid-template-columns: 53% 47%; }

/* Mobile: single column */
@media (max-width: 991.98px) {
  .fr-grid { grid-template-columns: 1fr !important; }
  .fr-grid .grid-element-headline { grid-row: auto; grid-column: 1; }
  .fr-grid .grid-element-img { grid-row: auto; grid-column: 1; }
  .fr-grid .grid-element-text { grid-row: auto; grid-column: 1; }
}

/* ─── Bildspalte (full-height absolute image column) ─── */
.bildspalte { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.bildspalte img { width: 100%; height: 100%; object-fit: cover; }
.fr-img-cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.fr-img-cover-autoheight { display: block; width: 100%; height: auto; object-fit: cover; }
@media (max-width: 767.98px) {
  .bildspalte { position: relative; height: 300px; }
}

/* ─── Button Variants (TYPO3 style) ─── */
.btn-icon { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.05em; padding: 0.5rem 1.25rem; border: 1px solid currentColor; }
.btn-icon i[class^="icon-"], .btn-icon svg { height: 26px; width: auto; }
.btn-icon span { vertical-align: middle; }
.btn-icon-plus { }
.btn-icon-plus i.icon-plus { font-size: 0.75rem; }

.btn-icon.btn-dark { background: transparent; border-color: var(--ff-dark); color: var(--ff-dark); }
.btn-icon.btn-dark:hover { background: var(--ff-primary); border-color: var(--ff-primary); color: #fff; }
.btn-icon.btn-light { background: transparent; border-color: #fff; color: #fff; }
.btn-icon.btn-light:hover { background: var(--ff-primary); border-color: var(--ff-primary); color: #fff; }
.btn-zahneins { color: #fff; background-color: var(--ff-zahneins); border-color: var(--ff-zahneins); }
.btn-zahneins:hover { background-color: #c65406; border-color: #c65406; color: #fff; }

/* ─── Utilities ─── */
.topline { color: var(--ff-primary); font-weight: 700; text-transform: uppercase; font-size: 1rem; margin-bottom: 0.25rem; }
.frame-background-dark .topline, .frame-background-primary .topline { color: currentColor; }
.responsive-reverse { }
@media (max-width: 767.98px) { .responsive-reverse { flex-direction: column-reverse; } }
.text-light { color: #fff !important; }

/* Visibility by breakpoint */
@media (max-width: 1224px) { .hideonmobile { display: none !important; } }
@media (min-width: 1225px) { .hideondesktop { display: none !important; } }

/* ─── Masonry Images (TYPO3: display:flex, no gap) ─── */
.fr-masonry-images { display: flex; }
.fr-masonry-images-2 > * { width: 50%; }
.fr-masonry-images img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── BS4 Compat ─── */
.row.no-gutters { --bs-gutter-x: 0; }
.row.no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; }