/* Kreuzberghof Großarl – main.css
   Fonts: Vollkorn + Karla (SIL Open Font License 1.1), lokal unter styles/fonts/.
   Variable Fonts, subgesetzt auf Latin-1 + typografische Zeichen. Keine externen Requests. */

@font-face{
	font-family:'Vollkorn';font-style:normal;font-weight:400 900;font-display:swap;
	src:url('fonts/vollkorn-variable.woff2') format('woff2');
}
@font-face{
	font-family:'Vollkorn';font-style:italic;font-weight:400 900;font-display:swap;
	src:url('fonts/vollkorn-italic-variable.woff2') format('woff2');
}
@font-face{
	font-family:'Karla';font-style:normal;font-weight:200 800;font-display:swap;
	src:url('fonts/karla-variable.woff2') format('woff2');
}

:root{
	--tanne:#16241C;
	--fichte:#24382C;
	--alm:#4C7A5A;
	--heu:#C9A24B;
	--schnee:#EEF2F4;
	--papier:#F5F3EC;
	--tinte:#21261F;
	--linie:#D9D5C8;
	--radius:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{transition:none!important;animation:none!important}
}
body{
	font-family:'Karla',system-ui,sans-serif;
	background:var(--papier);color:var(--tinte);
	font-size:17px;line-height:1.65;
}
h1,h2,h3{font-family:'Vollkorn',Georgia,serif;line-height:1.15;color:var(--fichte)}
a{color:var(--fichte)}
a:focus-visible,button:focus-visible{outline:3px solid var(--heu);outline-offset:3px}
img{max-width:100%;height:auto}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.eyebrow{
	font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
	font-weight:700;color:var(--alm);margin-bottom:.75rem;display:block;
}

/* ---------- Header ---------- */
header{background:var(--tanne);color:var(--papier);position:sticky;top:0;z-index:20}
.header-inner{
	max-width:1100px;margin:0 auto;padding:14px 24px;
	display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.brand{display:flex;flex-direction:column;text-decoration:none}
.brand strong{font-family:'Vollkorn',serif;font-size:1.35rem;font-weight:700;color:var(--papier)}
.brand span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--heu)}
nav ul{display:flex;gap:22px;list-style:none;flex-wrap:wrap}
nav a{
	color:var(--papier);text-decoration:none;font-size:.92rem;font-weight:500;
	border-bottom:2px solid transparent;padding-bottom:2px;
}
nav a:hover,nav a.aktiv{border-color:var(--heu)}
nav a.cta{border:1.5px solid var(--heu);border-radius:999px;padding:6px 16px;color:var(--heu)}
nav a.cta:hover{background:var(--heu);color:var(--tanne)}

/* ---------- Hero: Saisonen-Split ---------- */
.hero-wrap{position:relative}
.hero{display:flex;min-height:520px;color:#fff}
.season{
	position:relative;flex:1;display:flex;align-items:flex-end;
	padding:48px 40px;overflow:hidden;text-decoration:none;color:#fff;
	transition:flex .45s ease;
}
.hero:hover .season{flex:.75}
.hero .season:hover{flex:1.6}
.season .label{position:relative;z-index:2;max-width:340px}
.season .label h2{color:#fff;font-size:2rem;margin-bottom:.4rem}
.season .label p{font-size:.95rem;opacity:.92}
.season .label .mehr{
	display:inline-block;margin-top:14px;font-size:.8rem;letter-spacing:.14em;
	text-transform:uppercase;font-weight:700;color:var(--heu);
	border-bottom:2px solid var(--heu);padding-bottom:2px;
}
.season svg{position:absolute;inset:0;width:100%;height:100%}

/* Saison-Kachel mit Foto: Bild als Hintergrund, SVG-Grafik entfaellt.
   Der Verlauf darueber haelt den Text lesbar, egal wie hell das Foto ist. */
.season.hat-foto{background-size:cover;background-position:center}
.season.hat-foto svg{display:none}
.season.hat-foto::after{
	content:"";position:absolute;inset:0;z-index:1;
	background:linear-gradient(180deg,rgba(15,28,20,.15) 0%,rgba(15,28,20,.35) 45%,rgba(15,28,20,.78) 100%);
}
.sommer{background:linear-gradient(180deg,#7FA98C 0%,#3E664C 70%,#2A4736 100%)}
.winter{background:linear-gradient(180deg,#A9C2D1 0%,#5E7C8F 70%,#3D5568 100%)}
.winter .label .mehr{color:#fff;border-color:#fff}
.hero-claim{
	position:absolute;top:0;left:0;right:0;z-index:3;pointer-events:none;
	text-align:center;padding:56px 24px 0;
}
.hero-claim h1{
	color:#fff;font-size:clamp(2rem,4.5vw,3.4rem);font-weight:700;
	text-shadow:0 2px 18px rgba(15,30,22,.45);
}
.hero-claim p{
	color:#fff;opacity:.95;font-size:1.05rem;margin-top:.5rem;
	text-shadow:0 1px 10px rgba(15,30,22,.5);
}

/* ---------- Bergkamm-Trenner ---------- */
.kamm{display:block;width:100%;height:46px;fill:var(--fichte);opacity:.12;margin:8px 0 -8px}

/* ---------- Sektionen & Inhalte ---------- */
section{padding:72px 0}
.seitenkopf{padding:56px 0 0}
.seitenkopf h1{font-size:clamp(1.9rem,4vw,2.8rem)}
.inhalt{padding-top:32px}
.prose{max-width:62ch}
.prose h2{font-size:1.7rem;margin:1.6em 0 .5em}
.prose h3{font-size:1.25rem;margin:1.4em 0 .4em}
.prose p{margin-bottom:1rem}
.prose ul,.prose ol{margin:0 0 1rem 1.2rem}
.prose table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--linie);padding:8px 12px;text-align:left}
.prose th{background:#fff;font-family:'Karla',sans-serif}
.lead{margin-bottom:40px}

.intro-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.intro-grid h2{font-size:2.1rem;margin-bottom:1rem}
.edelweiss{
	display:inline-flex;align-items:center;gap:10px;margin-top:10px;
	background:#fff;border:1px solid var(--linie);border-radius:999px;
	padding:8px 18px;font-size:.85rem;font-weight:700;color:var(--fichte);
}
.edelweiss span{color:var(--heu);letter-spacing:.2em;font-size:1rem}
.foto{
	border-radius:var(--radius);overflow:hidden;box-shadow:0 14px 34px rgba(22,36,28,.16);
	aspect-ratio:4/3;background:var(--alm);
}
.foto img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Wohnungen ---------- */
.wohnungen{background:#fff;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.wohnungen h2{font-size:2.1rem;margin-bottom:.5rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
	background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius);
	overflow:hidden;display:flex;flex-direction:column;
}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.card .body{padding:22px 22px 26px}
.card h3{font-size:1.25rem;margin-bottom:.4rem}
.card p{font-size:.92rem;margin-bottom:.9rem}
.card ul{list-style:none;font-size:.88rem}
.card li{padding:5px 0;border-top:1px dashed var(--linie)}
.card li::before{content:"— ";color:var(--heu);font-weight:700}

/* ---------- Galerie ---------- */
.galerie-titel{margin:56px 0 20px;font-size:1.6rem}
/* Automatische Spaltenzahl: passt sich an Bildanzahl und Breite an, statt
   ein einzelnes Bild in einem starren Dreispalter verloren wirken zu lassen. */
.galerie-grid{
	display:grid;gap:16px;margin-top:32px;
	grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.galerie-grid.gross{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* Genau ein Bild: ueber die volle Inhaltsbreite, ruhiges Querformat. */
.galerie-grid.einzeln{grid-template-columns:1fr;max-width:100%}
.galerie-grid.einzeln .galerie-item img{aspect-ratio:16/9}
.galerie-item{
	display:block;border-radius:var(--radius);overflow:hidden;
	border:1px solid var(--linie);background:#fff;
}
.galerie-item img{
	width:100%;aspect-ratio:7/5;object-fit:cover;display:block;
	transition:transform .3s ease;
}
.galerie-item:hover img{transform:scale(1.03)}

/* ---------- Kontakt ---------- */
.kontakt{background:var(--fichte);color:var(--papier)}
.kontakt h2{color:#fff;font-size:2.1rem;margin-bottom:.6rem}
.kontakt .eyebrow{color:var(--heu)}
.kontakt-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.kontakt p{max-width:52ch;margin-bottom:1.2rem}
.mailto{
	display:inline-block;background:var(--heu);color:var(--tanne);
	font-weight:700;text-decoration:none;font-size:1.05rem;
	padding:15px 30px;border-radius:999px;transition:transform .15s ease;
}
.mailto:hover{transform:translateY(-2px)}
.kontakt small{display:block;margin-top:14px;opacity:.85;font-size:.82rem}
.kontakt small a{color:var(--heu)}
.kontakt-daten{
	background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
	border-radius:var(--radius);padding:28px;font-size:.95rem;
}
.kontakt-daten dt{font-weight:700;color:var(--heu);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-top:16px}
.kontakt-daten dt:first-child{margin-top:0}
.kontakt-daten dd{margin:2px 0 0}
.kontakt-daten a{color:var(--papier)}

/* ---------- Footer ---------- */
footer{background:var(--tanne);color:var(--papier);padding:34px 0;font-size:.85rem}
.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:var(--papier);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);margin-left:8px}
footer a:first-child{margin-left:0}
footer a:hover{border-color:var(--heu)}
.privat{color:var(--heu);font-weight:700}

/* ---------- Responsive ---------- */
@media (max-width:820px){
	.hero{flex-direction:column;min-height:auto}
	.season{min-height:280px;padding:32px 24px}
	.hero:hover .season,.hero .season:hover{flex:1}
	.hero-claim{position:static;background:var(--tanne);padding:40px 24px}
	.hero-claim h1{text-shadow:none}
	.intro-grid,.kontakt-grid{grid-template-columns:1fr;gap:32px}
	.cards,.galerie-grid,.galerie-grid.gross{grid-template-columns:1fr 1fr}
	section{padding:52px 0}
}
@media (max-width:540px){
	.cards,.galerie-grid,.galerie-grid.gross{grid-template-columns:1fr}
}

/* ---------- Lightbox (eigenes Skript, styles/lightbox.js) ---------- */
html.lb-aktiv{overflow:hidden}
.lb{
	position:fixed;inset:0;z-index:100;display:none;
	align-items:center;justify-content:center;
	background:rgba(12,20,15,.94);
	padding:24px 72px;
}
.lb.lb-offen{display:flex}
.lb-buehne{
	margin:0;max-width:100%;max-height:100%;
	display:flex;flex-direction:column;align-items:center;gap:14px;
}
.lb-buehne img{
	max-width:100%;max-height:82vh;display:block;
	border-radius:var(--radius);
	box-shadow:0 24px 60px rgba(0,0,0,.5);
	background:var(--fichte);
	transition:opacity .2s ease;
}
.lb.laedt .lb-buehne img{opacity:.35}
.lb-buehne figcaption{
	color:var(--papier);font-size:.9rem;text-align:center;
	max-width:60ch;opacity:.85;
}
.lb-zaehler{
	position:absolute;bottom:18px;left:0;right:0;text-align:center;
	color:var(--papier);opacity:.6;font-size:.8rem;letter-spacing:.14em;
}
.lb-zu,.lb-nav{
	position:absolute;background:none;border:0;cursor:pointer;
	color:var(--papier);line-height:1;padding:12px;
	font-family:'Karla',sans-serif;transition:color .15s ease;
}
.lb-zu:hover,.lb-nav:hover{color:var(--heu)}
.lb-zu{top:14px;right:18px;font-size:2.4rem}
.lb-nav{top:50%;transform:translateY(-50%);font-size:3.4rem}
.lb-zurueck{left:10px}
.lb-vor{right:10px}
.lb-zu:focus-visible,.lb-nav:focus-visible{outline:3px solid var(--heu);outline-offset:2px}

@media (max-width:640px){
	.lb{padding:16px 8px 48px}
	.lb-buehne img{max-height:72vh}
	.lb-nav{font-size:2.4rem;padding:8px}
	.lb-zurueck{left:0}
	.lb-vor{right:0}
}

/* ---------- Preistabellen ---------- */
/* Die Preisseite braucht mehr Breite als die 62-Zeichen-Lesespalte. */
.tpl-basic-page .prose .preis-block{max-width:none;width:100%}

.preis-block{margin:0 0 44px}
.preis-block h3{font-size:1.35rem;margin:0 0 4px}
.preis-block .zeitraum{
	font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
	color:var(--alm);font-weight:700;margin-bottom:14px;
}

/* Auf schmalen Displays waagrecht scrollbar statt zerquetscht */
.preis-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

table.preise{
	border-collapse:collapse;width:100%;min-width:520px;
	font-size:.95rem;background:#fff;
	border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;
}
table.preise th,table.preise td{
	padding:11px 16px;text-align:left;border-bottom:1px solid var(--linie);
}
table.preise thead th{
	background:var(--fichte);color:var(--papier);
	font-family:'Karla',sans-serif;font-weight:700;
	font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
	border-bottom:0;
}
table.preise tbody th{font-weight:500;color:var(--tinte);white-space:nowrap}
table.preise td{font-variant-numeric:tabular-nums;white-space:nowrap}
table.preise tbody tr:last-child th,
table.preise tbody tr:last-child td{border-bottom:0}
table.preise tbody tr:nth-child(even){background:var(--papier)}

.preis-hinweis{
	background:#fff;border:1px solid var(--linie);border-left:4px solid var(--heu);
	border-radius:var(--radius);padding:18px 22px;margin:0 0 44px;font-size:.95rem;
}
.preis-hinweis strong{color:var(--fichte)}
.preis-hinweis ul{margin:.5rem 0 0 1.1rem}
.preis-hinweis li{margin-bottom:.25rem}

@media (max-width:640px){
	table.preise th,table.preise td{padding:9px 12px;font-size:.88rem}
}

/* ---------- Besonderheiten auf der Startseite ---------- */
.vorteile{padding:0 0 8px}
.vorteil-karten{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vorteil{
	background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
	border-top:3px solid var(--heu);
	padding:30px 30px 32px;
}
.vorteil svg{
	width:40px;height:40px;display:block;margin-bottom:16px;
	fill:var(--heu);stroke:var(--heu);
}
.vorteil h3{font-size:1.3rem;margin-bottom:.5rem}
.vorteil p{font-size:.95rem;margin:0;max-width:42ch}

@media (max-width:820px){
	.vorteil-karten{grid-template-columns:1fr;gap:16px}
	.vorteil{padding:24px}
}