/* Cassiopeia user.css (clean, ASCII-only) */

:root{
  --brand: #1f5cff;
  --radius: 18px;
  --line: rgba(15,23,42,.10);
  --shadow: 0 16px 40px rgba(15,23,42,.12);
  --glass: rgba(246,248,255,.68);
  --gap-under-header: 12px; /* konstant kleiner Abstand unter Header */
}

/* base */
html, body{ overflow-x: hidden !important; }
html, body, body.site{ background: transparent !important; }

/* Background image only (no blue overlay on the image itself) */
body.site .site-grid{
  min-height: 100vh !important;
  background: #0b1220 url("/images/chess.jpg") center/cover no-repeat fixed !important;
  gap: 0 !important;
  row-gap: 0 !important;
  padding-top: 0 !important;
}
@media (max-width: 768px){
  body.site .site-grid{ background-attachment: scroll !important; }
}

/* Remove template overlay layers */
body.site::before, body.site::after,
.site::before, .site::after,
.site-grid::before, .site-grid::after,
.container-header::before, .container-header::after,
.container-banner::before, .container-banner::after{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ===== THE REAL GAP FIX (DESKTOP) =====
   The empty band is usually margin/padding on header/nav (often desktop only).
*/
body.site header.header.container-header{
  margin: 0 !important;
  padding: 0 !important;
}
body.site header.header.container-header > *{
  margin: 0 !important;
}
body.site header.header.container-header .container-nav,
body.site header.header.container-header .navbar,
body.site header.header.container-header .navbar-brand,
body.site header.header.container-header .site-title{
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Place component at a constant distance under header (same for all menu items) */
body.site .grid-child.container-component{
  margin-top: var(--gap-under-header) !important;
}

/* Glass wrapper */
body.site .container-component{
  background: var(--glass) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.25rem !important;
}
body.site .container-component > .container,
body.site .container-component > .container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 768px){
  body.site .container-component{
    padding: .85rem !important;
    border-radius: 14px !important;
  }
}

/* Normalize “first element pushes down” differences */
body.site .container-component .page-header,
body.site .container-component .breadcrumb,
body.site .container-component .breadcrumbs,
body.site .container-component h1,
body.site .container-component .alert{
  margin-top: 0 !important;
}

/* Links */
a{ color: var(--brand) !important; }
a:hover{ opacity: .92; }

/* Tables (zebra) */
body.site .container-component table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line) !important;
  border-radius: 14px;
  overflow: hidden;
}
body.site .container-component table thead th{
  background-color: rgba(31,92,255,.08) !important;
  font-weight: 800 !important;
}
body.site .container-component table tbody tr:nth-child(odd) td,
body.site .container-component table tbody tr:nth-child(odd) th{
  background-color: rgba(246,248,255,.72) !important;
}
body.site .container-component table tbody tr:nth-child(even) td,
body.site .container-component table tbody tr:nth-child(even) th{
  background-color: rgba(31,92,255,.03) !important;
}
body.site .container-component table td,
body.site .container-component table th{
  padding: .55rem .65rem !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  vertical-align: top;
}
body.site .container-component table tbody tr:last-child td,
body.site .container-component table tbody tr:last-child th{
  border-bottom: 0 !important;
}

/* Footer */
.container-footer, footer.footer{
  background: rgba(255,255,255,.70) !important;
  border-top: 1px solid var(--line) !important;
}

/* Accordion menu arrows (ASCII-safe) */
.accordion-menu .submenu-toggle{
  margin-left: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.accordion-menu li.has-sub > .submenu-toggle::after { content: "\25BC"; } /* down */
.accordion-menu li.is-open > .submenu-toggle::after { content: "\25B2"; } /* up */









/* ===== DESKTOP: remove the empty row between header and content ===== */
@media (min-width: 992px){

  /* These rows often exist but are empty -> they create the big gap on desktop */
  body.site .container-banner,
  body.site .container-top-a,
  body.site .container-top-b,
  body.site .container-below-top,
  body.site .container-breadcrumbs{
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Ensure header does not add extra space below */
  body.site header.header.container-header{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Pull content directly under header (tune if you want 8-12px) */
  body.site .grid-child.container-component{
    margin-top: 0 !important;
  }
}







/* ===== DESKTOP GAP FIX: remove empty grid row between header and content =====
   On desktop Cassiopeia uses .site-grid as CSS grid. In your case it keeps a blank row.
   Switching to normal block flow removes the big band.
*/
@media (min-width: 769px){
  body.site .site-grid{
    display: block !important;
  }

  /* keep a small constant distance below the header */
  body.site .container-header{
    margin: 0 !important;
  }
  body.site .container-component{
    margin-top: var(--gap-under-header, 12px) !important;
  }
}







/* ===== DESKTOP GRID RESTORE + GAP KILL (KEEP LAST) ===== */
@media (min-width: 992px){

  /* Ensure Cassiopeia layout stays GRID (some earlier tests set it to block) */
  body.site .site-grid{ display: grid !important; }

  /* Hard-define a simple layout: header, (content + right sidebar), footer
     This removes any "phantom" grid rows that create the big empty band. */
  body.site .site-grid{
    grid-template-columns: minmax(0, 1fr) 340px !important;
    grid-template-rows: auto 1fr auto !important;
    grid-template-areas:
      "header header"
      "component sidebar"
      "footer footer" !important;

    gap: 0 !important;
    row-gap: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Map Cassiopeia containers to the grid areas */
  body.site .container-header{ grid-area: header !important; }
  body.site .container-component{ grid-area: component !important; }

  /* Right sidebar (menu) - include fallbacks */
  body.site .container-sidebar-right,
  body.site .container-sidebar,
  body.site .sidebar-right{
    grid-area: sidebar !important;
  }

  body.site footer.footer,
  body.site .container-footer{
    grid-area: footer !important;
  }

  /* Kill any remaining push-down */
  body.site main,
  body.site .container-component,
  body.site .container-sidebar-right,
  body.site .container-sidebar{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}







/* ===== Layout tables (text + image) should NOT look like data tables ===== */
/* Use this by adding class="layout-table" to the table in the editor */
body.site .container-component table.layout-table{
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

body.site .container-component table.layout-table td,
body.site .container-component table.layout-table th{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important; /* so the glass wrapper stays visible */
  vertical-align: top !important;
}

/* make images in that layout table behave nicely */
body.site .container-component table.layout-table img{
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 14px !important;
}








/* ===== FIX: Layout table must NOT be white ===== */
body.site .container-component table.layout-table,
body.site .container-component table.layout-table td,
body.site .container-component table.layout-table th{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.site .container-component table.layout-table{
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* spacing + alignment */
body.site .container-component table.layout-table td,
body.site .container-component table.layout-table th{
  padding: 0 !important;
  vertical-align: top !important;
}

body.site .container-component table.layout-table td:first-child{
  padding-right: 1.25rem !important;
}

/* image nice */
body.site .container-component table.layout-table img{
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px;
}

/* mobile: stack columns */
@media (max-width: 768px){
  body.site .container-component table.layout-table,
  body.site .container-component table.layout-table tbody,
  body.site .container-component table.layout-table tr,
  body.site .container-component table.layout-table td{
    display: block !important;
    width: 100% !important;
  }
  body.site .container-component table.layout-table td:first-child{
    padding-right: 0 !important;
    margin-bottom: 1rem !important;
  }
}