/* =========================================================
   COBUS ADULO – CI MASTER CSS
   Kompakter Footer
   ========================================================= */

/* 1. Basis */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: #5A5A59;
  background-color: #F7F8F8;
  font-family: "Myriad Pro", "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  margin-top: 0;
  margin-bottom: 16px;
}

img {
  height: auto;
}

a {
  color: #2C9D99;
  transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

a:hover {
  color: #404040;
}

::selection {
  color: #FFFFFF;
  background-color: #2C9D99;
}

/* 2. Überschriften */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #404040;
  font-family: "Innervers", "Segoe UI", Arial, Helvetica, sans-serif;
  font-weight: 700 !important;
  line-height: 1.25;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 27px;
}

h3 {
  font-size: 23px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

/* 3. Header und Logo */
header#masthead {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: url("https://www.adulo.de/wp-content/uploads/2015/06/BG_Header.png")
    no-repeat top left #FFFFFF !important;
}

header#masthead hgroup .logo {
  float: right;
  width: 432px !important;
  height: 80px !important;
  background: url("https://www.adulo.de/wp-content/uploads/2015/06/Adulo_2015-80px.png")
    no-repeat bottom right;
}

header#masthead hgroup .logo img {
  display: block !important;
  width: auto !important;
  max-height: 90px !important;
}

.min_logo_scroll,
.mini_logo {
  content: url("https://www.adulo.de/wp-content/uploads/2015/06/Adulo_2015-27px.png");
}

#masthead .support-text {
  display: none !important;
}

/* 4. Desktop-Navigation */
.main-navigation {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background-color: #2C9D99 !important;
  box-shadow: 0 2px 8px rgba(64, 64, 64, 0.06);
}

.main-navigation ul,
.main-navigation .nav-menu,
.main-navigation ul li,
.main-navigation .nav-menu > li {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-navigation ul li a,
.main-navigation .nav-menu > li > a {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 20px !important;
  color: #FFFFFF !important;
  background-color: transparent !important;
  font-weight: 600;
  line-height: 20px !important;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.main-navigation ul li:hover > a,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-ancestor > a,
.main-navigation .nav-menu > li:hover > a {
  color: #2C9D99 !important;
  background-color: #FFFFFF !important;
}

/* 5. Content und SiteOrigin-Layouts */
#main .panel-grid-cell,
.site-content .panel-grid-cell,
#primary .panel-grid-cell {
  padding: 30px 15px !important;
}

/* 6. Content-Widget-Titel */
#main h3.widget-title,
#main .widget-title,
.site-content h3.widget-title,
.site-content .widget-title {
  margin: 0 0 24px !important;
  padding: 0 !important;
  border: none !important;
  color: #404040 !important;
  background: transparent !important;
  font-size: 24px;
  font-weight: 700 !important;
  line-height: 1.3;
}

#main .widget-title::after,
.site-content .widget-title::after {
  display: block;
  width: 55px;
  height: 4px;
  margin-top: 10px;
  border-radius: 2px;
  background-color: #2C9D99;
  content: "";
}

/* 7. Shortcodes Ultimate: Boxen */
.su-box {
  overflow: hidden;
  border: 1px solid #2C9D99 !important;
  border-radius: 6px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(64, 64, 64, 0.06);
}

.su-box-title {
  padding: 11px 15px !important;
  color: #FFFFFF !important;
  background-color: #2C9D99 !important;
  font-weight: 700 !important;
  line-height: 1.4;
}

.su-box-content {
  padding: 18px 15px !important;
  background-color: #FFFFFF;
}

.su-box-content a {
  color: #2C9D99;
  font-weight: 600;
  text-decoration: none;
}

.su-box-content a:hover {
  color: #404040;
  text-decoration: underline;
}

/* 8. Spoiler und Accordion */
.su-spoiler {
  margin-bottom: 12px;
}

.su-spoiler-title {
  padding: 12px 16px !important;
  border-radius: 4px 4px 0 0;
  color: #FFFFFF !important;
  background-color: #2C9D99 !important;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.su-spoiler-title:hover {
  background-color: #404040 !important;
}

.su-spoiler-content {
  padding: 18px !important;
  border: 1px solid #C8DEDD;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(64, 64, 64, 0.06);
}

/* 9. Buttons */
.su-button {
  border-radius: 4px !important;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.su-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(64, 64, 64, 0.10);
}

.su-button:active {
  transform: translateY(0);
}

/* 10. CI-Flächen */
.wide-blue,
#search-icon #search-icon-icon,
#pre-header-div {
  color: #FFFFFF !important;
  background-color: #2C9D99 !important;
}

/* 11. Tabellen */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: #FFFFFF;
}

th {
  padding: 10px 12px;
  color: #FFFFFF;
  background-color: #2C9D99;
  font-weight: 700;
  text-align: left;
}

td {
  padding: 10px 12px;
  border-bottom: 1px solid #D1D2D3;
}

tr:nth-child(even) td {
  background-color: #E9F1F1;
}

/* 12. Formulare */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #D1D2D3;
  border-radius: 4px;
  color: #404040;
  background-color: #FFFFFF;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #2C9D99;
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 157, 153, 0.15);
}

/* 13. Login-Panel */
.panel-row-style-login-panel {
  background-color: transparent;
}

/* 14. Fokus und Barrierefreiheit */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.su-button:focus-visible {
  outline: 3px solid #F08202;
  outline-offset: 3px;
}

.main-navigation a:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -4px;
}

/* 15. Footer */
footer,
#colophon,
.site-footer {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #FFFFFF !important;
  background-color: #2C9D99 !important;
}

footer .panel-grid,
#colophon .panel-grid,
.site-footer .panel-grid {
  align-items: flex-start !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

footer .panel-grid-cell,
#colophon .panel-grid-cell,
.site-footer .panel-grid-cell {
  padding: 28px 15px 10px !important;
}

footer .widget,
#colophon .widget,
.site-footer .widget {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

footer .widget-title,
#colophon .widget-title,
.site-footer .widget-title {
  margin: 0 0 12px !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  line-height: 1.3;
}

footer .widget-title::after,
#colophon .widget-title::after,
.site-footer .widget-title::after {
  display: none !important;
}

footer p,
#colophon p,
.site-footer p {
  margin-top: 0;
  margin-bottom: 5px;
  color: #FFFFFF !important;
  line-height: 1.5;
}

footer a,
#colophon a,
.site-footer a {
  color: #FFFFFF !important;
  text-decoration: none;
}

footer a:hover,
#colophon a:hover,
.site-footer a:hover {
  color: #FFFFFF !important;
  opacity: 0.8;
  text-decoration: underline;
}

/* Footer-Logo und Benutzer-Icon behalten ihre vorhandene Darstellung. */

/* 16. Copyright */
#text-7 {
  position: static !important;
  clear: both;
  width: 100%;
  margin: 2px 0 0 !important;
  padding: 6px 0 8px !important;
  color: #FFFFFF !important;
  font-size: 13px;
  text-align: center;
}

/* Adresse ausblenden */
#Adresse {
  display: none !important;
}

/* 17. Infoboxen */
.cobus-info {
  padding: 16px 18px;
  border-left: 4px solid #2C9D99;
  border-radius: 4px;
  background-color: #E9F1F1;
}

.cobus-highlight {
  padding: 16px 18px;
  border-left: 4px solid #F4A663;
  border-radius: 4px;
  background-color: rgba(244, 166, 99, 0.15);
}

/* 18. Sticky Sidebar auf größeren Bildschirmen */
@media (min-width: 782px) {
  #secondary {
    position: sticky;
    top: 20px;
    align-self: flex-start;
  }
}

/* 19. Mobile */
@media (max-width: 780px) {
  html body div[class*="so-mobilenav-mobile"] ul,
  html body div[class*="so-mobilenav-mobile"] .menu,
  html body div[class*="so-mobilenav-mobile"] .menu > li,
  html body div[class*="so-mobilenav-mobile"] .sub-menu {
    background-color: #2C9D99 !important;
  }

  html body div[class*="so-mobilenav-mobile"] .menu li a {
    padding: 12px 15px !important;
    color: #FFFFFF !important;
    font-weight: 600;
  }

  html body div[class*="so-mobilenav-mobile"] a.mobilenav-main-link {
    color: #FFFFFF !important;
    background-color: #2C9D99 !important;
    font-weight: 600;
  }

  html body div[class*="so-mobilenav-mobile"] .mobile-nav-icon {
    color: #FFFFFF !important;
  }

  #main .panel-grid-cell,
  .site-content .panel-grid-cell,
  #primary .panel-grid-cell {
    padding: 24px 15px !important;
  }

  #main .widget-title,
  .site-content .widget-title {
    font-size: 21px;
  }

  footer .panel-grid-cell,
  #colophon .panel-grid-cell,
  .site-footer .panel-grid-cell {
    width: 100% !important;
    padding: 22px 15px 10px !important;
  }

  #text-7 {
    margin-top: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 7px !important;
  }
}

/* 20. Kleine Displays */
@media (max-width: 480px) {
  body {
    font-size: 15px;
  }

  h1 {
    font-size: 27px;
  }

  h2 {
    font-size: 24px;
  }

  h3 {
    font-size: 21px;
  }

  #main h3.widget-title,
  #main .widget-title,
  .site-content h3.widget-title,
  .site-content .widget-title {
    font-size: 20px;
  }

  .su-box-content {
    padding: 15px 12px !important;
  }

  .su-box-title {
    padding: 10px 12px !important;
  }
}

/* 21. Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Logo im Vantage-Header verkleinern */
#masthead .hgroup .logo img,
#masthead .hgroup .logo-wrapper img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 432px !important;
  max-height: 80px !important;
  object-fit: contain;
}

/* Falls das Logo als Hintergrundbild eingebunden ist */
#masthead .hgroup .logo,
#masthead .hgroup .logo-wrapper {
  background-size: contain !important;
}