.ce_form {
  container-name: formContentContainer;
  container-type: inline-size;
}

.fieldset {
	border: 0px solid #e6e6e6;
	width: auto;
	height: var(--button-size);
	background-color: var(--backgroundGrey);
	border-radius: 100em;
	display: flex;
	align-items: center;
	justify-items: left;
	justify-content: space-between;
	font-size: var(--titelSize);
	padding: 0 0rem 0 0;
  max-width:300px;
}

input {
	_font-size: var(--titelSize);
	_font-weight: 600;
	-font-family: var(--mainFont);
	font-size:1.2rem;
	background-color: transparent;
	border:0;
	box-shadow: none;
	width: 8ch;
	heigh: calc(var(--button-size)*1.6);
  transition: all .5s ease-in-out;
}

.widget-checkbox label span {
  display: flex;
}

/* Base checkbox style */
input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* Focus state */
input[type="checkbox"]:focus {  
  outline: 2px solid #FF003F; /* green outline */
  outline-offset: 2px;
}

/* Optional: checked + focus */
input[type="checkbox"]:checked:focus {
  outline: 2px solid #FF003F; /* blue outline when checked */
}


/* Basis-Styling */
select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}

/* Fokuszustand */
select:focus {
  outline: none; /* entfernt den Standard-Fokusrahmen */
  border: var(--semmel-red) 2px solid; /* grün */
  /*box-shadow: 0 0 5px 2px rgba(240, 169, 4, 0.5); /* Glow-Effekt */
}

/* Optional: wenn disabled */
select:disabled {
  background-color: #f2f2f2;
  color: #999;
}


select option {
  background-color: #fdfffd; /* hellgrau */
  color: #333;              /* Textfarbe */
}


select:hover > option {
  background-color: #b5beb125 !important;
}


select:not(:has(> option[value="empty"]:checked)) {
	background: #D5D5D3;
	color:#000;
  font-weight: bold;
}


.widget-radio label  {
  display: flex;
}

.zustimmung   {
  display: flex;

}

.zustimmung input {
  margin-right: 15px;
}


.widget-radio label input {
width: 20px;
  height: 20px;
  margin-right: 15px;
}
.widget-radio label input:focus {
    outline: none; /* entfernt den Standard-Fokusrahmen */
  border-color: #3b00fd; /* grün */
  box-shadow: 0 0 5px 2px rgba(240, 169, 4, 0.5); /* Glow-Effekt */
}



input:focus-visible {
	outline:none;
}
label {
  font-weight:500;
  font-size: clamp(.65rem, 2vw, .7rem);
  text-transform: uppercase;
}

.input-wrap {
	width:80%;
}

/* ------------------   NEWLETTER ----------------- */
.newsletterAbo a {
	text-transform: uppercase;
}
.newsletterAbo .linkWrapper{
	margin-top:.5rem;
}
#newsletter {
  margin-top:1vh;
  _left:-10px;
  position: relative;
}

#newsletter .fieldset .input-wrap {
    justify-content: left!important; 
    padding-left: 10px;
}
#newsletter .fieldset input {
    border-radius: 100rem;
    border-radius: 100rem;
    width: 100%;
    height: var(--button-size);
    padding: 0px .5vw;
    border:0;
    font-size:1rem;
    _width: 20ch;
    max-width:300px;
    left:5px;
    padding-left:20px;
}
#newsletter .fieldset input:focus{
  background-color:transparent;
}
.akkreditierung_additional_option{
/*display:none;*/
}
.akkreditierung_redakteur_option.sichtbar,
.akkreditierung_fotograf_option.sichtbar,
.akkreditierung_kamerateam_option.sichtbar {
  display:flex;
  display:flex;
  flex-direction: column;
}
.akkreditierung_additional_option  {
  
}
.akkreditierung_additional_option input {
  max-width:5ch;
}
.widget-text.akkreditierung_additional_option label {
  padding-right:30px;
}
/*
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

*/
.formbody h2 {
  border-bottom:1px solid var(--lightlineColor);
  padding-bottom:1vh;
  font-size: var(--page-menue-size);
  text-transform:uppercase;
}
fieldset {
	border:0;
  margin:0;
  padding:0;
	margin-bottom:1vh;
	padding-bottom:1vh;
	_border-bottom: 1px solid var(--lightlineColor);
}
fieldset>legend {
	display:none;
}
#concert_data {
	display: none;
}
.checkbox_container {
	display: flex;
	flex-direction: row;
	gap:10px;
  display: grid;
  _grid-template-columns: repeat(auto-fill, minmax(160px , 1fr));
  gap:2rem;
}
.switch {
  position: relative;
  display: flex;
  width: auto;
  overflow: clip;
  flex-direction: column;
}


label.switch>input,
label.switch>radio { 
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch .custom_label {
 position: relative;
 cursor: pointer;
 display: flex;
 top: 0;
 padding-left: 30px;
 padding-right: 30px;
  transition: .4s;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg id="plus-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><polygon style="enable-background:accumulate; fill:white;" points="92.1,50.1 68.6,50.1 68.6,26.1 50.6,26.1 50.6,50.1 26.1,50.1 26.1,68.1,50.6,68.1 50.6,92.1 68.6,92.1 68.6,68.1 92.1,68.1"/></svg>'); 
  background-position: top left;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: calc(var(--button-size) * .65);
  background-position-y: 0px;
  overflow: hidden;
  flex-direction: column;
  line-height: 1.4em;
  font-size:1rem;
}

.switch .custom_label:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 0px;
  top: 0px;
  background-color: var(--semmel-red);
  -webkit-transition: .4s;
  transition: .4s;
  z-index:-3;
  border-radius:100rem;
}
.switch .custom_label:after {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 2px;
  top: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;z-index:5;
  border-radius:100rem;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg id="pfeil-icon" class="pfeil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><polygon display="inline" style="enable-background:accumulate; fill:red;" points="70.6,47.6 47.6,24.6 36.1,36.1 59.1,59.1 36.1,82.1 47.6,93.6 70.6,70.6 82.1,59.1"/></svg>');
  
}
.akkreditierung {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px , 1fr)); 
 gap:2vh;
}
fieldset.conditional{
  border:0;
}

.conditional input{
  opacity:1!important;
  height:auto!important;
  _width:100%!important;
  position: relative!important;
}
.akkreditierung .conditional{
  /*opacity: 0;*/
  height:0px;
  transition: all .5s ease-in-out;
  margin:0;
  padding:0;
  display: flex;
  flex-direction: row;
}
.akkreditierung .conditional label {
  max-width: 17ch;
  line-height: 1.2;
}
.akkreditierung .conditional input {
  max-width:10ch;
}
.akkreditierung .checkbox:checked ~ .conditional
 {
  opacity: 1;
  height:auto;
  margin-top:2vh;
}


.switch input:checked + .custom_label {
  _background-color: var(--semmel-red);
}

.switch input:focus + .custom_label {
  _box-shadow: 0 0 1px var(--semmel-red);
}

.switch input:checked + .custom_label:after {
  -webkit-transform: translateX(-26px);
  -ms-transform: translateX(-26px);
  transform: translateX(-26px);
}

.select_liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px , 1fr));
	gap:2vh;
}

.select-wrapper {
  position: relative;
  display:flex;
  flex-direction:column;
  _width: 200px;
}

.select-wrapper::before {
  color: #fff;
  font-size: 20px;
  pointer-events: none;
  position: absolute;
  right: 15px;
  top: 10px;
}
.select-wrapper .label {

}
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 100rem;
  _box-shadow: 2px 2px 5px 1px rgba(0,0,0,.3);
  background-color:var(--backgroundGrey);
  color:black;
  cursor: pointer;
  font-size: 16px;
  height: 50px;
  outline: none;
  padding: 1vh 2vw;;
  _width: 100%;
  transition: all .5s ease-in-out;
}

/*
select:not(:has(> option[value="empty"]:checked)) {
	background: rgb(98, 98, 98);
	color:white;
}
  */

select::-ms-expand {
  display: none;
}

select:focus::-ms-value {
  background-color: transparent;
}
select {
	font-weight:300;
	_font-size:1.1rem;
	font-family: "Montserrat", sans-serif;
}

.widget-radio .radio_container{
	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(160px , 1fr));
  gap:2vh;
}

.medium {
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(260px , 1fr));
	gap:2em;
}
.medium > div {
	display:flex;
	flex-direction:column;
}


	
.mod_login #autologin {
	width:14px;
}

.mod_login .widget-text, .mod_login .widget-password{
	margin-bottom:15px;
}	

.mod_login form .widget-text label, .mod_login form .formbody .widget-password label {
	width: 185px !important;
	display: inline-block !important;
}	
	

input[type="text"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea {
  border:1px solid black;
  padding:.5vw 1.5vh;
  font-size:.9em;
  font-weight:400;
  font-family: "Montserrat", sans;
  width:auto;
}
textarea {
  width:50ch;
  max-width:60ch;
}
input:active,
input:focus,
textarea:focus {
  background-color: #ff000025;
}


fieldset.redaktion,
fieldset.persoenliche-daten,
fieldset.persoenliche-daten-kontakt {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:2vh;
  _padding: 3vh 0;
}
fieldset.redaktion>div,
fieldset.persoenliche-daten>div,
fieldset.persoenliche-daten-kontakt>div,
.widget-textarea {
  display:flex;
  flex-direction: column;
} 
.persoenliche-daten {
  border:0;
}

.seperator {
  padding-top:3vh!important;
}

button,
.page_button {
    background-color: var(--semmel-red);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:100rem;
    color: #fff;
    font-family: 'Montserrat';
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    border:none;
    padding: 1vh 2vw;
    margin-top:3vh;
    transition:all .3s ease-in-out;
}

button:hover {
  background-color: var(--lightlineColor);
  color:black;
}


@container formContentContainer ( min-width: 100px ) {
  .select-wrapper {
    width:80vw;
  }
}
@container formContentContainer ( min-width: 600px ) {
  .select-wrapper {
    width:auto;
  }
}