/* id4web – Naturalsmile custom styles (BP16 / Bootstrap 5)
   Absolute Font-Pfade (Classic Mode) für robustes Laden nach CSS-Concatenation. */

/* ---------- Fonts: Roboto Condensed (selbst gehostet) ---------- */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/typo3conf/ext/id4web/Resources/Public/Fonts/roboto-condensed-v19-latin-300.woff2') format('woff2'),
       url('/typo3conf/ext/id4web/Resources/Public/Fonts/roboto-condensed-v19-latin-300.woff') format('woff');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/typo3conf/ext/id4web/Resources/Public/Fonts/roboto-condensed-v19-latin-regular.woff2') format('woff2'),
       url('/typo3conf/ext/id4web/Resources/Public/Fonts/roboto-condensed-v19-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/typo3conf/ext/id4web/Resources/Public/Fonts/roboto-condensed-v19-latin-700.woff2') format('woff2'),
       url('/typo3conf/ext/id4web/Resources/Public/Fonts/roboto-condensed-v19-latin-700.woff') format('woff');
}

/* ---------- Grundlayout / Farben ---------- */
html {
  font-size: 20px;                 /* wie Bestand: Basis 20px -> gesamte Typo skaliert proportional */
  background: #4d4c4c;
  background: linear-gradient(90deg, #4d4c4c 0%, #545454 50%, #4d4c4c 100%);
  background-attachment: fixed;
  min-height: 100%;
}
body {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  color: #efefef;
  background: transparent !important;
}

h1, .h1 { color: #ff6600; font-weight: 400; }
h2, .h2, h3, .h3, h4, .h4 { color: #efefef; font-weight: 400; }

a { color: #ff6600; }
a:hover, a:focus { color: #d35900; }

/* ---------- Navbar ---------- */
.navbar-mainnavigation.navbar-default,
.navbar-mainnavigation.navbar-default-transition,
.navbar-mainnavigation {
  background-color: #333232 !important;
  min-height: 140px;                       /* wie Bestand -> Logo überragt nur ~165px */
  --bs-navbar-color: #ff6600;
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-active-color: #ffffff;
  transition: min-height .2s ease;
}
/* Beim Scrollen kompaktere Navbar (Sticky bleibt sichtbar) */
body.nav-scrolled .navbar-mainnavigation { min-height: 90px; }
/* Overhang zulassen (BP-Clip aufheben) + Container als Anker fürs Logo */
@media (min-width: 992px) {
  .navbar-mainnavigation { overflow: visible !important; }
  /* Container als Anker: volle Navbar-Höhe -> Brand sitzt oben -> Logo top:5 greift */
  .navbar-mainnavigation .container-mainnavigation { position: relative; overflow: visible; }
}
/* Menü rechtsbündig: die volle-Breite-UL richtet ihre Items nach rechts aus */
.navbar-mainnavigation .navbar-collapse { flex-grow: 1; justify-content: flex-end; }
.navbar-mainnavigation .navbar-nav { margin-left: auto; justify-content: flex-end; }
.navbar-mainnavigation .nav-link {
  color: #ff6600;
  font-weight: 400;
  font-size: 1.31rem;
  white-space: nowrap;
}
.navbar-mainnavigation .nav-link:hover,
.navbar-mainnavigation .nav-link:focus { color: #fff; background-color: #ff6600; }
.navbar-mainnavigation .nav-item.active > .nav-link,
.navbar-mainnavigation .nav-link.active,
.navbar-mainnavigation .current > .nav-link { color: #fff; background-color: #ff6600; }

/* Dropdown */
.navbar-mainnavigation .dropdown-menu { background-color: #fff; border-radius: 0; }
.navbar-mainnavigation .dropdown-item { color: #333232; padding: 9px 35px; border-bottom: 1px solid #ccc; }
.navbar-mainnavigation .dropdown-item:last-child { border-bottom: none; }
.navbar-mainnavigation .dropdown-item:hover,
.navbar-mainnavigation .dropdown-item:focus { color: #fff; background-color: #333232; }

/* Logo – 300px hoch, überragt die Navbar nach unten (wie im Bestand).
   position:fixed -> entkommt dem overflow-Clip der Sticky-Navbar, bleibt beim Scrollen sichtbar. */
.navbar-mainnavigation .navbar-brand { padding: 0; position: static; }   /* NICHT Anker -> Logo ankert am Container */
.navbar-mainnavigation .navbar-brand-logo-inverted { display: none; }   /* redundantes Zweit-Logo aus */
.navbar-mainnavigation .navbar-brand-image img,
.navbar-mainnavigation .navbar-brand-logo-normal,
.navbar-mainnavigation .navbar-brand img {
  position: absolute !important;               /* Anker: .container-mainnavigation (vertik. zentriert bei ~35px) */
  top: -30px !important;                         /* -30 gg. Container-Mitte -> Logo-Oberkante ~5px ab Navbar-Top */
  left: 20px !important;                         /* = Container-Einzug -> bündig mit h1/Text (wie Bestand) */
  bottom: auto !important;
  transform: none !important;                 /* BP-Zentrierung (translateY -50%) aufheben */
  height: 300px;
  max-height: 300px;
  width: auto;
  z-index: 1050;
  transition: height .2s ease;
}
/* Beim Scrollen verkleinern (wie im Bestand) */
body.nav-scrolled .navbar-mainnavigation .navbar-brand-image img,
body.nav-scrolled .navbar-mainnavigation .navbar-brand-logo-normal,
body.nav-scrolled .navbar-mainnavigation .navbar-brand img {
  height: 170px;
  max-height: 170px;
}
@media (max-width: 991.98px) {
  .navbar-mainnavigation .navbar-brand-image img,
  .navbar-mainnavigation .navbar-brand-logo-normal,
  .navbar-mainnavigation .navbar-brand img,
  body.nav-scrolled .navbar-mainnavigation .navbar-brand-logo-normal {
    position: static;
    top: auto;
    left: auto;
    height: 56px;
    max-height: 56px;
  }
}

/* ---------- Tabellen (transparent, heller Text – wie Bestand) ---------- */
.bp-page-content .table,
.frame .table {
  --bs-table-color: #efefef;
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(255, 255, 255, 0.15);
  --bs-table-striped-color: #efefef;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
  --bs-table-hover-color: #efefef;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
  color: #efefef;
}
.bp-page-content .table > :not(caption) > * > *,
.frame .table > :not(caption) > * > * {
  background-color: transparent;
  color: #efefef;
  box-shadow: none;
}

/* Kontakt: Logo neben den Kontaktdaten begrenzen (TYPO3 skaliert SVGs nicht) */
.bp-page-content img[src*="ratser200"] { max-width: 250px; height: auto; }

/* ---------- Content-Frames ---------- */
.frame-background-dark { background-color: #3f3f3f; }
.frame-background-dark, .frame-background-dark h2, .frame-background-dark h3, .frame-background-dark h4 { color: #efefef; }
.frame-ruler-before, .frame-ruler-after { border-color: #333333; }

/* ---------- Footer ---------- */
.footer-section-content, .bp-page-footer { background-color: #333333; color: #fff; }
.footer-section-content a, .bp-page-footer a { color: #fff; }
.footer-section-content a:hover, .bp-page-footer a:hover { color: #4d4c4c; }
.footer-section-meta {
  background-color: #ff6600;
  background-image: url('/typo3conf/ext/id4web/Resources/Public/images/dots6.svg');
  background-repeat: no-repeat;
  background-position: left bottom;
}
.footer-section-meta a,
.footer-section-meta .meta-menu a,
.footer-section-meta #meta_menu a { color: #fff !important; }
.footer-section-meta a:hover,
.footer-section-meta .meta-menu a:hover,
.footer-section-meta #meta_menu a:hover { color: #ddd !important; }

/* ---------- Bestand-Details: Carousel-Schatten + Dekor-Grafiken (Dots) ---------- */
.carousel { box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5); }

@media (min-width: 768px) {
  .section-default { background: url('/typo3conf/ext/id4web/Resources/Public/images/dots7.svg') no-repeat left top; }
  .bp-page-content { background: url('/typo3conf/ext/id4web/Resources/Public/images/dots5.svg') no-repeat right bottom; }
}
.accordion-body { background: url('/typo3conf/ext/id4web/Resources/Public/images/dots4.svg') no-repeat right bottom; }

/* ---------- Menü-Kacheln (menu_card_list) wie Bestand + Hover ---------- */
.card-menu .card {
  border: none;
  background-color: #ff6600;                 /* oranger Rahmen/Footer */
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.card-menu .card-body {
  padding: 15px;
  text-align: center;
  color: #fff;
  background: #666;                          /* grauer Textbereich */
  transition: background-color 200ms;
}
.card-menu .card-title { text-align: center; color: #fff; }
.card-menu .card-body a { display: block; color: #fff; }
.card-menu .card-footer {
  display: block;
  text-align: center;
  padding: 0;
  border: none;
  background: url('/typo3conf/ext/id4web/Resources/Public/images/dots4.svg') no-repeat right bottom;
  transition: background-color 200ms;
}
.card-menu .card-footer a {
  padding: 15px !important;
  color: #fff;
  width: 100%;
  display: block;
}
.card-menu .card a:not(.btn) { color: #fff; }
/* Hover: Textbereich + Footer werden dunkler orange (wie Bestand darken 9%) */
.card-menu .card:hover .card-body,
.card-menu .card:hover .card-footer { background-color: #d15500; }
.card-menu .card:hover .card-footer a,
.card-menu .card:hover .card-body a { color: #fff; }

/* ---------- Buttons (global wie Bestand: eckig, orange, weiß) ---------- */
:root {
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;
}
.btn { border-radius: 0; font-weight: 400; }
/* Abstand zwischen Buttons (Footer & Content-Bereich, nicht Navbar) */
.footer-section-content .btn,
.bp-page-content .btn { margin: 0 0.5rem 0.5rem 0; }
.btn-primary {
  --bs-btn-bg: #ff6600;
  --bs-btn-border-color: #ff6600;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #d15500;
  --bs-btn-hover-border-color: #d15500;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #d15500;
  --bs-btn-active-border-color: #d15500;
  --bs-btn-active-color: #fff;
}
.btn-default, .btn-secondary {
  --bs-btn-bg: #777;
  --bs-btn-border-color: #fff;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #333333;
  --bs-btn-hover-color: #fff;
}