/**
 * Buttons und Links (mM_button / mM_link)
 *
 * Farben, Rahmen und Groessen kommen als Variablen aus css/theme.php: dort
 * erzeugt jede Zeile der Repeater theme_buttons und theme_links einen eigenen
 * Regelblock (.mM_button.<slug> mit --btn_*, .mM_link.<slug> mit --lnk_*).
 * Diese Datei kennt die Varianten deshalb nicht - eine neue anzulegen erfordert
 * hier keine Aenderung.
 *
 * Die Effekt-Klassen (mM_btn_* / mM_lnk_*) setzen mm_button_effect_class() bzw.
 * mm_link_effect_class() aus den Feldern button_effekt / link_effekt.
 *
 * Aufbau: Basis -> Zustaende -> Effekte, erst Buttons, dann Links, dann Wrapper.
 * Wird ueber lib/custom-Glob automatisch geladen, nach project.css.
 */


/* ========================================================================
   Button: Basis
   ======================================================================== */

.mM_button {
	height: 100%;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	padding: 20px;
	cursor: pointer;
	background-color: var(--btn_bg);
	border: var(--btn_border_width) solid var(--btn_border_color);
	border-radius: var(--btn_border_radius);
	-webkit-transition: color .4s, background-color .4s, border-color .4s;
	-moz-transition: color .4s, background-color .4s, border-color .4s;
	-ms-transition: color .4s, background-color .4s, border-color .4s;
	-o-transition: color .4s, background-color .4s, border-color .4s;
	transition: color .4s, background-color .4s, border-color .4s;
}

/* Farbe muss explizit auch auf die Kinder: das globale * { color: var(--font_color) }
   in project.css trifft mM_button_text direkt und schlaegt damit die Vererbung. */
.mM_button,
.mM_button * {
	color: var(--btn_fg);
}

/* Transition nur auf den Kindern - am Button selbst wuerde sie die Liste oben
   ueberschreiben und background-color/border-color verlieren. */
.mM_button * {
	-webkit-transition: color .4s;
	-moz-transition: color .4s;
	-ms-transition: color .4s;
	-o-transition: color .4s;
	transition: color .4s;
}

/* Abstand und Icon-Box haengen an der Huelle, nicht am Icon selbst: beim
   icon_roll steckt das Icon zweimal darin, der Abstand kaeme sonst doppelt und
   innerhalb der Clipping-Box vor.
   Ist keine Icon-Box-Farbe gepflegt, liefert theme.php 20px + transparent -
   die Huelle ist dann optisch nicht vorhanden. */
.mM_button .mM_button_icon_wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin-left: 20px;
	width: var(--btn_icon_box_size);
	height: var(--btn_icon_box_size);
	background-color: var(--btn_icon_box_bg);
	border-radius: var(--btn_border_radius);
	-webkit-transition: background-color .4s;
	-moz-transition: background-color .4s;
	-ms-transition: background-color .4s;
	-o-transition: background-color .4s;
	transition: background-color .4s;
}

.mM_button .mM_button_icon {
	width: 20px;
	min-width: 20px;
	fill: var(--btn_fg);
	-webkit-transition: fill .4s;
	-moz-transition: fill .4s;
	-ms-transition: fill .4s;
	-o-transition: fill .4s;
	transition: fill .4s;
}


/* ========================================================================
   Button: Zustaende
   Tastaturfokus verhaelt sich wie Hover - sonst bekaeme er keine Rueckmeldung.
   ======================================================================== */

.mM_button:hover:not([disabled]),
.mM_button:focus-visible:not([disabled]) {
	background-color: var(--btn_hover_bg);
	border-color: var(--btn_hover_border_color);
}

.mM_button:hover:not([disabled]),
.mM_button:hover:not([disabled]) *,
.mM_button:focus-visible:not([disabled]),
.mM_button:focus-visible:not([disabled]) * {
	color: var(--btn_hover_fg);
}

.mM_button:hover:not([disabled]) .mM_button_icon,
.mM_button:focus-visible:not([disabled]) .mM_button_icon {
	fill: var(--btn_hover_fg);
}

.mM_button:hover:not([disabled]) .mM_button_icon_wrap,
.mM_button:focus-visible:not([disabled]) .mM_button_icon_wrap {
	background-color: var(--btn_icon_box_hover_bg);
}


/* ========================================================================
   Button-Effekt: Auffuellung (mM_btn_fill)
   Eine Flaeche laeuft von links durch den Button. Startbreite 5px als
   sichtbarer Akzentstreifen im Ruhezustand (0 = unsichtbar).
   Textfarbe, Rahmen und Icon kommen aus den Zustaenden oben.
   ======================================================================== */

.mM_button.mM_btn_fill {
	position: relative;
	z-index: 0;
	overflow: hidden;
}

.mM_button.mM_btn_fill:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 5px;
	height: 100%;
	z-index: -1;
	background-color: var(--btn_hover_bg);
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
	-webkit-transition: width .4s, border-radius .4s;
	-moz-transition: width .4s, border-radius .4s;
	-ms-transition: width .4s, border-radius .4s;
	-o-transition: width .4s, border-radius .4s;
	transition: width .4s, border-radius .4s;
}

/* Die Fuellfarbe ist die Hover-Hintergrundfarbe, deshalb darf der Hintergrund
   selbst NICHT umschalten - sonst waere die Flaeche unsichtbar. */
.mM_button.mM_btn_fill:hover:not([disabled]),
.mM_button.mM_btn_fill:focus-visible:not([disabled]) {
	background-color: var(--btn_bg);
}

.mM_button.mM_btn_fill:hover:not([disabled]):before,
.mM_button.mM_btn_fill:focus-visible:not([disabled]):before {
	width: 100%;
	border-radius: inherit;
}


/* ========================================================================
   Button-Effekt: Icon Roll (mM_btn_icon_roll)
   Zwei gleich grosse Icons liegen direkt in der Huelle (keine Zwischen-
   Huellen), getrennt durch einen Gap von 10px. Die Huelle schneidet ab;
   verschoben werden BEIDE Icons gemeinsam.

   Der Weg ist (Icon + Gap) / 2 = (20 + 10) / 2 = 15px. Dann sitzt im
   Ruhezustand das erste Icon genau in der Mitte und im Hover das zweite.
   ACHTUNG: aendert sich Icon-Groesse (20px) oder Gap, muss der Weg mit.
   ======================================================================== */

.mM_button.mM_btn_icon_roll .mM_button_icon_wrap {
	overflow: hidden;
	gap: 0 10px;
}

.mM_button.mM_btn_icon_roll .mM_button_icon_wrap > * {
	flex: 0 0 auto;
	-webkit-transform: translateX(-15px);
	-moz-transform: translateX(-15px);
	-ms-transform: translateX(-15px);
	-o-transform: translateX(-15px);
	transform: translateX(-15px);
	-webkit-transition: fill .4s, -webkit-transform .4s;
	-moz-transition: fill .4s, -moz-transform .4s;
	-ms-transition: fill .4s, -ms-transform .4s;
	-o-transition: fill .4s, -o-transform .4s;
	transition: fill .4s, transform .4s;
}

.mM_button.mM_btn_icon_roll:hover:not([disabled]) .mM_button_icon_wrap > *,
.mM_button.mM_btn_icon_roll:focus-visible:not([disabled]) .mM_button_icon_wrap > * {
	-webkit-transform: translateX(15px);
	-moz-transform: translateX(15px);
	-ms-transform: translateX(15px);
	-o-transform: translateX(15px);
	transform: translateX(15px);
}


/* ========================================================================
   Button-Effekt: Text Roll (mM_btn_text_roll)
   Das Label liegt zweimal untereinander in .mM_button_text, das Fenster ist
   genau eine Zeile hoch und schneidet ab. Beim Hover wandern BEIDE Kopien um
   eine Zeile nach oben: das sichtbare Label geht raus, die Kopie rueckt nach.

   Fensterhoehe 1.4em = 1em Schrift * 1.4 Zeilenhoehe. Beide Werte muessen
   zusammenpassen, sonst ist translateY(-100%) nicht genau eine Zeile.
   ======================================================================== */

.mM_button.mM_btn_text_roll .mM_button_text {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	line-height: 1.4;
	height: 1.4em;
}

.mM_button.mM_btn_text_roll .mM_button_text > * {
	flex: 0 0 auto;
	/* Umbruch wuerde die zweite Zeile aus dem Fenster schieben und Text abschneiden */
	white-space: nowrap;
	-webkit-transition: -webkit-transform .8s cubic-bezier(.19, 1, .22, 1), color .4s;
	-moz-transition: -moz-transform .8s cubic-bezier(.19, 1, .22, 1), color .4s;
	-ms-transition: -ms-transform .8s cubic-bezier(.19, 1, .22, 1), color .4s;
	-o-transition: -o-transform .8s cubic-bezier(.19, 1, .22, 1), color .4s;
	transition: transform .8s cubic-bezier(.19, 1, .22, 1), color .4s;
}

.mM_button.mM_btn_text_roll:hover:not([disabled]) .mM_button_text > *,
.mM_button.mM_btn_text_roll:focus-visible:not([disabled]) .mM_button_text > * {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}


/* ========================================================================
   Button-Effekt: Icon Bewegung (mM_btn_icon_motion)
   Das Icon rueckt beim Hover 10px nach rechts, die ganze Huelle wandert mit,
   damit eine gesetzte Icon-Box mitgeht.

   Bewusst per transform und nicht per margin: margin wuerde den Button
   breiter machen, also bei jedem Hover das Layout neu berechnen und
   Nachbarelemente verschieben. Die 10px laufen ins rechte Padding (20px).
   ======================================================================== */

.mM_button.mM_btn_icon_motion .mM_button_icon_wrap {
	-webkit-transition: background-color .4s, -webkit-transform .4s;
	-moz-transition: background-color .4s, -moz-transform .4s;
	-ms-transition: background-color .4s, -ms-transform .4s;
	-o-transition: background-color .4s, -o-transform .4s;
	transition: background-color .4s, transform .4s;
}

.mM_button.mM_btn_icon_motion:hover:not([disabled]) .mM_button_icon_wrap,
.mM_button.mM_btn_icon_motion:focus-visible:not([disabled]) .mM_button_icon_wrap {
	-webkit-transform: translateX(10px);
	-moz-transform: translateX(10px);
	-ms-transform: translateX(10px);
	-o-transform: translateX(10px);
	transform: translateX(10px);
}


/* ========================================================================
   Button-Effekt: Verlauf (mM_btn_gradient)
   Zwei Farben im Normalzustand, zwei im Hover. Zusaetzlich wandert der
   Verlauf um 20% der Buttonbreite.

   Der Versatz kommt aus background-size: 120%. Die Verlaufsflaeche ist damit
   20% breiter als der Button, und background-position 100% -> 0% verschiebt
   sie genau um diese Differenz. background-position ist animierbar,
   background-image dagegen nicht - deshalb liegt der Hover-Verlauf als eigene
   Ebene im :before und wird per opacity eingeblendet.
   ======================================================================== */

.mM_button.mM_btn_gradient {
	position: relative;
	z-index: 0;
	background-repeat: no-repeat;
	background-size: 120% 100%;
	background-position: 100% 0;
	background-image: -webkit-linear-gradient(left, var(--btn_bg) 0%, var(--btn_bg_2) 100%);
	background-image: -moz-linear-gradient(left, var(--btn_bg) 0%, var(--btn_bg_2) 100%);
	background-image: -o-linear-gradient(left, var(--btn_bg) 0%, var(--btn_bg_2) 100%);
	background-image: linear-gradient(to right, var(--btn_bg) 0%, var(--btn_bg_2) 100%);
	-webkit-transition: color .4s, background-position .4s, border-color .4s;
	-moz-transition: color .4s, background-position .4s, border-color .4s;
	-ms-transition: color .4s, background-position .4s, border-color .4s;
	-o-transition: color .4s, background-position .4s, border-color .4s;
	transition: color .4s, background-position .4s, border-color .4s;
}

.mM_button.mM_btn_gradient:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0;
	border-radius: inherit;
	background-repeat: no-repeat;
	background-size: 120% 100%;
	background-position: 100% 0;
	background-image: -webkit-linear-gradient(left, var(--btn_hover_bg) 0%, var(--btn_hover_bg_2) 100%);
	background-image: -moz-linear-gradient(left, var(--btn_hover_bg) 0%, var(--btn_hover_bg_2) 100%);
	background-image: -o-linear-gradient(left, var(--btn_hover_bg) 0%, var(--btn_hover_bg_2) 100%);
	background-image: linear-gradient(to right, var(--btn_hover_bg) 0%, var(--btn_hover_bg_2) 100%);
	-webkit-transition: opacity .4s, background-position .4s;
	-moz-transition: opacity .4s, background-position .4s;
	-ms-transition: opacity .4s, background-position .4s;
	-o-transition: opacity .4s, background-position .4s;
	transition: opacity .4s, background-position .4s;
}

.mM_button.mM_btn_gradient:hover:not([disabled]),
.mM_button.mM_btn_gradient:focus-visible:not([disabled]),
.mM_button.mM_btn_gradient:hover:not([disabled]):before,
.mM_button.mM_btn_gradient:focus-visible:not([disabled]):before {
	background-position: 0 0;
}

.mM_button.mM_btn_gradient:hover:not([disabled]):before,
.mM_button.mM_btn_gradient:focus-visible:not([disabled]):before {
	opacity: 1;
}


/* ========================================================================
   Link: Basis
   ======================================================================== */

.mM_link {
	cursor: pointer;
}

/* Farbe und Transition auf den Kindern, gleiche Begruendung wie beim Button */
.mM_link,
.mM_link * {
	color: var(--lnk_fg);
}

.mM_link * {
	-webkit-transition: color .4s;
	-moz-transition: color .4s;
	-ms-transition: color .4s;
	-o-transition: color .4s;
	transition: color .4s;
}

.mM_link .mM_link_icon_wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin-left: 20px;
}

.mM_link .mM_link_icon {
	width: 20px;
	min-width: 20px;
	fill: var(--lnk_fg);
	-webkit-transition: fill .4s;
	-moz-transition: fill .4s;
	-ms-transition: fill .4s;
	-o-transition: fill .4s;
	transition: fill .4s;
}


/* ========================================================================
   Link: Zustaende
   ======================================================================== */

.mM_link:hover,
.mM_link:hover *,
.mM_link:focus-visible,
.mM_link:focus-visible * {
	color: var(--lnk_hover_fg);
}

.mM_link:hover .mM_link_icon,
.mM_link:focus-visible .mM_link_icon {
	fill: var(--lnk_hover_fg);
}


/* ========================================================================
   Link-Effekt: Unterstreichung (mM_lnk_underline / mM_lnk_underline_center)
   Linie waechst beim Hover ein, Farbe ist die Hover-Textfarbe. Ueber
   transform statt width, damit nur die Grafikebene animiert wird.

   underline        - laeuft von links auf und beim Verlassen nach rechts raus
                      (transform-origin wechselt -> Bewegung in Leserichtung)
   underline_center - oeffnet sich aus der Mitte
   ======================================================================== */

.mM_link.mM_lnk_underline,
.mM_link.mM_lnk_underline_center {
	position: relative;
}

.mM_link.mM_lnk_underline:after,
.mM_link.mM_lnk_underline_center:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: var(--lnk_hover_fg);
	-webkit-transform: scaleX(0);
	-moz-transform: scaleX(0);
	-ms-transform: scaleX(0);
	-o-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: -webkit-transform .4s ease-in-out;
	-moz-transition: -moz-transform .4s ease-in-out;
	-ms-transition: -ms-transform .4s ease-in-out;
	-o-transition: -o-transform .4s ease-in-out;
	transition: transform .4s ease-in-out;
}

.mM_link.mM_lnk_underline:hover:after,
.mM_link.mM_lnk_underline:focus-visible:after,
.mM_link.mM_lnk_underline_center:hover:after,
.mM_link.mM_lnk_underline_center:focus-visible:after {
	-webkit-transform: scaleX(1);
	-moz-transform: scaleX(1);
	-ms-transform: scaleX(1);
	-o-transform: scaleX(1);
	transform: scaleX(1);
}

.mM_link.mM_lnk_underline:after {
	-webkit-transform-origin: right;
	-moz-transform-origin: right;
	-ms-transform-origin: right;
	-o-transform-origin: right;
	transform-origin: right;
}

.mM_link.mM_lnk_underline:hover:after,
.mM_link.mM_lnk_underline:focus-visible:after {
	-webkit-transform-origin: left;
	-moz-transform-origin: left;
	-ms-transform-origin: left;
	-o-transform-origin: left;
	transform-origin: left;
}

.mM_link.mM_lnk_underline_center:after {
	-webkit-transform-origin: center;
	-moz-transform-origin: center;
	-ms-transform-origin: center;
	-o-transform-origin: center;
	transform-origin: center;
}


/* ========================================================================
   Link-Effekt: Kapsel (mM_lnk_pill)
   Beim Hover erscheinen Rahmen und ein von unten aufsteigender Verlauf.

   Der Rahmen ist im Ruhezustand transparent und schon 1px breit - sonst
   wuerde der Link im Hover um 2px wachsen und die Nachbarn verschieben.
   Der Radius liegt dauerhaft an; ohne Rahmenfarbe ist er unsichtbar.
   ======================================================================== */

.mM_link.mM_lnk_pill {
	position: relative;
	z-index: 0; /* eigener Stacking Context, damit :before hinter dem Text bleibt */
	display: inline-block;
	padding: 8px 25px 12px;
	border: 1px solid transparent;
	border-radius: 30px;
	-webkit-transition: color .4s, border-color .4s;
	-moz-transition: color .4s, border-color .4s;
	-ms-transition: color .4s, border-color .4s;
	-o-transition: color .4s, border-color .4s;
	transition: color .4s, border-color .4s;
}

.mM_link.mM_lnk_pill:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0;
	border-radius: inherit;
	background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, 0) 100%);
	background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, 0) 100%);
	background: -o-linear-gradient(bottom, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, 0) 100%);
	background: linear-gradient(to top, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, 0) 100%);
	-webkit-transition: opacity .4s;
	-moz-transition: opacity .4s;
	-ms-transition: opacity .4s;
	-o-transition: opacity .4s;
	transition: opacity .4s;
}

.mM_link.mM_lnk_pill:hover,
.mM_link.mM_lnk_pill:focus-visible {
	border-color: var(--lnk_hover_fg);
}

.mM_link.mM_lnk_pill:hover:before,
.mM_link.mM_lnk_pill:focus-visible:before {
	opacity: 1;
}


/* ========================================================================
   Link-Effekt: Icon Bewegung (mM_lnk_icon_motion)
   Das Icon rueckt beim Hover 10px nach rechts - gleiches Muster wie
   mM_btn_icon_motion: per transform, damit die Linkbreite gleich bleibt und
   das Layout nicht bei jedem Hover neu berechnet wird.
   ======================================================================== */

.mM_link.mM_lnk_icon_motion .mM_link_icon_wrap {
	-webkit-transition: -webkit-transform .4s;
	-moz-transition: -moz-transform .4s;
	-ms-transition: -ms-transform .4s;
	-o-transition: -o-transform .4s;
	transition: transform .4s;
}

.mM_link.mM_lnk_icon_motion:hover .mM_link_icon_wrap,
.mM_link.mM_lnk_icon_motion:focus-visible .mM_link_icon_wrap {
	-webkit-transform: translateX(10px);
	-moz-transform: translateX(10px);
	-ms-transform: translateX(10px);
	-o-transform: translateX(10px);
	transform: translateX(10px);
}


/* ========================================================================
   Wrapper um Buttons und Links (get_button_html_structure)
   ======================================================================== */

.mM_links {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 20px;
}

@media all and (max-width: 575px) {
	.mM_links {
		margin-top: 20px;
		gap: 10px;
	}
}