/****************************************************************************
 * customize.css – Projekt: marlis-meyer.ch
 * Basis: Premium Contao Theme
 * Hinweis: Reihenfolge & Struktur beachten
 ****************************************************************************/

/****************************************************************************
 * 0. Lokale Fonts (Google Fonts Download z. B. über google-webfonts-helper)
 ****************************************************************************/

/* pt-sans-regular - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'PT Sans';
   font-style: normal;
   font-weight: 400;
   src: url('../fonts/pt-sans-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* pt-sans-italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'PT Sans';
   font-style: italic;
   font-weight: 400;
   src: url('../fonts/pt-sans-v18-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* pt-sans-700 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'PT Sans';
   font-style: normal;
   font-weight: 700;
   src: url('../fonts/pt-sans-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }


/* =========================================================
	 1. Reset / Fixes
   ========================================================= */
html, body {
	scroll-behavior: smooth;
}
button {
	-webkit-appearance: none;
}


/* =========================================================
	 2. Farbdefinitionen (Projektfarben)
   ========================================================= */
:root {
	--bodyColor: #3f3f3f;
	--secondColor: #b2b2a8;
	--accentColor: #b60f1f;
	--bgColor1: #f0eeeb;
	--bgColor2: #4c4c47;
	--white: #fff;
	--nav: #555400;
}


/* =========================================================
	 3. Typografie
   ========================================================= */
html {
	font-size: 15px;
}

body {
	font-size: 1rem;
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
	color: var(--bodyColor);
}

h1, h2 {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 700;
	line-height: 1.2;
	color: var(--secondColor);
}

h3, h4, h5, h6 {
	font-family: 'Spectral';
	font-style: italic;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.05rem;
	color: var(--bodyColor);
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.5rem; }


/* =========================================================
	 4. Navigation
   ========================================================= */
.mainmenu ul li a {
	color: var(--nav);
	font-size: 1.2rem;
	text-transform: lowercase;
}


/* =========================================================
	 5. Buttons & Links
   ========================================================= */
.btn,
button,
input[type="submit"] {
	background: var(--bodyColor) !important;
	color: #fff !important;
	border-radius: 6px;
	padding: 0.6rem 1.2rem;
	transition: all 0.2s ease-in-out;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
	background: var(--secondColor) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

#main .ce_text a, #main .ce_text p a {
	color: var(--accentColor);
	text-decoration: none;
}


/* =========================================================
	 6. Content-Elemente (Contao spezifisch)
   ========================================================= */
.ce_headline {
	margin-bottom: 1rem;
}

table {
	border-collapse: collapse;
	width: 100%;
}
table th, table td {
	border: 1px solid #ddd;
	padding: 0.6rem;
}


/* =========================================================
	 7. Footer
   ========================================================= */
.footer {
	background: var(--color-dark);
	color: #fff;
	font-size: 0.9rem;
	padding: 2rem 0;
}
.footer a {
	color: var(--color-light) !important;
}
.footer a:hover {
	color: var(--secondColor) !important;
}


/* =========================================================
	 8. Utilities / Helferklassen
   ========================================================= */
.text-center { text-align: center !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-4 { margin-top: 1rem !important; }


/* =========================================================
	 9. Responsive Anpassungen
   ========================================================= */

/* Ab Tablet (>= 768px) */
@media (min-width: 768px) {
	.header .mainmenu ul li a {
		color: var(--nav);
		font-size: 1.66rem;
		line-height: 1.3;
		letter-spacing: 0.05rem;
	}
}

/* Bis Tablet (< 768px) */
@media (max-width: 767px) {
	.btn,
	button,
	input[type="submit"] {
	display: block;
	width: 100%;
	text-align: center;
	}

	.footer {
	text-align: center;
	}
}