/* Custom CSS */

/* =========================================================
   Allgemein (Divi Theme)
   ========================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }

  h1.entry-title {
    background: #121722 !important;
    border: 1px solid #1f2a3a !important;
  }
}

h1.entry-title {
  padding: 20px;
  text-align: center;
  letter-spacing: 1px;
  background: #e4f2f7;
  border: 1px solid #b4cfd8;
  border-radius: 10px;
}

.container {
  width: 90%;
}

.et_pb_row {
  width: 90%;
}

/* =========================================================
   Footer (Divi Theme Builder)
   Required classes:
   - Section:      footer
   - Row:          footer-row
   - Left column:  footer-col-left
   - Right column: footer-col-right
   - Logo module:  footer-logo
   ========================================================= */

/* ---------------------------------------------------------
   Tokens (easy tweaks)
   --------------------------------------------------------- */
:root {
  --footer-bg: #f3f5f7;
  --footer-border: #e3e6ea;

  --footer-padding-y: 14px;
  --footer-logo-max-h: 34px;

  --footer-link: #6b7280;
  --footer-link-hover: #111827;

  --footer-gap: 14px;

  /* side padding for tablet/phone */
  --footer-pad-x-tablet: 20px;
  --footer-pad-x-phone: 20px;
}

/* ---------------------------------------------------------
     Base (fix Divi default section spacing!)
     --------------------------------------------------------- */
.footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);

  /* Divi sections often have large default padding (e.g. 4%). */
  padding: 0 !important;
}

/* Real left/right footer bar */
.footer-row {
  padding: var(--footer-padding-y) 0;
  width: 100% !important;

  display: flex;
  align-items: center;
  justify-content: space-between;

  /* stability: allow safe wrap if needed */
  flex-wrap: wrap;
  row-gap: 10px;
}

/* Remove default Divi spacing inside footer */
.footer .et_pb_module {
  margin-bottom: 0 !important;
}

/* Divi columns are floats by default; disable floats for flex row */
.footer-row > .et_pb_column {
  float: none !important;
}

/* IMPORTANT: prevent Divi 50/50 widths from breaking the flex layout */
.footer-row .footer-col-left,
.footer-row .footer-col-right {
  width: auto !important;
}

/* ---------------------------------------------------------
     Columns (left + right)
     --------------------------------------------------------- */
.footer-col-left,
.footer-col-right {
  display: flex;
  align-items: center;
  padding: 0 !important;
}

.footer-col-left {
  justify-content: flex-start;
  flex: 0 0 auto; /* shrink to logo width */
}

.footer-col-right {
  justify-content: flex-end;
  flex: 1 1 auto; /* take remaining space */
  gap: var(--footer-gap); /* spacing between the two links */
  flex-wrap: nowrap; /* keep links on one line on desktop */
}

/* ---------------------------------------------------------
     Logo
     --------------------------------------------------------- */
/* Do NOT center the logo globally (that caused tablet issues) */
.footer-logo {
  margin: 0 !important;
}

.footer-logo img {
  max-height: var(--footer-logo-max-h);
  width: auto;
  display: block;
}

/* ---------------------------------------------------------
     Buttons styled as text links (for both legal links)
     --------------------------------------------------------- */
.footer-col-right .et_pb_button_module_wrapper {
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
}

.footer-col-right .et_pb_button {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;

  font-size: 14px;
  line-height: 1.2;
  color: var(--footer-link) !important;
}

.footer-col-right .et_pb_button:hover {
  color: var(--footer-link-hover) !important;
  text-decoration: underline;
}

/* Remove Divi default button icon */
.footer-col-right .et_pb_button:after {
  content: "" !important;
  display: none !important;
}

/* =========================================================
   Footer width matches Header on Tablet/Phone (80% centered)
   ========================================================= */
@media (max-width: 980px) {
  .footer .footer-row {
    width: 80% !important;
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* keep width predictable */
    box-sizing: border-box;

    /* your current code adds side padding on tablet/phone;
         remove it so the row is truly ~80% like the header */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 767px) {
  .footer .footer-row {
    width: 80% !important;
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   OLED System Dark Mode – (nur wenn OS/Browser Dark Mode aktiv hat)
   + Header optimiert (Divi)
   + Footer optimiert (Divi)
   + Tabellen optimiert
   ========================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }

  /* OLED Tokens */
  :root {
    --dm-bg: #000000;
    --dm-text: rgba(255, 255, 255, 0.92);
    --dm-muted: rgba(255, 255, 255, 0.68);
    --dm-surface: rgba(255, 255, 255, 0.06);
    --dm-surface-2: rgba(255, 255, 255, 0.1);
    --dm-border: rgba(255, 255, 255, 0.14);
    --dm-link: #7ab7ff;

    /* Table Tokens */
    --dm-table-bg: rgba(255, 255, 255, 0.04);
    --dm-table-head: rgba(255, 255, 255, 0.08);
    --dm-table-zebra: rgba(255, 255, 255, 0.03);
    --dm-table-hover: rgba(255, 255, 255, 0.06);
    --dm-table-border: rgba(255, 255, 255, 0.14);
  }

  /* Page Background wirklich dunkel */
  html,
  body {
    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
  }

  #page-container,
  #et-main-area,
  #main-content,
  .et_builder_inner_content,
  #left-area {
    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
  }

  /* WICHTIG: Divi setzt oft weiße Hintergründe auf Sektionen/Rows/Columns */
  .et_pb_section:not(.dm-keep-bg),
  .et_pb_row:not(.dm-keep-bg),
  .et_pb_column:not(.dm-keep-bg),
  .et_pb_with_background:not(.dm-keep-bg) {
    background-color: transparent !important;
  }

  /* Content Wrapper, die manchmal weiß sind */
  .et_pb_post,
  .et_pb_post_content,
  .entry-content,
  .et_pb_text_inner {
    background: transparent !important;
    color: var(--dm-text) !important;
  }

  /* Basics */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--dm-text) !important;
  }
  p,
  li {
    color: var(--dm-text) !important;
  }

  /* =========================================================
       01) Header optimiert (Divi) – schwarz, inkl. Sticky/Dropdown/Mobile
       ========================================================= */
  #main-header,
  #top-header,
  .et_fixed_nav #main-header,
  .et_fixed_nav #top-header,
  #main-header.et-fixed-header {
    background: #000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  #main-header .nav a,
  #top-menu a,
  #et_mobile_nav_menu .mobile_menu_bar:before,
  #main-header .et-social-icon a {
    color: var(--dm-text) !important;
  }

  /* Dropdown */
  #top-menu li ul,
  #top-menu-nav li ul {
    background: #000 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  #top-menu li ul a,
  #top-menu-nav li ul a {
    color: var(--dm-text) !important;
  }

  /* Mobile Menü */
  #main-header .mobile_nav .et_mobile_menu {
    background: #000 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  #main-header .mobile_nav .et_mobile_menu a {
    color: var(--dm-text) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  /* =========================================================
       02) Footer optimiert (Divi)
       ========================================================= */
  #main-footer,
  #footer-bottom {
    background: #000 !important;
    color: var(--dm-text) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  #footer-widgets {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  /* Widget Titles */
  #footer-widgets .footer-widget .title,
  #footer-widgets .footer-widget h1,
  #footer-widgets .footer-widget h2,
  #footer-widgets .footer-widget h3,
  #footer-widgets .footer-widget h4,
  #footer-widgets .footer-widget h5,
  #footer-widgets .footer-widget h6 {
    color: var(--dm-text) !important;
  }

  /* Text */
  #footer-widgets,
  #footer-widgets p,
  #footer-widgets li,
  #footer-widgets span,
  #footer-bottom,
  #footer-bottom p {
    color: rgba(255, 255, 255, 0.82) !important;
  }

  /* Links */
  #main-footer a,
  #footer-bottom a {
    color: var(--dm-link) !important;
    text-decoration-color: rgba(122, 183, 255, 0.35);
  }

  #main-footer a:hover,
  #footer-bottom a:hover {
    opacity: 0.9;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Footer Menü */
  #et-footer-nav a {
    color: rgba(255, 255, 255, 0.88) !important;
  }
  #et-footer-nav a:hover {
    color: var(--dm-link) !important;
  }

  /* Copyright */
  #footer-info {
    color: rgba(255, 255, 255, 0.65) !important;
  }

  /* Divider / Widget Listen */
  #footer-widgets .footer-widget li {
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Social Icons */
  #footer-bottom .et-social-icons a,
  #main-footer .et-social-icons a {
    color: rgba(255, 255, 255, 0.88) !important;
  }
  #footer-bottom .et-social-icons a:hover,
  #main-footer .et-social-icons a:hover {
    color: var(--dm-link) !important;
  }

  /* Footer Formulare */
  #main-footer input,
  #main-footer textarea,
  #main-footer select {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--dm-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
  }

  #main-footer input::placeholder,
  #main-footer textarea::placeholder {
    color: var(--dm-muted) !important;
  }

  /* =========================================================
       03) Tabellen optimiert (modern + lesbar)
       ========================================================= */
  .entry-content table,
  .et_pb_text table,
  .wp-block-table table,
  table {
    width: 100%;
    max-width: 100%;
    color: var(--dm-text) !important;

    border: 1px solid var(--dm-table-border) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 14px !important;

    background: var(--dm-table-bg) !important;
  }

  .entry-content thead th,
  .et_pb_text thead th,
  .wp-block-table thead th,
  thead th {
    color: var(--dm-text) !important;
    font-weight: 700;
  }

  .entry-content th,
  .entry-content td,
  .et_pb_text th,
  .et_pb_text td,
  .wp-block-table th,
  .wp-block-table td,
  th,
  td {
    padding: 12px 14px;
    border-right: 1px solid var(--dm-table-border) !important;
    border-bottom: 1px solid var(--dm-table-border) !important;
    vertical-align: top;
  }

  /* keine doppelte Linie am Rand */
  .entry-content tr > *:last-child,
  .et_pb_text tr > *:last-child,
  .wp-block-table tr > *:last-child,
  tr > *:last-child {
    border-right: none !important;
  }

  .entry-content tbody tr:last-child > *,
  .et_pb_text tbody tr:last-child > *,
  .wp-block-table tbody tr:last-child > *,
  tbody tr:last-child > * {
    border-bottom: none !important;
  }

  /* Zebra + Hover */
  .entry-content tbody tr:nth-child(odd),
  .et_pb_text tbody tr:nth-child(odd),
  .wp-block-table tbody tr:nth-child(odd),
  tbody tr:nth-child(odd) {
    background: var(--dm-table-zebra) !important;
  }

  .entry-content tbody tr:hover,
  .et_pb_text tbody tr:hover,
  .wp-block-table tbody tr:hover,
  tbody tr:hover {
    background: var(--dm-table-hover) !important;
  }

  caption {
    color: var(--dm-muted) !important;
  }

  /* Mobile: horizontales Scrollen */
  @media (max-width: 767px) {
    .entry-content table,
    .et_pb_text table,
    .wp-block-table table,
    table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}

/* =========================================================
   Divi Back To Top – Modern Glass Squircle (robust)
   ========================================================= */

#page-container .et_pb_scroll_top,
.et_pb_scroll_top {
  /* Größe & Form */
  width: 56px !important;
  height: 56px !important;
  border-radius: 18px !important;

  /* Position */
  right: 22px !important;
  bottom: 22px !important;
  position: fixed !important;

  /* Glass Look */
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;

  /* Modern shadow */
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18) !important;

  /* Layout */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* damit der Shine sauber sitzt */
  overflow: hidden !important;
  z-index: 99999 !important;
}

/* Icon */
#page-container .et_pb_scroll_top:before,
.et_pb_scroll_top:before {
  font-size: 35px !important;
  line-height: 1 !important;
  color: rgba(17, 19, 24, 0.92) !important;
}

/* Shine-Overlay */
#page-container .et_pb_scroll_top:after,
.et_pb_scroll_top:after {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: 17px !important;
  pointer-events: none !important;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0.18) 35%,
    rgba(255, 255, 255, 0.06) 60%,
    rgba(255, 255, 255, 0)
  ) !important;
  opacity: 0.9 !important;
}

/* Hover */
@media (hover: hover) {
  #page-container .et_pb_scroll_top:hover,
  .et_pb_scroll_top:hover {
    transform: translateY(-4px) !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22) !important;
  }
}

/* Keyboard focus */
#page-container .et_pb_scroll_top:focus-visible,
.et_pb_scroll_top:focus-visible {
  outline: 3px solid rgba(10, 102, 194, 0.55) !important;
  outline-offset: 4px !important;
}

/* Dark (system) */
@media (prefers-color-scheme: dark) {
  #page-container .et_pb_scroll_top,
  .et_pb_scroll_top {
    background: rgba(18, 20, 26, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55) !important;
  }
  #page-container .et_pb_scroll_top:before,
  .et_pb_scroll_top:before {
    color: rgba(255, 255, 255, 0.92) !important;
  }
  #page-container .et_pb_scroll_top:after,
  .et_pb_scroll_top:after {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0.06) 35%,
      rgba(255, 255, 255, 0.02) 60%,
      rgba(255, 255, 255, 0)
    ) !important;
  }
}

/* Mobile */
@media (max-width: 480px) {
  #page-container .et_pb_scroll_top,
  .et_pb_scroll_top {
    right: 16px !important;
    bottom: 16px !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
  }
}