//
// Custom CSS for gesundheitsfoerderung-uri.ch
// --------------------------------------------------

/*****
* Custom CSS by Webtech AG
* Created: 14.11.2016
* Creator: Daniel Kempf
* Last updated: 12.03.2025
*
* Bootstrap Version: 3.3.7
* Fluid styled content Extension (nicht CSS styled content!)
*****/


// Custom variables
@green: #a0b48c;
@yellow: #f0ff96;
@white: #ffffff;
@black: #000000;
@c-footer-height: 160px;
// Custom variables end


// ***** MASTER VIEW *****
// --- INITIALIZATION
@font-face {
    font-family: 'Noigrotesk';
    src: url('../fonts/NoiGrotesk-Medium.eot');
    src: url('../fonts/NoiGrotesk-Medium.eot') format('embedded-opentype'),
    url('../fonts/NoiGrotesk-Medium.woff2') format('woff2'),
    url('../fonts/NoiGrotesk-Medium') format('woff'),
    url('../fonts/NoiGrotesk-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


// Sticky footer
html {
	position: relative;
	min-height: 100%;
	min-width: 350px;
}

body {
	margin-bottom: @c-footer-height;  // same as footer height!
	min-width: 350px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
// Sticky footer end

// --- INITIALIZATION END


// --- HEADER
#header {
	> .container {
		background-color: @green;
	}

	// Logo
	.logo {
		float: left;
		width: 100%;
		height: 120px;

		img {
			width: 375px;
			margin-top: 16px;
		}
	}
	// Logo end


	// Navigation
	.nav-main {
		padding-top: 0;
		position: relative;

		.access4AllIcons{
			position: absolute;
			right: 0;
			top: 6px;

			a {
				padding-right: 0;
                font-size: 32px;
                font-weight: normal;
				text-decoration: none;

                &:nth-child(1) {
                    padding-right: 10px;
                }

                &:nth-child(2) {
                    padding-right: 15px;
                }

				&:hover,
				&:focus {
					color: @link-hover-color;
				}
			}
		}

		.navbar-default {
			border: none; // damit die Rahmenabstände entfernt werden!
			margin-bottom: 0;
		}

		.navbar-collapse {
			float: left;
			//width: 600px;
			padding: 0;
		}

		.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
			background-color: transparent;
			border-color: #ffffff;
			border-right-color: #d5d5d5;
		}

		.navbar-nav {
			> li {
				> .dropdown-menu {
					border-bottom-left-radius: 0;
					border-bottom-right-radius: 0;
				}

				> a {
					font-size: 20px;
					font-weight: normal;
                    line-height: 1;
					padding-right: 25px;
					padding-left: 0;

                    .caret-plus {
                        --b: 2px;   /* the thickness*/
                        --c: @green 90deg, #000 0; /* the coloration */
                        display: inline-block;
                        width: 16px; /* the size */
                        margin: 0 0 -1px 6px;
                        aspect-ratio: 1;
                        background:
                                conic-gradient(from 90deg at var(--b) var(--b), var(--c))
                                ~"calc(100% + var(--b)/2) calc(100% + var(--b)/2) / calc(50% + var(--b)) calc(50% + var(--b))";
                        transition: transform linear 0.15s;
                    }

                    &:hover {
                        padding-right: 23px;

                        .caret-plus {
                            --b: 2px;
                            --c: @green 90deg, #dedede 0;
                            width: 18px;
                            margin: 0 0 -2px 6px;
                            background:
                                    conic-gradient(from 90deg at var(--b) var(--b), var(--c))
                                    ~"calc(100% + var(--b)/2) calc(100% + var(--b)/2) / calc(50% + var(--b)) calc(50% + var(--b))";
                            transition: transform linear 0.15s;
                            transform: rotate(45deg);
                        }
                    }
				}

				&:last-child {
					> a {
						padding-right: 0;
					}
				}

                &:not(.dropdown) {
                    > a {
                        &:hover {
                            padding-right: 25px;
                        }
                    }
                }

                &.active > a,
                &:hover > a {
                    padding-right: 23px;
                    color: @link-hover-color;

                    .caret-plus {
                        --b: 2px;
                        --c: @green 90deg, #dedede 0;
                        width: 18px;
                        margin: 0 0 -2px 6px;
                        background:
                                conic-gradient(from 90deg at var(--b) var(--b), var(--c))
                                ~"calc(100% + var(--b)/2) calc(100% + var(--b)/2) / calc(50% + var(--b)) calc(50% + var(--b))";
                        transition: transform linear 0.15s;
                        transform: rotate(45deg);
                    }
                }

			}
		}

		.dropdown-menu {
			border: none;
			min-width: 300px;
			padding: 10px 16px 12px 16px;
			//background-color: rgba(255,255,255,0.8);
            background-color: @green;
            box-shadow: none;

			> li {
				> a {
					font-size: 18px;
					padding: 3px 0;
				}

				//&.active a {
				//	font-weight: 700;
				//}

			}
		}
	}

	@media (min-width: 768px) {
		// Open dropdown on hover
		.dropdown:hover .dropdown-menu {
			display: block;
		}
	}
	// Navigation end


	// Search
    .search-lens, .wt-cart {
        position: absolute;
        right: 15px;
        top: 123px;
        //margin-top: -45px;
        text-align: center;

        a {
            .fa-search, .fa-shopping-cart {
                width: 30px;
                height: 30px;
                line-height: 30px;
                background-color: #000000;
                color: @green;
                font-size: 19px;
                overflow: hidden;
                font-family: FontAwesome;
            }

            &:hover {
                .fa-search, .fa-shopping-cart {
                    background-color: @link-hover-color;
                }
            }
        }
    }

    .wt-cart {
        right: 55px;
    }
    // Search end

}
// --- HEADER END




// --- CONTENT
#content {

	> .container {
		background-color: @white;
		//padding-bottom: 40px;
        padding-bottom: 60px;
		min-height: 500px;

		> .row > .col-sm-12 {

			padding-right: 95px;
			padding-left: 95px;

			> .row {
				padding-right: 80px;
				padding-left: 80px;
				margin-right: -95px;
				margin-left: -95px;
			}

			/*
			> .row + .row {
				padding-top: 30px;
			}
			*/
		}
	}


    // Links mit spezifischen Icons
	a {
		text-decoration: none;
        &:after {
            content: url(/fileadmin/layout/icons/Icon_ArrowR.svg);
            display: inline-block;
            width: 40px;
            height: 40px;
            vertical-align: middle;
        }
	}

	a[href$=".pdf"]:after,
	a[href$=".pdf"]:focus:after,
	a[href$=".PDF"]:after,
	a[href$=".PDF"]:focus:after{
        content: url(/fileadmin/layout/icons/Icon_Downlpoad.svg);
	}
	a[href$=".pdf"],
	a[href$=".PDF"]{
		text-decoration: none;
	}

    a[href^="http"]:not([href$=".pdf"]):not([href$=".PDF"]):not(.lightbox):after,
    a[href^="http"]:not([href$=".pdf"]):not([href$=".PDF"]):not(.lightbox):focus:after {
        content: url(/fileadmin/layout/icons/Icon_LinkOut.svg);
    }
	a.external-link-new-window {
		text-decoration: none;
	}

	a.contact:after,
	a.contact:focus:after {
        content: url(/fileadmin/layout/icons/Icon_Contact.svg);
	}
	a.contact {
		text-decoration: none;
	}

    a.link-arrow-right:after,
    a.link-arrow-right:focus:after {
        font-family: FontAwesome;
        content: "\f101 ";
        font-size: 1.375em;
        font-weight: normal;
        line-height: 1;
        display: inline-block;
        width: 40px;
        height: 40px;
        vertical-align: middle;
        color: @text-color;
        padding: 2px 30px 0 7px;
        transition: all 0.3s ease-in-out;
    }
    a.link-arrow-right:hover:after {
        padding: 2px 30px 0 12px;
    }
    a.link-arrow-right {
        text-decoration: none;
    }

    a.back-link:before,
    a.back-link:focus:before{
        content: url(/fileadmin/layout/icons/Icon_ArrowL.svg);
        display: inline-block;
        width: 40px;
        height: 40px;
        vertical-align: middle;
    }
    a.back-link:after {
        content: '';
        display: none;
    }

	// Ausnahmen ohne Icons!
	a.lightbox:before,
    a.link-arrow-right:before,
	//a.external-link-new-window[href^="tel"]:before,
	a[href^="javascript:history.back(-1);"]:before{
		content: '';
		padding: 0;
        display: inline;
	}

    a.lightbox:after {
        content: '';
        display: none;
    }
	// Links mit spezifischen Icons end


	// Link list
	a.link-list {
		color: @text-color;
		font-size: 21px;
        line-height: 30px;
		text-decoration: none;
		width: 100%;
		display: block;
		//border-bottom: 1px solid @black;
		padding: 5px 8px 5px 16px;

        &:after,
        &:focus:after{
            float: right;
            content: url(/fileadmin/layout/icons/Icon_ArrowR.svg);
            display: block;
            width: 40px;
            height: 40px;
            margin: -3px 0 0 0;
        }

		&:hover,
		&:focus {
			background-color: @yellow;
		}
	}
	// Link list end

	.hyphenate {
		overflow-wrap: break-word;
		word-wrap: break-word;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;
	}

	h1 {
		margin-top: 30px;
        margin-bottom: 15px;
		font-weight: normal;
		text-transform: uppercase;
		color: @text-color;
        transition: font-size 0.15s;
		.hyphenate;
	}

	h2 {
        margin-top: 30px;
        margin-bottom: 15px;
		font-weight: normal;
        text-transform: uppercase;
		color: @text-color;
	}

	h3 {
        margin-top: 0;
        margin-bottom: 0;
		font-weight: normal;
		color: @text-color;
        text-transform: uppercase;
		line-height: 1.42857;  // dito Basis-Schrift
	}


	// Table
	.table {
		/*
		> thead > tr > th,
		> tbody > tr > th,
		> tfoot > tr > th,
		> thead > tr > td,
		> tbody > tr > td,
		> tfoot > tr > td {
			//border-top: 1px solid #847070;
			padding-left: 5px;
		}

		> thead > tr > th {
			//border-bottom: 2px solid #847070;
			vertical-align: bottom;
		}
		*/

		// Alignment
		th.align-left,
		td.align-left {
			text-align: left;
		}

		th.align-right,
		td.align-right {
			text-align: right;
		}

		th.align-center,
		td.align-center {
			text-align: center;
		}

		/*
		// 2 columns 25% 75%
		&.col-25-75 {
			th, td {
				&:nth-of-type(1) {
					width: 25%;
				}
				&:nth-of-type(2) {
					width: 75%;
				}
			}
		}

		// 2 columns 75% 25%
		&.col-75-25 {
			th, td {
				&:nth-of-type(1) {
					width: 75%;
				}
				&:nth-of-type(2) {
					width: 25%;
				}
			}
		}

		// 2 columns 50% 50%
		&.col-50-50 {
			th, td {
				&:nth-of-type(1) {
					width: 50%;
				}
				&:nth-of-type(2) {
					width: 50%;
				}
			}
		}

		// 3 columns 33% 33% 33%
		&.col-33-33-33 {
			th, td {
				width: 33%;
			}
		}
		*/

	}
	// Table end


    // Videos / IFrames
    .embed-responsive {
        .embed-responsive-16by9;
        //.embed-responsive-4by3;
        margin-bottom: 30px;
    }
    // Videos / IFrames end


	// In rechter Spalte des Grids die Abstände anpassen
	.row:not(.c-bewegung) {
		> div[class^="col-"]:not(:first-child):last-child {
			.ce-textpic {
				figure:not(.video) {
					img {
						margin: 5px 0 0 0;
					}
					margin: 0 0 30px 0;
				}
			}
		}
	}


	// Newsletter form
	form.newsletter {
		margin: 30px 0;

		select {
			width: 75%;
		}

		input {
			width: 75%;
		}

		// siehe auch custom.js
		select.invalid,
		input.invalid {
			border-color: red;
			box-shadow: 0 0 5px red;
		}

		.btn {
			color: #ffffff;
			font-weight: 700;
			background-color: #b9ba01;
			border: 1px solid #b9ba01;
			border-radius: 0;
			width: 200px;
			&:hover {
				//background: rgba(255,225,13,0.85);
				color: #ffffff;
				background-color: #5a3114;
				border: 1px solid #5a3114;
			}
		}
	}
	// Newsletter form end


	// Form
    /* OLD V7.6
	.csc-mailform {
		ol {
			li {
				padding: 10px 0;

				label {
					width: 100%;
					margin: 0 2px;
				}

				input {
					width: 80%;
					border: 1px solid #d7d7d7;
					padding-left: 4px;
					//outline: none;
					margin: 0 2px;
				}

				textarea {
					width: 80%;
					border: 1px solid #d7d7d7;
				}

				input[type="submit"] {
					font-size: 20px;
					border-radius: 0px;
					color: #ffffff;
					background-color: #b9ba01;
					border-color: #b9ba01;
					clear: left;
					padding: 8px 50px;
					border-radius: 5px;
					text-decoration: none;
					font-weight: 700;
					display: block;
					margin: 10px 0 30px 0;
					width: auto;
					height: auto;
					line-height: normal;
					border: none;
					transition-duration: 0.4s;

					&:hover {
						color: #ffffff;
						background-color: #5a3114;
						border-color: #5a3114;
					}
				}
			}
		}
	}
    */

    form {
        margin: 30px 0 30px 0;

        h2 {
            font-size: 20px;
            font-weight: 700;
            color: #b9ba01;
        }

        input:not([type='checkbox']),
        textarea,
        select {
            width: 80%;
        }

        button.btn {
            font-size: 20px;
            border-radius: 0px;
            color: #ffffff;
            background-color: #b9ba01;
            border-color: #b9ba01;
            clear: left;
            padding: 8px 50px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 700;
            display: block;
            margin: 10px 0 30px 0;
            width: auto;
            height: auto;
            line-height: normal;
            border: none;
            transition-duration: 0.4s;

            &:hover {
                color: #ffffff;
                background-color: #5a3114;
                border-color: #5a3114;
            }
        }
    }
	// Form end



	// --- Grid elements
	// Accordion
	.panel-group {
		.panel {
			border-radius: 0;
			box-shadow: none;

			& + .panel {
				margin-top: 0;
			}
		}

		.panel-default {
			border: none;
			//border-bottom: 1px solid @black;

			.panel-heading {
				background-color: transparent;
				border: none;
                padding: 0;

				.panel-title {
					a {
						text-decoration: none;
						color: @text-color;
						font-size: 21px;
                        line-height: 30px;
						font-weight: 400;
                        display: block;
                        padding: 5px 8px 5px 16px;

                        &:after,
                        &:focus:after{
                            content: "";
                            float: right;
                            //padding: 0 8px;

                            --b: 2px;   /* the thickness*/
                            --c: transparent 90deg, #000 0; /* the coloration */
                            display: inline-block;
                            width: 16px; /* the size */
                            height: 16px;
                            margin: 8px;
                            aspect-ratio: 1;
                            background:
                                    conic-gradient(from 90deg at var(--b) var(--b), var(--c))
                                    ~"calc(100% + var(--b)/2) calc(100% + var(--b)/2) / calc(50% + var(--b)) calc(50% + var(--b))";
                            transition: transform linear 0.15s;
                        }

                        &:hover {
                            background-color: @yellow;
                        }

                        &:not(.collapsed) {
                            background-color: @yellow;

                            &:after {
                                transform: rotate(45deg);
                            }
                        }
					}
				}
			}

			.panel-body {
				border: none;
				padding: 16px 8px;

				h2, h3 {
					margin-top: 0px;
				}
			}
		}
	}
	// Accordion end


	// Tabs
	.nav-tabs {
		margin: 30px 0 0 0;

		a {
			text-decoration: none;
			&:after {
				content: "";
				display: none;
			}
		}
	}

	.tab-content {
		margin: 15px 0 30px 0;
	}
	// Tabs end
	// --- Grid elements end


	// Header image
	#header-image {
		//margin-left: -15px;
		//margin-right: -15px;
		margin-left: -95px;
		margin-right: -95px;
		margin-bottom: 55px;
		text-align: center;

        img {
            width: 100%;
        }


		.header-image-label {
			margin-top: -125px;

			.label-feel {
				width: 200px;
				margin-right: 30px;
			}
			.label-fit {
				width: 200px;
				margin-right: 30px;
			}

			.label-vital {
				width: 200px;
			}

			a {
				img{
					transition: all 0.3s;
					transition-timing-function: ease-in-out;
				}

				&:after {
					content: "";
					display: none;
				}

				&:hover,
				a:focus {
					img {
						transform: scale(1.1) rotate(-15deg);
					}
				}
			}
		}
	}
	// Header image end


	// Google map
	.gmap {
		margin-top: 25px;
		margin-bottom: 45px;

		position: relative;
		padding-bottom: 66%; // (474 ÷ 720 = 0.66 = 66%)
		height: 0;
		overflow: hidden;

		iframe {
			//width: 100% !important;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		//opacity: 0.8;
	}
	// Google map end


	// Lead-Text
	span.lead-text {
		font-weight: 600;
		font-size: 40px;
		line-height: 1.05;
		display: inline-block;
		margin-bottom: 40px;
        transition: font-size 0.15s;
	}
	// Lead-Text end

	// Kontakt Text
	span.contact-text {
        line-height: 1.15;
		display: inline-block;
		margin-left: 50px;
        position: relative;

		&:before {
            content: url(/fileadmin/layout/icons/Icon_Contact.svg);
            width: 40px;
            height: 40px;
            position: absolute;
            top: 0;
            left: -50px;
		}
	}
	// Kontakt Text end



	// Link box
	.row.link-box {
		//OLD: background-color: #f2f4d1;
		padding: 45px 0;
		margin-bottom: 55px;

		.col-sm-6 {
			margin: 16px 0;

			a {
				text-decoration: none;
                &:after {
                    content: "";
                    display: none;
                }


				.link-box-title {
					h2 {
						//display: inline-block;
						width: 100%;
						background-color: @green;
						color: @text-color;
						height: 52px;
						line-height: 52px;
						margin: 0;
						padding: 0 16px;

						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
				}

				&:hover,
				&:focus {

					img {
						//opacity: 0.7;
                        border-top-left-radius: 150px;
                        border-top-right-radius: 150px;
					}

					.link-box-title {
						h2 {
							background-color: @yellow;
						}
					}
				}
			}

			&.news-latest {

				a {
					display: block;

					&:hover,
					&:focus {
						color: @text-color;

                        .link-box-description {
                            border-top-left-radius: 100px;
                            border-top-right-radius: 100px;
                        }
					}
				}

				.link-box-description {
					height: 247px;
					background-color: #ffffff;
					//padding: 20px 15px;
                    padding: 8px 16px;
                    overflow: hidden;

					h3 {
						font-size: 24px;
					}

					p {
						line-height: 1.15;
					}
				}


				.link-box-title {
					display: block;

                    h2 {
                        //display: inline-block;
                        width: 100%;
                        background-color: @green;
                        color: @text-color;
                        height: 52px;
                        line-height: 52px;
                        margin: 0;
                        padding: 0 16px;

                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }
				}
			}
		}
	}
	// Link box end

	// News Anpassung
	.news-single-image img{
		border: 0!important;
	}

	// Image Gallery
	.flow-thumbnail-gallery {
		padding: 30px 8px 0 8px;

		.col-xs-3 {
			position:  relative;
			padding: 0 8px 16px 8px;

            a {
                &:hover {
                    img {
                        border-top-left-radius: 75px;
                        border-top-right-radius: 75px;
                    }
                }
            }

			.caption {
				p {
					font-size: 15px;
					margin: 2px 0 0 0;
				}
			}
		}
	}

    .one-single-thumbnail-gallery {

        a.lightbox {
            &:hover {
                opacity: 0.8;
            }
        }

        .do-not-display {
            display: none;
        }

        .caption {
            p {
                font-size: 15px;
                margin: 2px 0 15px 0;
            }
        }
    }
	// Image Gallery end



	// Logo Gallery
	.flow-logo-gallery {
		padding-top: 30px;
		.col-xs-3 {
			position:  relative;
			padding-bottom: 30px;

			.caption {
				p {
					font-size: 15px;
					margin: 2px 0 0 0;
				}
			}
		}

		.col-lg-3 {
			a {
				max-width: 200px;
				width: 100%;
				display: block;

				&:before{
					display: none !important;
				}
			}
		}


	}
	// Logo Gallery end


	// Info-Box
	.info-box {
		background-color: #f2f4d1;
		padding: 15px 15px 5px 15px;
		//margin: 20px 0 30px 0;
		margin: 0 0 30px 0;
	}

	/*div[class^="col-"] > .info-box {
		margin: 0px 0 30px 0;
	}*/

	div[class^="col-"] > div + .info-box  {
		margin: 20px 0 30px 0;
	}
	// Info-Box end

	// Potrtrait
	.row.portrait {
		background-color: #f2f4d1;
		padding: 60px 0 30px 0;

		& + .portrait {
			padding: 0px 0 30px 0;
			margin-top: -30px;
		}

		// Class .last wird per jQuery zugeordnet!
		&.last {
			margin-bottom: 55px;
		}
	}
	// Potrtrait end


    // Urner «Wie geht’s dir?»-Bänkli
    .uebersichtskarte {
        text-align: center;
        margin: 60px auto;
    }

    #c4552 {
        margin: 30px 0 ;

        .ce-bodytext {
            column-count: 4;
            column-gap: 10px;
        }
    }
    // Urner «Wie geht’s dir?»-Bänkli  end


	// TYPO3
	// Images

	// Float für standardmässig = linksbündig entfernen!!!
	.ce-textpic {
		.ce-gallery,
		.ce-column {
			float: none;
		}
	}

	.ce-textpic {
		.ce-column {
			padding-bottom: 20px;
		}

		figure,
		.ce-media {
			//background-color: #808080;
			a {
				img:hover {
					opacity: 0.8;
				}
			}

			img {
				// Da mit der TYPO3 Extension Fluid styled content keine Klasse class="img-reponsive" per TS zugeordent werden kann, muss dies hier direkt definiert sein
				display: block;
				height: auto;
				max-width: 100%;
			}
		}
	}

	// Bug-Fix für IE11, damit "img-responsive" funktioniert
	.ce-gallery figure{
		display:table;
		width:100%;
		table-layout:fixed;
	}

	figcaption {
		display: block;
		padding-top: 2px;
		font-size: 12px;
	}
	// Images end


	// Indexed search
    .tx-indexedsearch-searchbox {
        form {
            margin: 30px 0;

            fieldset {

                legend {
                    display: none;
                }

                div {
                    margin-bottom: 30px;

                    label {
                        display: inline-block;
                        max-width: 100%;
                        margin-bottom: 5px;
                        font-weight: 700;
                    }

                    .tx-indexedsearch-searchbox-sword {
                        width: 50%;
                    }
                }

                .tx-indexedsearch-searchbox-button {
                    color: #ffffff;
                    background-color: #b9ba01;
                    border: 1px solid transparent;
                    border-radius: 0;
                    font-size: 18px;
                    line-height: 18px;
                    font-weight: bold;
                    margin: 0 15px 0px 0;
                    padding: 11px 35px;
                    display: inline-block;
                    text-align: center;
                    vertical-align: middle;
                    text-decoration: none;
                    transition: all 0.25s ease-out;
                    width: auto;

                    &:hover {
                        background-color: #5a3114;
                    }
                }
            }

            p {
                padding: 0;
                background-color: transparent;
            }
        }

    }

    .tx-indexedsearch-searchinfo {
        margin: 30px 0 15px 0;
    }

    .tx-indexedsearch-info-sword {
        .tx-indexedsearch-info-sword-word {
            font-weight: bold;
        }
    }

    .tx-indexedsearch-res {
        margin-bottom: 30px;

        h3 {
            .tx-indexedsearch-title {
                a {
                    &:after {
                        content: "";
                        display: none;
                    }
                }
            }

            .tx-indexedsearch-percent {
                color: darkgrey;
            }
        }

        .tx-indexedsearch-info {
            display: none;
        }
    }

    .tx-indexedsearch-browsebox {
        ul.tx-indexedsearch-browsebox {
            width: 100%;
            list-style: none;
            padding: 10px 10px 10px 0;
            margin-bottom: 45px;

            li {
                float: left;

                a {
                    margin-right: 15px;

                    &:after {
                        content: "";
                        display: none;
                    }
                }
            }
        }
    }
	// Indexed Search end


    // News ext:tx_news
    .news {

        .news-list-view {
            ul.f3-widget-paginator {
                list-style: none;
                padding: 6px;
                margin: 30px 0 15px 0;
                text-align: center;

                li {
                    display: inline-block;
                    margin: 0 15px 0 0;

                    &:before {
                        content: none;
                    }

                    &.current{
                        font-size: 2.25rem;
                        font-weight: bold;
                        margin: 0 15px 0 0;
                    }

                    a {
                        &:after {
                            content: "";
                            display: none;
                        }
                    }
                }
            }
        }

        .header {
            a {
                &:after {
                    content: "";
                    display: none;
                }
            }
        }

        .news-img-wrap {
            a {
                &:after {
                    content: "";
                    display: none;
                }
            }
        }

        .teaser-text {
            a.more {
                &:after {
                    content: "";
                    display: none;
                }
            }
        }

        &.news-single {
            .news-backlink-wrap {
                a {
                    &:after {
                        content: "";
                        display: none;
                    }
                }
            }
        }
    }
    // News ext:tx_news end

}

.page-8 {
	#content {
		// Ausnahmen ohne Icons!
		a:before{
			display: none;
		}
	}
}

// Urner «Wie geht’s dir?»-Bänkli
.benches {
    #content {
        h1 {
            margin: 15px 0;
        }

        .info-box {
            margin-top: 65px;
        }
    }
}
// Urner «Wie geht’s dir?»-Bänkli end
// --- CONTENT END


// --- FOOTER
#footer {
	color: @text-color;
	bottom: 0;
	//height: @c-footer-height;
	position: absolute;
	width: 100%;

	> .container {
		height: @c-footer-height;
		background-color: @green;
	}

	h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
		color: @text-color;
	}

	h4 {
		font-size: 21px;
		font-weight: normal;
		color: @text-color;
        text-transform: uppercase;
		margin: 16px 0 32px 0;
	}

	p {
		font-size: 21px;
		line-height: 1.15;
        margin: 0;
	}

	a {
		color: @link-color;
		text-decoration: none;

		&:hover,
		&:focus {
			color: @link-hover-color;
			text-decoration: none;
		}
	}

	.nav {
		float: right;
        padding-top: 75px;

		> li {
			float: left;
            padding-left: 30px;
            line-height: 1.15;

			> a {
				color: @link-color;
				padding: 0;
				text-decoration: none;
				font-size: 21px;
				display: block;

				&:hover,
				&:focus {
					color: @link-hover-color;
					text-decoration: none;
					background-color: transparent;
				}

				&.active {
					color: @link-hover-color;
					font-weight: 700;
				}
			}
		}
	}

	.social-media-buttons {
		text-align: right;
		margin-top: 14px;

		a {
			padding-left: 10px;
		}

		i.fa-facebook {
			width: 17px;
		}
	}


    /* Privacy cookie banner */
    .privacy-banner {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 15;
        display: none;
        animation-name: fadeInUp;
        animation-timing-function: ease-in-out;
        animation-duration: 1.25s;

        .content {
            color: @text-color;
            background-color: #f6f7ed;
            border-top: 1px solid #000000;
            border-bottom: none;
            padding: 15px;
            //margin: 0 -1rem;
            font-size: 18px;
            text-align: center;

            p {
                font-size: 18px;
                margin: 0;
            }

            a {
                color: @text-color;
                text-decoration: underline;

                &:hover {
                    color: @link-hover-color;
                }
            }

            button.hide-banner {
                padding: 5px 15px;
                background-color: @green;
                border: none;
                color: #ffffff;
                cursor: pointer;
                transition: all 0.3s ease;
                margin-top: 5px;

                &:hover {
                    opacity: 0.7;
                }
            }
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translate3d(0, 100%, 0);
        }

        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
    /* Privacy cookie banner end */

}
// --- FOOTER END


// --- GO TOP
.go-top {
	position: fixed;
	right: 0;
	bottom: 180px;
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s 0s, visibility 0s .3s;

	> a {
		display: block;
		width: 50px;
		height: 40px;
		background-color: @green;
		color: #ffffff;
		outline: 0;
		//border: 1px solid #000000;
		//border-right: none;

		&:hover,
		&:focus {
			color: #ffffff;
			background: rgba(160,180,140,0.85);
		}

		> i {
			padding: 0 0  0 5px;
            margin-top: -3px;
		}
	}

	&.gt-is-visible {
		visibility: visible;
		opacity: 1;
		transition: opacity .3s 0s, visibility 0s 0s;
	}

	&.gt-fade-out {
		opacity: .5;
		transition: opacity .3s 0s, visibility 0s 0s;
	}
}
// --- GO TOP END
// ***** MASTER VIEW END *****




// ***** SMALL DESKTOP *****
@media (max-width: 1199px) {

	// --- HEADER
	#header {

		// Logo
		.logo {
			img {
				width: 305px;
			}
		}
		// Logo end


		// Navigation
		.nav-main {
			.dropdown-menu {
				min-width: 250px;
			}

            .navbar-nav {
                > li {
                    > a {
                        font-size: 18px;
                        padding-right: 20px;

                        .caret-plus {
                            width: 14px; /* the size */
                            margin: 0 0 -1px 6px;
                        }

                        &:hover {
                            padding-right: 18px;

                            .caret-plus {
                                width: 16px;
                                margin: 0 0 -2px 6px;
                            }
                        }
                    }

                    &.active > a {
                        padding-right: 18px;

                        .caret-plus {
                            width: 16px;
                            margin: 0 0 -2px 6px;
                        }
                    }

                }
            }
		}
		// Navigation end

        // Search
        .search-lens, .wt-cart {
            right: 15px;
            top: 80px;
        }

        .wt-cart {
            right: 55px;
        }
        // Search end
	}
	// --- HEADER END

	// --- CONTENT
	#content {

		> .container {
			//padding-bottom: 40px;

			.row > .col-sm-12 {
				padding-right: 15px;
				padding-left: 15px;

				> .row {
					padding-right: 0;
					padding-left: 0;
					margin-right: -15px;
					margin-left: -15px;
				}
			}
		}

		// Header image
		#header-image {
			margin-left: -15px;
			margin-right: -15px;
			margin-bottom: 50px;

			.header-image-label {
				margin-top: -105px;

				.label-feel {
					width: 175px;
					margin-right: 25px;
				}
				.label-fit {
					width: 175px;
					margin-right: 25px;
				}

				.label-vital {
					width: 175px;
				}
			}
		}
		// Header image end

		// Link box
		.row.link-box {
			.col-sm-6 {
				&.news-latest {
					.link-box-description {
						height: 237px;
					}
				}
			}
		}
		// Link box end

	}
	// --- CONTENT END


	// --- FOOTER
	#footer {
        .nav {
            > li {
                padding-left: 20px;
            }
        }
	}
	// --- FOOTER END

}

// --- SPECIFIC SMALL DESKTOP
@media (min-width: 992px) and (max-width: 1199px) {

}
// --- SPECIFIC SMALL DESKTOP END
// ***** SMALL DESKTOP END *****



// ***** TABLET *****
@media (max-width: 991px) {

	// --- HEADER
	#header {

		// Logo
		.logo {
			img {
				width: 235px;
			}
		}
		// Logo end

		// Navigation
		.nav-main {
            .navbar-nav {
                > li {
                    > a {
                        font-size: 15px;
                        padding-right: 10px;

                        .caret-plus {
                            width: 10px; /* the size */
                            margin: 0 0 -1px 4px;
                        }

                        &:hover {
                            padding-right: 8px;

                            .caret-plus {
                                width: 12px;
                                margin: 0 0 -2px 4px;
                            }
                        }
                    }

                    &.active > a {
                        padding-right: 8px;

                        .caret-plus {
                            width: 12px;
                            margin: 0 0 -2px 4px;
                        }
                    }

                }
            }

			.dropdown-menu {
				min-width: 200px;

				> li {
					> a {
						font-size: 14px;
					}
				}
			}
		}
		// Navigation end
	}
	// --- HEADER END

	// --- CONTENT
	#content {

		> .container {
			//padding-bottom: 40px;

			.row > .col-sm-12 {
				> .row {
					padding-right: 0;
					padding-left: 0;
				}
			}
		}


		// In rechter Spalte des Grids die Abstände anpassen
		.row {
			/*
			> div:not(:first-child)[class^="col-"]:last-child {
				h2, h3 {
					margin-top: 2px;
				}
			}
			*/

			> div[class^="col-"]:last-child {
				.ce-textpic {
					figure {
						img {
							margin: 5px 0 0 0;
						}
						margin: 0 0 10px 0;
					}
				}
			}
		}


		// Header image
		#header-image {
			margin-bottom: 50px;

			.header-image-label {
				margin-top: -80px;

				.label-feel {
					width: 160px;
					margin-right: 22px;
				}
				.label-fit {
					width: 160px;
					margin-right: 22px;
				}

				.label-vital {
					width: 160px;
				}
			}
		}
		// Header image end


		// Link box
		.row.link-box {
			.col-sm-6 {
				&.news-latest {
					.link-box-description {
						height: 180px;
						padding: 15px 15px;

						h3 {
							font-size: 20px;
							margin-top: 5px;
							margin-bottom: 11px;
						}

						p {
							font-size: 15px;
							line-height: 1.25;
						}
					}
				}
			}
		}
		// Link box end

        // Urner «Wie geht’s dir?»-Bänkli
        .uebersichtskarte {
            display: none;
        }

        #c4552 {
            margin: 30px 0 ;

            .ce-bodytext {
                column-count: 3;
                column-gap: 10px;
            }
        }
        // Urner «Wie geht’s dir?»-Bänkli  end

	}

    // Urner «Wie geht’s dir?»-Bänkli
    .benches {
        #content {
            .ce-textpic figure img {
                margin: 0 !important;
            }
        }
    }
	// --- CONTENT END


	// --- FOOTER
    #footer {
        .nav {
            padding-top: 55px;

            > li {
                padding-left: 20px;
            }
        }
    }
	// --- FOOTER END

}

// --- SPECIFIC TABLET
@media (min-width: 768px) and (max-width: 991px){

}
// --- SPECIFIC TABLET END
// ***** TABLET END *****





// ***** MOBILE *****
@media (max-width: 767px) {

	@c-footer-height: 210px;


	// Sticky footer
	body {
		margin-bottom: @c-footer-height;  // same as footer height!
		-webkit-text-size-adjust: 100%;  // iPhone Safari, Textvergrösserung bei Queransicht verhindern, "none" vermeiden, sonst geht Zoom-Funktioin nicht mehr.
	}
	// Sticky footer end


	// --- HEADER
	#header {
		// Logo
		.logo {
			width: 220px;
			height: 60px;
			text-align: left;

			img {
				width: 200px;
				margin-top: 15px;
				margin-left: 15px;
			}
		}
		// Logo end


		// Navigation
		.nav-main {
			padding-top: 0;

			.access4AllIcons{
				display: none;
			}

			.navbar {
				background-image: none;
				border: none;
				margin-bottom: 0;
			}

			.navbar-default,
			.navbar-inverse {
				background-color: transparent;
			}

			.navbar-collapse {
				float: none;
				margin-top: 0px;
				padding-top: 0;
				padding-left: 0;
				//padding-bottom: 10px;
				box-shadow: none;
				background-color: transparent;
			}

			.navbar-default {
				margin-left: -15px;
				margin-right: -15px;

				.navbar-toggle {
					margin-right: 5px;
					margin-top: 10px;
					margin-bottom: 0;
					border-radius: 0;
					border-color: transparent !important;
					background-color: transparent;
				}
			}

			.navbar-toggle .icon-bar {
				height: 3px;
				border-radius: 0px;
			}

			.navbar-nav > li > a, .navbar-nav > li > a:hover {
				line-height: normal;
				padding: 10px 15px 10px;
				border-left: none;
				font-size: 14px;
			}

			.navbar-nav {
				float: none;
				margin: 0;
				padding-bottom: 10px;
			}

			// Dropdown menu expanded:
			.dropdown-menu {
				padding: 0;
				margin: 0 15px;
				border-radius: 0; //bb
			}

			.navbar-nav .dropdown .dropdown-menu {
				background-color: transparent;
				border-right: 0; //bb //1px solid @gray-light;
				border-bottom: 0; //bb //1px solid @gray-light;
				box-shadow: none;
				float: none;
				margin-top: 0;
				position: static;
				width: auto;
				display: block;
			}

			.navbar-default .navbar-nav .dropdown .dropdown-menu > li > a {
				//color: #333333;
			}

			.navbar-nav .dropdown .dropdown-menu > li > a,
			.navbar-nav .dropdown .dropdown-menu .dropdown-header {
				padding: 7px 15px 7px 10px;
				font-size: 14px;
			}

			.dropdown-menu > .active > a,
			.dropdown-menu > .active > a:hover,
			.dropdown-menu > .active > a:focus {
				background-color: transparent;
				outline: 0 none;
				text-decoration: none;
			}

			.navbar-default .navbar-nav .dropdown .dropdown-menu > li > a:hover,
			.navbar-default .navbar-nav .dropdown .dropdown-menu > li > a:focus {
				background-color: transparent;
				//color: #fff;
			}

			.dropdown-menu > li > a:hover,
			.dropdown-menu > li > a:focus {
				text-decoration: none;
				//color: #72706c;
				background-color: transparent;
			}
		}
		// Navigation end

		// Search
		.site-search-mobile, .wt-cart-mobile {
			float: right;
			width: 23px;
			height: 23px;
			line-height: 23px;
			margin-top: -43px;
			margin-right: 65px;
			background-color: #000000;
			text-align: center;

			a {
				display: block;
                text-decoration: none;

				.fa-search {
					color: @green;
					font-size: 17px;
					display: block;
					line-height: inherit;
					overflow: hidden;
				}

                .fa-shopping-cart {
                  color: @green;
                  font-size: 17px;
                  display: block;
                  line-height: inherit;
                  overflow: hidden;
                }
			}
		}

        .wt-cart-mobile {
          margin-right: 97px;
        }
		// Search end

	}
	// --- HEADER END


	// --- CONTENT
	#content {

		> .container {
            padding-bottom: 40px;

			> .row > .col-sm-12 {
				> .row + .row {
					//padding-top: 15px;
					padding-top: 0;
				}
			}
		}

		h1 {
			margin-top: 20px;
		}

		h2 {
			font-size: 20px;
		}

		h3 {
			font-size: 15px;
		}


		// In rechter Spalte des Grids die Abstände anpassen
		.row {
			/*
			> div:not(:first-child)[class^="col-"]:last-child {
				h2, h3 {
					margin-top: 2px;
				}
			}
			*/

			> div[class^="col-"]:last-child {
				.ce-textpic {
					figure {
						img {
							margin: 15px 0 0 0;
						}
						margin: 0 0 10px 0;
					}
				}
			}
		}


		// Newsletter form
		form.newsletter {
			select {
				width: 100%;
			}

			input {
				width: 100%;
			}
		}
		// Newsletter form end

		// Form
        /* OLD V7.6
		.csc-mailform {
			ol {
				li {
					padding: 10px 0;

					label {
						width: 95%;
					}

					input {
						width: 99%;
					}

					textarea {
						width: 99%;
					}
				}
			}
		}
        */

        form {
            input:not([type='checkbox']),
            textarea,
            select {
                width: 100%;
            }
        }
		// Form end


		// Header image
		#header-image {
			margin-bottom: 30px;

			.header-image-label {
				margin-top: -70px;

				.label-feel {
					width: 140px;
					margin-right: 17px;
				}
				.label-fit {
					width: 140px;
					margin-right: 17px;
				}
				.label-vital {
					width: 140px;
				}
			}

		}
		// Header image end


		// Link box
		.row.link-box {
			padding: 15px 0 !important;

			.col-sm-6 {
				margin: 15px 0;

				&.news-latest {
					.link-box-description {
						height: 240px;
						padding: 20px 15px;

						h3 {
							font-size: 20px;
							margin-top: 8px;
							margin-bottom: 14px;
						}

						p {
							font-size: 17px;
							line-height: 1.25;
						}
					}
				}
			}
		}
		// Link box end


		// Lead-Text
		span.lead-text {
			margin-bottom: 10px;
		}
		// Lead-Text end


		// Potrtrait
		.row.portrait {
			background-color: #f2f4d1;
			padding: 30px 0 30px 0;

			& + .portrait {
				padding: 0px 0 30px 0;
				margin-top: 0px;
			}
		}
		// Potrtrait end


        // Urner «Wie geht’s dir?»-Bänkli
        .uebersichtskarte {
            display: none;
        }

        #c4552 {
            margin: 30px 0 ;

            .ce-bodytext {
                column-count: 2;
                column-gap: 10px;
            }
        }
        // Urner «Wie geht’s dir?»-Bänkli  end


        // Image Gallery
		.flow-thumbnail-gallery {
			.col-xs-3 {
				padding-bottom: 20px;

                a {
                    &:hover {
                        img {
                            border-top-left-radius: 25px;
                            border-top-right-radius: 25px;
                        }
                    }
                }

				.caption {
					p {
						font-size: 9px;
						margin: 1px 0 0 0;
					}
				}
			}
		}
        // Image Gallery end
	}

    // Urner «Wie geht’s dir?»-Bänkli
    .benches {
        #content {
            .ce-textpic figure img {
                margin: 0 !important;
            }

            .info-box {
                margin-top: 30px;
            }
        }
    }
    // Urner «Wie geht’s dir?»-Bänkli end
	// --- CONTENT END


	// --- FOOTER
	#footer {
		> .container {
			height: @c-footer-height;
		}

        h4 {
            margin: 16px 0 82px 0;
        }

		.nav {
			float: right;
			padding-top: 25px;

			> li {
				float: none;
                padding: 0 0 10px 0;

				> a {
					color: @link-color;
					text-decoration: none;
					//font-size: 14px;
					display: block;
					text-align: right;
				}
			}
		}

        /* Privacy cookie banner */
        .privacy-banner {
            .content {
                font-size: 14px;
                text-align: left;

                p {
                    font-size: 14px;
                }

                button.hide-banner {
                    margin-top: 10px;
                }
            }
        }
        /* Privacy cookie banner end */
	}
	// --- FOOTER END
}

@media (max-width: 575px) {

    @c-footer-height: 255px;

    // Sticky footer
    body {
        margin-bottom: @c-footer-height;  // same as footer height!
    }
    // Sticky footer end

    // --- FOOTER
    #footer {
        > .container {
            height: @c-footer-height;
        }
    }
}


@media screen and (max-width: 480px) {

	#content{
		// Header image
		#header-image {
			margin-bottom: 30px;

			.header-image-label {
				margin-top: -70px;

				.label-feel {
					width: 90px;
					margin-right: 12px;
				}
				.label-fit {
					width: 90px;
					margin-right: 12px;
				}
				.label-vital {
					width: 90px;
				}
			}

		}
		// Header image end
	}
}
// ***** MOBILE END *****


// ***** Print CSS *****
@media print {

	// Auf Grund der Komplexitität der verschiedenen Elemente nicht einfach so umsetzbar, daher sehr einfach gehalten!

	a[href]:after {
		content: "";
	}

	#header {
		.logo-print {
			float: left;
			width: 100%;
			margin: 0 0 20px -20px;

			img {
				width: 234px;
			}
		}
	}

	#content {
		#header-image {
			display: none;
		}

		//.row.link-box .col-sm-6 a .link-box-title h2 {
		//	background-color: #dddddd !important;
		//}
	}

	#footer {
		display: none;
	}

	.go-top {
		display: none;
	}
}
// ***** Print CSS end *****