/* Ferienhaus Lienharter – Design-System-Tokens (unverändert aus dem Design-System übernommen; nur Schriftpfade angepasst) */
@font-face{font-family:'Fraunces';src:url('../fonts/Fraunces-Variable.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Mulish';src:url('../fonts/Mulish-Variable.ttf') format('truetype');font-weight:200 1000;font-style:normal;font-display:swap}

/* ---- tokens/colors.css ---- */
:root{
/* Basisfarben (Konzept v3 + Demo style.css) */
--tannengruen:#3E4F35;
--salbeigruen:#8FA079;
--cremeweiss:#F7F3E9;
--weinrot:#7A3540;
--gruen-grau:#303633;
--weiss:#FFFFFF;
/* Aus der Demo übernommen */
--weinrot-hover:#632B34;
--linie-creme:#E7E1D2;
/* Abgeleitete Stufen (nur Zustände/Flächen) */
--tannengruen-700:#2F3C28;
--salbeigruen-200:#D5DCC9;
--salbeigruen-100:#E8ECDF;
--weinrot-100:#F1E3E3;
--gruen-grau-75:#5E6560;
--hero-overlay:rgba(0,0,0,.28);
/* Semantik */
--bg-page:var(--cremeweiss);
--surface-alt:var(--weiss);
--surface-card:var(--cremeweiss);
--surface-card-on-page:var(--weiss);
--surface-inverse:var(--tannengruen);
--text-body:var(--gruen-grau);
--text-muted:var(--gruen-grau-75);
--text-heading:var(--tannengruen);
--text-inverse:var(--weiss);
--text-inverse-soft:var(--cremeweiss);
--text-accent:var(--weinrot);
--text-price-on-dark:var(--salbeigruen);
--border-subtle:var(--linie-creme);
--border-strong:var(--tannengruen);
--icon-default:var(--salbeigruen);
--action-primary:var(--weinrot);
--action-primary-hover:var(--weinrot-hover);
--action-secondary:var(--tannengruen);
--focus-ring:rgba(143,160,121,.6);
--link:var(--tannengruen);
--link-hover:var(--weinrot);
}


/* ---- tokens/typography.css ---- */
:root{
--font-display:'Fraunces',Georgia,'Times New Roman',serif;
--font-body:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;
--fw-regular:400;/* @kind font */--fw-semibold:600;/* @kind font */--fw-bold:700;/* @kind font */--fw-black:900;/* @kind font */
/* Fluid: Smartphone-Wert → Desktop-Wert (Demo: H1 30→42, H2 30, H3 19) */
--fs-h1:clamp(30px,calc(12px + 4.2vw),42px);/* @kind font */
--fs-h2:clamp(24px,calc(14px + 2.4vw),30px);/* @kind font */
--fs-h2-band:clamp(22px,calc(14px + 2vw),28px);/* @kind font */
--fs-h3:19px;/* @kind font */
--fs-logo-text:22px;/* @kind font */
--fs-stat:26px;/* @kind font */
--fs-price:22px;/* @kind font */
--fs-lead:17px;/* @kind font */
--fs-body:16px;/* @kind font */
--fs-ui:15px;/* @kind font */
--fs-small:14px;/* @kind font */
--fs-min:13px;/* @kind font */
--lh-heading:1.2;/* @kind font */
--lh-body:1.6;/* @kind font */
--ls-ui:.3px;/* @kind font */
}


/* ---- tokens/spacing.css ---- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
/* Layout (Demo) */
--container-max:1100px;/* @kind spacing */
--gutter:clamp(16px,4vw,24px);/* @kind spacing */
--section-y:clamp(44px,7vw,70px);/* @kind spacing */
--grid-gap:24px;/* @kind spacing */
--card-min:280px;/* @kind spacing */
--hero-h:60vh;/* @kind spacing */
--hero-min-h:360px;/* @kind spacing */
--tap-min:44px;/* @kind spacing */
/* Breakpoints (nur Doku — CSS-Variablen funktionieren nicht in @media) */
--bp-sm:480px;/* @kind other */--bp-md:800px;/* @kind other */--bp-lg:1100px;/* @kind other */
/* Radien (Demo: Buttons 4px, Karten 6px) */
--radius-sm:4px;--radius-md:6px;--radius-lg:12px;--radius-pill:999px;
/* Flach: Demo nutzt keine Schatten. Nur Hover-Lift */
--shadow-hover:0 6px 20px rgba(62,79,53,.12);
--text-shadow-hero:0 2px 10px rgba(0,0,0,.35);/* @kind shadow */
--text-shadow-hero-sm:0 1px 6px rgba(0,0,0,.35);/* @kind shadow */
--ease:ease;/* @kind other */--dur:.2s;/* @kind other */
}


/* ---- tokens/base.css ---- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg-page);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);color:var(--text-heading);font-weight:var(--fw-semibold);line-height:var(--lh-heading);margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}
p{margin:0;text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--link-hover)}
::selection{background:var(--salbeigruen-200)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ---- tokens/layout.css ---- */
/* Responsive Layout-Hilfen — mobile first. Breakpoints: 480 / 800 / 1100 px */
.lh-container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.lh-section{padding:var(--section-y) 0}
.lh-section--alt{background:var(--surface-alt)}
.lh-section--inverse{background:var(--surface-inverse);color:var(--text-inverse)}
.lh-center{text-align:center}
.lh-measure{max-width:650px;margin-left:auto;margin-right:auto}
.lh-grid{display:grid;gap:var(--grid-gap);grid-template-columns:1fr}
@media (min-width:600px){.lh-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:800px){.lh-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.lh-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lh-stack{display:flex;flex-direction:column;gap:var(--space-4)}
.lh-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.lh-hide-mobile{display:none}@media (min-width:800px){.lh-hide-mobile{display:initial}.lh-hide-desktop{display:none}}