/* 2025-design fixes/ports */

/* port menu to work without js */
#header {
  --top-bar-height: calc( 2*var(--spacer-2xs) + var(--step0-line-height) );
  --header-position: 0;
}
/* og:
  header .submenu:not(.open) .inner-wrapper {
    position: relative;
    display: none !important;
  }
*/
input[id$="_expand"]:not(:checked) ~ .expandable,
input[id$="_expand"]:not(:checked) ~ .expandable-wrap .expandable {
  position: relative;
  display: none !important;
}

input[id$="_expand"]:checked ~ .submenu {
  grid-template-rows: 1fr;
}

/* make invisible navigation markers not cause random scroll issues */
.no-focus.end {
  bottom: unset !important;
}

/* change mobile menu expand to use desktop value  (rwth css lines 916 and 921) */
@media (max-width: 767.99px) {
  /* #main-nav .simplemenu.mobile[aria-expanded="false"] */
  #main-nav .simplemenu.desktop[aria-expanded="false"] .simplemenu.mobile {
    display: none;
  }
}
/* desktop line for reference:
@media (min-width: 768px) {
  #main-nav .submenu-content:not(.open) .main-view, #main-nav .simplemenu.desktop[aria-expanded="false"] {
    display: none;
  }
}*/

/* 2025-design end */



/* Redjard 2021-02-13 - migrating from CSS styled content to Fluid Styled Content messed up Links */
.ce-uploads > li * {
  display: inline;
}

#navigator .navigator-content {
  transition: max-height 0.4s ease;
  max-height: 0;
}
#navigator.expanded .navigator-content {
  max-height: 550px; /* unfortunate solution, increase if this gets a lot taller */
  /* TODO: does get a lot taller on mobile, who could have known */
}
#navigator .close{
  transition: opacity 0.4s ease;
}
#navigator:not(.expanded) .close{
  pointer-events: none;
  opacity: 0;
}

/* ############################# */
/* ###                       ### */
/* ###    General Utility    ### */
/* ###                       ### */
/* ############################# */

/* Recreated the shitty old striped backgrounds made of tiled pictures with this new hotness */
.color-1 {
  background: repeating-linear-gradient( -45deg, #D01733, #D01733 1px, #D9455B 1px, #D9455B 4.25px );
}
.color-2 {
  background: repeating-linear-gradient( -45deg, #FFE16A, #FFE16A 1px, #FFF6D0 1px, #FFF6D0 4.25px );
  color: #333;
}
.color-3 {
  background: repeating-linear-gradient( -45deg, #FF9E0D, #FF9E0D 1px, #FFB13D 1px, #FFB13D 4.25px );
  color: #000;
}
.color-4 {
  background: repeating-linear-gradient( -45deg, #58D017, #58D017 1px, #79D945 1px, #79D945 4.25px );
  color: #000;
}

/* ######################################################### */
/* ###                                                   ### */
/* ###    Support for Typo3s native Image style stuff    ### */
/* ###                                                   ### */
/* ######################################################### */

/* Alignment */
.ce-left .ce-gallery {
  float: left;
}
.ce-right .ce-gallery {
  float: right;
}

.ce-center.ce-above .ce-gallery,
.ce-center.ce-below .ce-gallery {
  display: flex;
  justify-content: center;
}

/* Max Image Size for Floats*/
.ce-intext .ce-gallery {
  max-width: 50%;
}
.ce-intext img {
  max-width: 100%;
  height: auto;
}

/* Make rows rowy */
.ce-gallery .ce-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* Spacing */
#main figure.image img {
  padding: 5px;
}
#main figcaption {
  margin: 0px 5px;
  padding: 0px 5px 5px 5px;
}
.ce-left .ce-gallery {
  margin-right: 15px;
}
.ce-right .ce-gallery {
  margin-left: 15px;
}

/* caption alignment */
#main figure.image {
  display: table;
}
#main figure.image figcaption {
  display: table-caption;
  caption-side: bottom;
}

/* Caption text */
#main figcaption {
  font-size: 120%;
}

/* Border (mainly for caption) */
.ce-intext .ce-gallery.ce-border,
.ce-gallery.ce-border .ce-outer {
  border: 1px solid #e6e6e6;
  margin-bottom: 2px; /* so borders look nice when floating images touch */
}


/* Latest (Veranstaltungen und News) */

#news {
  overflow: hidden;
}

/* The 'Neuigkeiten' header on top of news column */
#news .teaser-title,
#locationTeaser .teaser-title{
  padding: 15px 0;
  font-size: 160%;
  text-transform: uppercase;
}

#news .news-element {
  font-size: 140%;
  line-height: 130%;
  border-top: 1px dotted rgba(0,0,0,0.5);
  padding: 11px 0;
  /* min-height: 65px; */
}

#news .news-element .date {
  padding: 0 0 4px 0;
  font-size: 86%;
}
#news .news-element a {
  display: inline-block;
  background: url(../img/icons/icon-sprites.png) 0 3px no-repeat;
  padding-left: 20px;
  margin-bottom: 0.5em;
}


/* ######################################## */
/* ###  General text formating classes  ### */
/* ######################################## */


.u {
  text-decoration: underline;
}


/* ######################################### */
/* ###  General style formating classes  ### */
/* ######################################### */


.hide {
  display: none !important;
}

.row {
  display: flex;
  flex-direction: row;
}
.col {
  display: flex;
  flex-direction: column;
}
.wrap {
  flex-wrap: wrap;
}
.fill {
  flex-grow: 1;
}
.flex-even > * {
  flex-grow: 1;
  flex-basis: 0;
}

.center.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hcenter {
  display: flex;
  justify-content: center;
}
.vcenter {
  display: flex;
  align-items: center;
}

#section-header {
    position: relative;
    margin: 0 auto;
    padding: 0 3.8em;
}
#section-header {
    max-width: 94.5em;
}


.button1{
  display: block;
  cursor: pointer;
  height: min-content;
  background: rgba(255,255,255,0.25);
  transition: background .2s;
  padding: 8px;
  border-radius: 5px;
  margin: 5px;
}
.button1:hover{
  background: rgba(255,255,255,0.5);
}
a.button1 {
  color: inherit;
  text-decoration: none !important;
}

.vl_table a:not(:hover), .vl_table a:hover {
  color: unset;
  text-decoration: unset;
}


/* VLUEB stack */
table[index] {
    --textinput-minwidth: 15em;
}

/* VLUEB table */
#datatable {
    --textinput-minwidth: 5em;
}





.inlineElemShield {
  overflow: hidden;
  word-break: break-word;
}
.inlineElemShield,
.mce-content-body {
  font-size: 1.0rem;
}
.mce-content-body {
  min-width: 2em;
}

/*<?php // !! this should not be visible, it should get executed as php code !!
if ( ecf::editorMode() ) {
echo "*/
.inlineElemShield {
  cursor: initial;  /* if we are in a link for example */
  pointer-events: all;
}
/*";} // !! this should not be visible, it should get executed as php code !!
?>*/

.bgstripes {
  border-image: repeating-linear-gradient( 135deg, var(--bgstripes-color_1) 0px, var(--bgstripes-color_1) var(--bgstripes-dash_size), var(--bgstripes-color_2) var(--bgstripes-dash_size), var(--bgstripes-color_2) calc(var(--bgstripes-dash_size) * 2));
  border-image-slice: var(--bgstripes-border_size);
  /*border-image-width: calc( var(--bgstripes-border_size) *1px) calc( var(--bgstripes-border_size) *1px);*/
  border-width: calc( var(--bgstripes-border_size) *1px);
  border-style: solid;
}

.ecf_bgstripes {
    --bgstripes-border_size: 3;
  --bgstripes-dash_size: 10px;
  --bgstripes-color_1: #f0f;
  --bgstripes-color_2: #0f0;
  margin: calc( var(--bgstripes-border_size) * -1.5px);
  padding: calc( var(--bgstripes-border_size) *.5px);
}


.inline_editable_image {
  position: relative;
  height: 100%;
}
.horizontal_image_gallery .inline_editable_image {
  height: auto;
}
.inline_editable_image img {
  display: block;
}
.eimg_input {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;  /* if we are in a link for example */
}
.eimg_input > * {
  background: #888b;
}
.eimg_input input {
  display: none;
/*  font-size: inherit;*/
/*  padding: 1rem;*/
/*  font-size: 1.2rem;*/
}
.eimg_input label {
  display: block;
  padding: 1rem;
/*  padding-bottom: 0;*/
/*  margin-bottom: -0.5rem;*/
  font-size: 1.0rem;
}