/* Buttons fuer das Relaunch-Layout */
/* Buttons sollten im Zweifel immer in dein div.button_container gepackt werden */

/*
Folgende Buttons sind moeglich:
    GROSSE BUTTONS (C2A):
    <s:submit theme="gui" type="submit" cssClass="c2abutton orange" value="weiter" src="arrow-right" />
    <s:submit theme="gui" type="button" cssClass="c2abutton orange" value="weiter" src="arrow-right" /> 
    
    NORMALE / KLEINE BUTTONS:
    <s:submit theme="gui" type="submit" cssClass="button orange" value="Tagungspauschale einf&uuml;gen" />
    <s:submit theme="gui" type="button" cssClass="button orange" value="Tagungspauschale einf&uuml;gen" />
    <s:a      theme="gui"               cssClass="button orange" href="#">klick hier</s:a>

    ... + verschiedene Kombinationen mit Icons

    ZURUECK:
    ========
    GROSSE BUTTONS:
    <s:submit theme="gui" type="submit" cssClass="c2abutton back" value="zurueck" src="arrow-left" />
    <s:submit theme="gui" type="button" cssClass="c2abutton back" value="zurueck" src="arrow-left" />
    <s:a      theme="gui"               cssClass="c2abutton back" href="#">zur&uuml;ck</s:a>
    
    NORMALE / KLEINE BUTTONS:
    <s:submit theme="gui" type="submit" cssClass="button back" value="zurueck" src="arrow-left" />
    <s:submit theme="gui" type="button" cssClass="button back" value="zurueck" src="arrow-left" />
    <s:a      theme="gui"               cssClass="button back" href="#">zur&uuml;ck</s:a>
    
    
    Details:
    - die css-Klasse button bzw c2aButton bestimmt die Groesse des Buttons
    - css-Klassen fuer Hintergruende: orange, blue, (back)
    - Positionierungs-css-Klassen: die zus&auml;tzliche Angabe der Klasse right floatet den Button nach rechts, Standard ist links
    
    
    ACHTUNG !!! 
    Diese Liste ist nicht vollstaendig! Alle erdenklichen Buttons sind auf unserer Testseite ersichtlich
*/

button, input[type="submit"], input[type="button"], a {
    cursor: pointer;
}

.left {
    float: left;
}

.right {
    float: right;
}

/* Container fuer die Buttons */
div.button_container {
    overflow: hidden;
    width: 100%;
    position: relative;
}

div.button_container.abstandOben {
    margin-top: 27px;
}

div.button_container.abstandUnten {
    margin-bottom: 27px;
}

* + div.button_container {
    margin-top: 20px;
}

.formularelement > div.button_container {
    display: inline;    
}

/* Klasse margin kann evtl. weg... pruefen ob die Breitenangabe nicht wg. Browserkomp. war */
div.button_container.margin {
/*     padding: 30px 0 20px 0; */
/*     padding: 10px 0 0 0; */
    width: auto;
/*     border-top: 1px solid #C8C8C8; */
}

/* Buttons */
div.button,
div.c2abutton {
    position: relative;
    text-align: center;
}

/* kleiner Button */
div.button {
    margin: 0 20px 0 0; /* Buttons bekommen margin nach rechts */
    font-size: var(--fs_xx_small);
}

div.button.right {
    margin: 0 0 0 20px; /* Buttons bekommen margin nach links */
}

/* grosser Button */
div.c2abutton {
    margin: 0 20px 0 0; /* Buttons bekommen margin nach rechts */
}

div.c2abutton.right {
    margin: 0 0 0 20px; /* Buttons bekommen margin nach links */
}

div.button span.pfeil_rechts,
div.button span.pfeil_links,
div.button span.pfeil_rechts_dunkel,
div.button span.pfeil_links_dunkel,
div.button span.lupe_rechts,
div.button span.lupe_links,
div.button span.karte_rechts,
div.button span.karte_links,
div.button span.plus_rechts, 
div.button span.plus_links,
div.button span.kopieren_links,
div.button span.x_links,
div.c2abutton span.pfeil_rechts,
div.c2abutton span.pfeil_links,
div.c2abutton span.pfeil_rechts_dunkel,
div.c2abutton span.pfeil_links_dunkel,
div.c2abutton span.lupe_rechts,
div.c2abutton span.lupe_links,
div.c2abutton span.karte_rechts,
div.c2abutton span.karte_links,
div.c2abutton span.plus_rechts, 
div.c2abutton span.plus_links,
div.c2abutton span.kopieren_links,
div.c2abutton span.x_links,
div.button.back a:only-child:before,
div.c2abutton.back a:only-child:before {
    font-family: var(--fa-style-family,"Font Awesome 6 Pro");
    font-weight: var(--fa-style,900);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}
div.button span.pfeil_links,
div.button span.pfeil_links_dunkel,
div.button span.lupe_links,
div.button span.karte_links, 
div.button span.plus_links,
div.button span.kopieren_links,
div.button span.x_links,
div.c2abutton span.pfeil_links,
div.c2abutton span.pfeil_links_dunkel,
div.c2abutton span.lupe_links,
div.c2abutton span.karte_links, 
div.c2abutton span.plus_links,
div.c2abutton span.kopieren_links,
div.c2abutton span.x_links,
div.button.back a:only-child:before,
div.c2abutton.back a:only-child:before {
	float:left;
	margin-right: 7px;
}
div.button span.pfeil_rechts,
div.button span.pfeil_rechts_dunkel,
div.button span.lupe_rechts,
div.button span.karte_rechts,
div.button span.plus_rechts,
div.c2abutton span.pfeil_rechts,
div.c2abutton span.pfeil_rechts_dunkel,
div.c2abutton span.lupe_rechts,
div.c2abutton span.karte_rechts,
div.c2abutton span.plus_rechts {
    float:right;
    margin-left: 7px;
}
div.button span.pfeil_links:before,
div.button span.pfeil_links_dunkel:before,
div.c2abutton span.pfeil_links:before,
div.c2abutton span.pfeil_links_dunkel:before,
div.button.back a:only-child:before,
div.c2abutton.back a:only-child:before {
    content: "\f104";
}
div.button span.pfeil_rechts:before,
div.button span.pfeil_rechts_dunkel:before,
div.c2abutton span.pfeil_rechts:before,
div.c2abutton span.pfeil_rechts_dunkel:before {
    content: "\f105";
}
div.button span.lupe_links:before,
div.button span.lupe_rechts:before,
div.c2abutton span.lupe_links:before,
div.c2abutton span.lupe_rechts:before {
	content: "\f002";
}
div.button span.karte_links:before,
div.button span.karte_rechts:before,
div.c2abutton span.karte_links:before,
div.c2abutton span.karte_rechts:before {
	content: "\f279";
}
div.button span.plus_rechts:before, 
div.button span.plus_links:before,
div.c2abutton span.plus_rechts:before, 
div.c2abutton span.plus_links:before {
	content: "\002b";
}
div.button span.x_links:before,
div.c2abutton span.x_links:before,
div.button.back.cancel a:only-child:before,
div.c2abutton.back.cancel a:only-child:before {
	content: "\f00d";
}
div.button span.kopieren_links:before,
div.c2abutton span.kopieren_links:before {
    content: "\f0c5";
}


/* weisses Plus-Icon auf blau ohne Beschriftung */
#sidebar div.button.plus_only {
    margin: 1px 0 0 0;
    padding: 0;
    width: 20px;
    height: 20px;
}
#sidebar div.button.plus_only input[type=submit] {
    color: transparent;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    position: absolute;
}
#sidebar div.button.plus_only span.plus_links {
	line-height: 20px;
	width: 20px;
}


/* grosse Buttons (Typ Button oder Submit) */
div.c2abutton {
	position: relative;
    border-radius: 30px;
    overflow: hidden;
    font-size: var(--fs_medium);
    padding: 18px 22px;
    color: var(--s_neutral);
}

div.c2abutton > a,
div.c2abutton > input,
div.c2abutton > button {
    font-size: inherit;
    float: none;
    margin: -11px;
    padding: 11px;
    line-height: 22px;
    color: inherit;
    border: none;
    box-shadow: none;
    background: transparent;
    position: relative;
    z-index: 6;    
    font-family: inherit;
    font-weight: normal;
    display: inline-block;
    text-decoration: none;
}

           
/* zurueck und cancel */
/*div.c2abutton.back,
div.button.back {
    box-shadow: inset 0px 0px 0px 2px var(--s_dark_80);
    background-color: var(--hg_hell_100);
    color: var(--s_dark_80);
    transition: .2s ease-in-out;
}
div.c2abutton.back:hover,
div.button.back:hover {
    background-color: var(--hg_hell_70);
    box-shadow: inset 0px 0px 0px 2px var(--hg_hell_70);
}
*/
div.c2abutton.back,
div.button.back {
    background-color: var(--element-background);
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 4px;
    font-size: 1rem;
    padding: 11px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
div.c2abutton.back:hover,
div.button.back:hover {
    background-color: var(--body-background);
}
            


/* kleine Buttons (Typ Button) */
div.button {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    padding: 12px 22px;
    color: var(--s_neutral);
}
div.button > a,
div.button > button,
div.button > input {
    font-size: inherit;
    float: none;
    margin: -12px -52px;
    padding: 12px 52px;
    line-height: 16px;
    color: inherit;
    border: none;
    box-shadow: none;
    background: transparent;
    position: relative;
    z-index: 6;    
    font-family: inherit;
    font-weight: normal;
    display: inline-block;
    text-decoration: none;
}

/* BEGINN: HINTERGRUNDFARBEN */

/* ORANGE 
div.button.orange,
div.c2abutton.orange {
    background-color: var(--v_highlight_1);
    background-image: linear-gradient(to bottom, var(--v_highlight_1) 0%, var(--v_highlight_2) 100%);
    transition: .3s ease-in-out;
}
div.button.orange:hover,
div.c2abutton.orange:hover {
    color: var(--s_dark_80);
}
div.button.orange.deaktiviert:hover,
div.c2abutton.orange.deaktiviert:hover {
    color: var(--s_neutral);
}
*/
div.button.orange,
div.c2abutton.orange {
    background-color: var(--primary);
    color: var(--element-background);
    padding: 11px;
    text-align: center;
    border-radius: 4px;
    font-size: 1rem;
    display: flex;
    gap: .5rem;
    align-items: center;
    max-width: fit-content;
}
div.button.orange:hover,
div.c2abutton.orange:hover {
    background-color: var(--primary);
}
div.button.orange.deaktiviert:hover,
div.c2abutton.orange.deaktiviert:hover {
    background-color: var(--s_neutral);
}

/* BLAU */
/*div.button.blue,
div.c2abutton.blue {
    background-color: var(--v_dezent_1);
    background-image: linear-gradient(to bottom, var(--v_dezent_1) 0%, var(--v_dezent_2) 100%);
    transition: .2s ease-in-out;
}*/
div.button.blue,
div.c2abutton.blue {
    background-color: var(--element-background);
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 4px;
}
div.button.blue:hover,
div.c2abutton.blue:hover {
    background-color: var(--body-background);
}

/* Styling fuer 'deaktiviert' */
div.button.deaktiviert,
div.c2abutton.deaktiviert,
div.button.blue.deaktiviert:hover,
div.c2abutton.blue.deaktiviert:hover {
    opacity: 0.3;
    filter: alpha(opacity=30);
}

/* ENDE: HINTERGRUNDFARBEN */

/*BEGINN: PAGINATION-BUTTONS*/
div.button.pagination:hover {
	/*color: var(--s_neutral);*/
	background-color: var(--body-background);
}
div.button.pagination span {
    padding: 0;
    margin: 0;
}
div.button.pagination span,
div.button.pagination a,
div.button.pagination button,
div.button.pagination .spacer {
    position: relative;
    cursor: default;
    float: left;
    line-height: 16px;
}

div.button.pagination a,
div.button.pagination button,
div.button.pagination .spacer {
    font-family: var(--fa-style-family,"Font Awesome 6 Pro");
    font-weight: var(--fa-style,900);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    transition: .2s ease-in-out;
}
div.button.pagination .spacer {
	padding: 0 6px;
	color: transparent;
}
div.button.pagination a.pfeil_links,
div.button.pagination button.pfeil_links {
	padding: 12px 12px 12px 22px;
    margin: -12px 0 -12px -22px;
}
div.button.pagination a.pfeil_rechts,
div.button.pagination button.pfeil_rechts {
    padding: 12px 22px 12px 12px;
    margin: -12px -22px -12px 0;
}
div.button.pagination a.pfeil_links:hover,
div.button.pagination a.pfeil_rechts:hover,
div.button.pagination button.pfeil_links:hover,
div.button.pagination button.pfeil_rechts:hover {
    color: var(--s_dark_80);
}
div.button.pagination a.pfeil_links:before,
div.button.pagination button.pfeil_links:before,
div.button.pagination .spacer:before {
    content: "\f104";
}

div.button.pagination a.pfeil_rechts:before,
div.button.pagination button.pfeil_rechts:before {
    content: "\f105";
}

/*ENDE: PAGINATION-BUTTONS*/

/* START: Special Buttons */
div.checkbox {
    width: 53%;
    height: 57px;
    padding: 0 0 0 20px;
}

.button_container.checkbox {
    width: 100%;
    height: auto;
}

.button_container.checkbox .checkbox {
    width: 90%;
    
}

div.checkbox input[type='checkbox '] {
    position: relative;
    float: none;
    margin: 0;
    overflow: visible;
    z-index: 6;
}

div.checkbox label {
    position: relative;
    float: none;
    margin: 0 0 0 25px;
    color: #000;
    border: none;
    background: transparent;
    display: block;
    overflow: visible;
    top: -17px;
    clear: both;
    z-index: 6;
    width: auto !important;
}

/* END: Special Buttons */






















input.button,
button.button,
a.button {
    font-family: inherit;
    font-size: var(--fs_xx_small);
    font-weight: normal;
    line-height: 16px;
    border: none;
    display: inline-block;
    padding: 12px 22px 12px 22px;
    text-decoration: none;
    z-index: 100;
    cursor: pointer;
}

input.button.big,
button.button.big,
a.button.big {
    font-size: var(--fs_medium);
    font-weight: normal;
    line-height: 22px;
}

/*input.button.bordered,
button.button.bordered,
a.button.bordered {
    color: var(--s_dark_80);
    padding: 10px 20px 10px 20px;
    background-color: var(--hg_hell_100);
    border: 2px solid var(--s_dark_80);
    border-radius: 20px;
    transition: .2s ease-in-out;
}*/

input.button.bordered,
button.button.bordered,
a.button.bordered,
input.button.big.bordered,
button.button.big.bordered,
a.button.big.bordered {
    color: var(--element-background);
    padding: 11px;
    background-color: var(--primary);
    border-radius: 4px;
    transition: .2s ease-in-out;
}

/*input.button.big.bordered,
button.button.big.bordered,
a.button.big.bordered {
    padding: 16px 20px 18px 20px;
    border-radius: 30px;
}*/

/*input.button.bordered:hover,
button.button.bordered:hover,
a.button.bordered:hover {
    color: var(--s_dark_80);
    background-color: var(--hg_hell_70);
    border-color: var(--hg_hell_70);
}*/

input.button.action,
button.button.action,
a.button.action {
    color: var(--s_neutral);
    background-image: linear-gradient(to bottom, var(--v_highlight_1) 0%, var(--v_highlight_2) 100%);
    border-radius: 30px;
    transition: .3s ease-in-out;
}

input.button.big.action,
button.button.big.action,
a.button.big.action {
    padding: 18px 22px 20px 22px;
}

input.button.action:hover,
button.button.action:hover,
a.button.action:hover {
    color: var(--s_dark_80);
}

input.button.decent,
button.button.decent,
a.button.decent {
    color: var(--s_neutral);
    background-image: linear-gradient(to bottom, var(--v_dezent_1) 0%, var(--v_dezent_2) 100%);
    border-radius: 30px;
    transition: .2s ease-in-out;
}

input.button.big.decent,
button.button.big.decent,
a.button.big.decent { 
    padding: 18px 22px 20px 22px;
}


input.button.decent:hover,
button.button.decent:hover,
a.button.decent:hover {
    color: var(--s_dark_80);
}

input.button.borderless,
button.button.borderless,
a.button.borderless {
    padding: 10px 15px 10px 0;
    border: none;
    text-decoration: none;
    color: var(--s_dark_80);
    background: transparent;
    transition: .3s ease-in-out;
}

input.button i,
button.button i,
a.button i {
    line-height: 0;
}

input.button i.iconleft,
button.button i.iconleft,
a.button i.iconleft {
    margin-right: 7px;
}

input.button i.iconright,
button.button i.iconright,
a.button i.iconright {
    margin-left: 7px;
}

input.button.deaktiviert,
button.button.deaktiviert,
a.button.deaktiviert {
    opacity: 0.4;
}

input.button.bordered.deaktiviert:hover,
button.button.bordered.deaktiviert:hover,
a.button.bordered.deaktiviert:hover {
    background-color: var(--hg_hell_100);
    border: 2px solid var(--s_dark_80);
}

input.button.action.deaktiviert:hover,
button.button.action.deaktiviert:hover,
a.button.action.deaktiviert:hover {
    color: var(--s_neutral);
}

input.button.decent.deaktiviert:hover,
button.button.decent.deaktiviert:hover,
a.button.decent.deaktiviert:hover {
    color: var(--s_neutral);
}

input.button + .button,
button.button + .button,
a.button + .button {
    margin-left: 10px;
}