﻿
@charset "utf-8";

/**
 * Theme Name:     Fichtl-Hof
 * Theme URI:      www.fichtl-hof.it
 * Description:    Spezialitäten aus Südtirol
 * Author:         Pircher Stefan
 * Author URI:     www.ps-design.it
 * Version:        2.0
 */

/* ============================
   > CONTENTS
   ==================
		> BODY, HTML
*/

/* ============================
   > BODY, HTML
   ================== */

body, html, input, button, textarea, select {
		font-family:var(--fichtl_font_regular); font-size:20px;
		line-height:1.5rem; color:var(--fichtl_dark_grey);
}
body {
		margin:0; padding:0; height:100%; /* css-pattern */ background-size:4px 4px;
		background-image:repeating-linear-gradient(45deg, rgb(218, 218, 218) 0px, rgb(218, 218, 218) 0.4px, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 50%);
}

/* media-queries */

/* ============================
   > CSS-VARIABLES
   ================== */

:root {
		/* farbwerte */
		--fichtl_green:#424a19;
		--fichtl_brown:#560f18;
		--fichtl_light_grey:#dadada;
		--fichtl_medium_grey:#787878;
		--fichtl_dark_grey:#484848;
		--fichtl_white:#fff;
		/* schriften */
		--fichtl_font_regular:'Amaranth-Regular', Arial, Helvetica, sans-serif;
		--fichtl_font_bold:'Amaranth-Bold', Arial, Helvetica, sans-serif;
}

/* ============================
   > FONT-EMBEDS
   ================== */

@font-face {
		font-family:'Amaranth-Regular';
		src:url('fonts/amaranth-regular.woff2') format('woff2');
}
@font-face {
		font-family:'Amaranth-Bold';
		src:url('fonts/amaranth-bold.woff2') format('woff2');
}

/* ============================
   > LINKS
   ================== */

a:link 			{ font-family:var(--fichtl_font_regular); font-size:20px; color:var(--fichtl_green); text-decoration:underline; }
a:visited 	{ font-family:var(--fichtl_font_regular); font-size:20px; color:var(--fichtl_green); text-decoration:underline; }
a:active 		{ font-family:var(--fichtl_font_regular); font-size:20px; color:var(--fichtl_green); text-decoration:none; }
a:hover 		{ font-family:var(--fichtl_font_regular); font-size:20px; color:var(--fichtl_green); text-decoration:none; }

/* ============================
   > PRELOADER
   ================== */

/* ============================
   > FLEXBOX
   ================== */

.flex {
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
}

/* ============================
   > H/V CENTERING
   ================== */

.halign { left:50%; transform:translateX(-50%); }
.valign { top:50%; transform:translateY(-50%); }
.hvalign { top:50%; left:50%; transform:translate(-50%,-50%); }

/* ============================
   > HEADLINES
   ================== */

h1, h2, h3, h4, h5 {
		font-family:var(--fichtl_font_bold);
		font-size:48px; line-height:2rem;
		margin:0; color:var(--fichtl_dark_grey);
		hyphens:auto; font-weight:normal;
}
body strong {
		font-family:var(--fichtl_font_regular);
		font-weight:normal;
}

/* media-queries */

/* ============================
   > WRAPPER
   ================== */

.wrap {
		position:relative;
		max-width:1280px;
		margin:0 auto;
}

/* media-queries */
@media screen and (max-width: 1360px) {
		.wrap {
				max-width:none;
				margin:0 40px;
		}
}
@media screen and (max-width: 480px) {
		.wrap {
				margin:0 20px;
		}
}

/* ============================
   > UC-SEITE
   ================== */

div.uc {
		position:absolute; width:680px;
		box-shadow:0px 0px 12px #c8c8c8;
		background-color:#fff;
		flex-wrap:wrap;
}
div.uc div {
		box-sizing:border-box;
		width:100%;
}
div.uc div.a { width:50%; height:300px;  }
div.uc div.b { width:50%; position:relative; }
div.uc div.a { background:url('fichtl-hof.webp') no-repeat center;
		border-right:1px solid var(--fichtl_light_grey);
		background-size:45%;
}
div.uc div.a, div.uc div.b {
		border-bottom:1px solid var(--fichtl_light_grey);
}
div.uc .adresse {
		font-family:var(--fichtl_font_regular);
		font-size:22px; line-height:1.4rem;
		color:var(--fichtl_brown);
}
div.uc .adresse {
		position:absolute;
		max-width:70%;
}
div.uc .adresse a {
		text-decoration:underline;
		color:#484848;
}
div.uc .adresse a:hover {
		text-decoration:none;
}
div.uc .adresse span,
div.uc .opening strong {
		color:var(--fichtl_brown);
}

/* media-queries */
@media screen and (max-width: 720px) {
		div.uc {
				position:relative; width:auto;
				margin:40px; transform:none;
				top:0; left:0;
		}
		div.uc div.a {
				background-size:131px 200px;
				height:248px;
		}
		div.uc div.a, div.uc div.b {
				width:100%;
		}
		div.uc .adresse {
				position:relative;
				text-align:center;
				padding:40px;
				max-width:100%;
				transform:none;
				top:0; left:0;
		}
}
@media screen and (max-width: 480px) {
		div.uc {
				margin:20px;
		}
		div.uc .adresse {
				padding:40px 20px;
		}
}

/* ============================
   > HEADER
   ================== */

/* ============================
   > BACKTOP
   ================== */

.backtop {
		position:fixed; z-index:7; cursor:pointer;
		bottom:10px; right:10px; width:60px; height:50px;
		border-radius:4px; background:var(--fichtl_green);
		display:flex; align-items:center;
		justify-content:center;
}
.backtop:after {
		border:solid var(--fichtl_white);
		display:inline-block; content:'';
		border-width:0 2px 2px 0; padding:5px;
		margin-top:5px; transform:rotate(-135deg);
		-webkit-transform:rotate(-135deg);
}
