/*
Theme Name: Alpengasthof Strutz (VN Child)
Theme URI: https://alpengasthof.vision-nine.com
Author: Vision Nine Studio
Description: Child-Theme für Alpengasthof Strutz Wielfresen — Framework-Validierungs-Build PARALLEL zur Astro-Production. Tannengrün / Forellen-Kupfer / Mühlenmehl-Cream. Fraunces + Inter. Brand-Tokens aus apps/alpengasthof-strutz/src/styles/tokens.css übernommen.
Author URI: https://vision-nine.com
Template: vn-foundation
Version: 0.1.0
License: Proprietary
License URI: https://vision-nine.com
Text Domain: alpengasthof-strutz
*/

/* ==========================================================================
   Alpengasthof Strutz — Brand Tokens
   Sulmtal-Tannengrün · Forellen-Kupfer · Mühlenmehl-Cream
   Familienbetrieb seit 1958, Wielfresen 8551 Wies
   ========================================================================== */

:root {
	/* ============== BRAND CORE ============== */
	--forest-50:  #EAEFE9;
	--forest-100: #C7D2C5;
	--forest-300: #6B8466;
	--forest-500: #4B6647;
	--forest-700: #344B31;
	--forest-900: #2D4A2B;  /* Primary — Sulmtal-Tannengrün */

	--copper-50:  #FBEDE0;
	--copper-100: #F5D2AE;
	--copper-300: #DFA96E;
	--copper-500: #C8761D;  /* Accent — Forellen-Kupfer */
	--copper-600: #A6611A;
	--copper-700: #82490F;

	--cream-50:   #FBFAF7;
	--cream-100:  #F5F1EA;  /* Mühlenmehl-Hintergrund */
	--cream-300:  #E5DCC9;

	--stein-300:  #B8B2A8;
	--stein-500:  #8B8378;
	--stein-700:  #5C5750;

	--meadow-500: #6B8E5A;

	--ink-300:    #4A4844;
	--ink-700:    #2A2926;
	--ink-900:    #1A1A1A;

	/* Brand-Konstanten */
	--brand-forest:  #2D4A2B;
	--brand-copper:  #C8761D;
	--brand-cream:   #F5F1EA;
	--brand-ink:     #1A1A1A;

	/* Fonts */
	--font-display: "Fraunces", "Georgia", "Times New Roman", serif;
	--font-body:    "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Foundation-Override-Hooks */
	--brand-primary:  var(--brand-forest);
	--brand-accent:   var(--brand-copper);
	--brand-bg:       var(--cream-50);
	--brand-fg:       var(--ink-900);
	--brand-muted:    var(--stein-500);

	--vn-bg:          var(--brand-bg);
	--vn-text:        var(--brand-fg);
	--vn-accent:      var(--brand-accent);
}

/* ==========================================================================
   Typografie — Fraunces (Display) + Inter (Body)
   ========================================================================== */

body {
	background: var(--brand-bg);
	color: var(--brand-fg);
	font-family: var(--font-body);
}

h1, h2, h3, h4, .vn-hero__headline, .vn-intro__headline,
.vn-experience__headline, .vn-final-cta__headline {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--brand-forest);
}

/* ==========================================================================
   Section-Styles — Alpengasthof Look-and-Feel
   ========================================================================== */

.vn-hero {
	background: linear-gradient(180deg, var(--cream-50) 0%, var(--cream-100) 100%);
	padding: clamp(3rem, 8vw, 6rem) 1.5rem;
}

.vn-hero__inner {
	max-width: 64rem;
	margin: 0 auto;
}

.vn-hero__eyebrow {
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.85rem;
	color: var(--brand-copper);
	margin: 0 0 1rem;
}

.vn-hero__headline {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	margin: 0 0 1.5rem;
	white-space: pre-line;
}

.vn-hero__subline {
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	max-width: 42rem;
	color: var(--ink-700);
	margin: 0 0 2rem;
}

.vn-button {
	background: var(--brand-forest);
	color: var(--cream-50);
	font-family: var(--font-body);
	font-weight: 600;
	padding: 0.9rem 1.5rem;
	border-radius: 999px;
	display: inline-block;
	border: 0;
	cursor: pointer;
}

.vn-button:hover,
.vn-button:focus-visible {
	background: var(--forest-700);
	color: var(--cream-50);
	text-decoration: none;
}

.vn-button--primary {
	background: var(--brand-copper);
}
.vn-button--primary:hover,
.vn-button--primary:focus-visible {
	background: var(--copper-600);
}

.vn-intro,
.vn-experience,
.vn-final-cta {
	padding: clamp(3rem, 6vw, 5rem) 1.5rem;
}

.vn-intro__inner,
.vn-experience__inner,
.vn-final-cta__inner {
	max-width: 64rem;
	margin: 0 auto;
}

.vn-experience {
	background: var(--cream-100);
}

.vn-experience__list {
	list-style: none;
	padding: 0;
	margin: 2rem 0 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.vn-experience__card {
	background: var(--cream-50);
	border: 1px solid var(--cream-300);
	padding: 1.5rem;
	border-radius: 0.5rem;
	transition: transform 200ms ease, border-color 200ms ease;
}

.vn-experience__card:hover {
	transform: translateY(-2px);
	border-color: var(--copper-300);
}

.vn-experience__accent {
	display: inline-block;
	background: var(--copper-50);
	color: var(--copper-700);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.25rem 0.5rem;
	border-radius: 999px;
	margin-bottom: 0.75rem;
}

.vn-experience__title {
	font-size: 1.5rem;
	margin: 0 0 0.5rem;
}

.vn-experience__title a {
	color: var(--brand-forest);
	text-decoration: none;
}

.vn-experience__title a:hover {
	color: var(--brand-copper);
	text-decoration: underline;
}

.vn-final-cta {
	background: var(--brand-forest);
	color: var(--cream-50);
	text-align: center;
}

.vn-final-cta__headline,
.vn-final-cta__eyebrow {
	color: var(--cream-50);
}

.vn-final-cta__eyebrow {
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.85rem;
	color: var(--copper-300);
}

/* ==========================================================================
   Header / Footer Brand-Anpassungen
   ========================================================================== */

.vn-site-header {
	background: var(--cream-50);
	border-bottom: 1px solid var(--cream-300);
}

.vn-site-header__title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--brand-forest);
}

.vn-site-footer {
	background: var(--ink-900);
	color: var(--cream-300);
	padding: 3rem 1.5rem;
}

.vn-site-footer a {
	color: var(--copper-300);
}