/*
Theme Name: Nöske24 Portal
Theme URI: https://noeske24.de/
Description: Portal der Mitteldeutschen Camping- und Gastro GmbH. Reduziert auf das Wesentliche: große Typografie, eine Liste der Häuser, Fotos erscheinen beim Überfahren. Ohne externe Schriften, ohne eingebettete Karte, ohne Cookie-Banner.
Author: Mitteldeutsche Camping- und Gastro GmbH
Version: 3.3.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: noeske24
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root{
	--paper:#fbfaf7;
	--ink:#0d0d0c;
	--muted:#8a8a84;
	--line:#e2e0d9;
	--accent:#c8a415;
	--ff:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
	--pad:clamp(20px,5vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font-family:var(--ff);
	font-size:17px;
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
p{margin:0 0 18px}

h1,h2,h3{
	margin:0;
	font-weight:600;
	letter-spacing:-0.035em;
	line-height:0.94;
}

.n24-wrap{max-width:1500px;margin:0 auto;padding:0 var(--pad)}

/* ---------------- Fußbereich mit der Navigation ---------------- */

.n24-foot{padding:clamp(50px,7vw,90px) 0 clamp(40px,5vw,70px);border-top:1px solid var(--line)}

.n24-foot__top{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:24px;
	flex-wrap:wrap;
}

.n24-foot__brand{
	font-size:.84rem;
	font-weight:700;
	letter-spacing:.22em;
	text-transform:uppercase;
}

.n24-foot__brand img{max-height:30px;width:auto}

.n24-foot__nav ul{display:flex;gap:26px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.n24-foot__nav a{font-size:.86rem;font-weight:600;letter-spacing:.03em}
.n24-foot__nav a:hover{color:var(--accent)}

.n24-foot__legal{margin:clamp(28px,4vw,46px) 0 0;font-size:.78rem;color:var(--muted)}

/* Abstand über der ersten Zeile, da es keine Kopfzeile gibt */
.n24-listtop{padding-top:clamp(52px,7vw,96px)}

/* ---------------- Häuserliste ---------------- */

.n24-list{position:relative}

.n24-row{
	position:relative;
	display:grid;
	grid-template-columns:minmax(0,1fr) auto;
	align-items:start;
	gap:clamp(16px,3vw,48px);
	padding:clamp(26px,3.2vw,44px) clamp(0px,2vw,34px);
	border-bottom:1px solid var(--line);
	isolation:isolate;
	overflow:hidden;
	transition:padding .6s cubic-bezier(.2,.8,.25,1);
}

/* Das Foto wischt von links durch die ganze Zeile */
.n24-row__media{
	display:block;
	position:absolute;
	inset:0;
	z-index:1;
	clip-path:inset(0 100% 0 0);
	transition:clip-path .8s cubic-bezier(.72,0,.2,1);
}

.n24-row__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}

.n24-row__media::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,rgba(9,11,13,.66),rgba(9,11,13,.42) 60%,rgba(9,11,13,.5));
}

.n24-row:hover .n24-row__media{clip-path:inset(0 0 0 0)}

/* Beim Aufwischen wächst die Zeile, damit mehr vom Bild sichtbar wird */
.n24-row:hover{padding-top:clamp(46px,6vw,86px);padding-bottom:clamp(46px,6vw,86px)}

.n24-row__head{min-width:0}

.n24-row__name{
	display:block;
	position:relative;
	z-index:2;
	font-size:clamp(2rem,6.2vw,5.4rem);
	font-weight:600;
	letter-spacing:-0.04em;
	line-height:0.95;
	transition:transform .6s cubic-bezier(.2,.8,.25,1),color .45s;
}

.n24-row:hover .n24-row__name{transform:translateX(clamp(6px,1.2vw,20px));color:#fff}

/* Beschreibung und Link erscheinen erst beim Aufwischen */
.n24-row__more{
	display:block;
	position:relative;
	z-index:2;
	max-width:52ch;
	margin-top:0;
	opacity:0;
	transform:translateY(10px);
	max-height:0;
	overflow:hidden;
	transition:opacity .45s ease .16s,transform .6s cubic-bezier(.2,.8,.25,1) .16s,max-height .6s cubic-bezier(.2,.8,.25,1),margin .6s cubic-bezier(.2,.8,.25,1);
}

.n24-row:hover .n24-row__more{opacity:1;transform:none;max-height:16em;margin-top:clamp(14px,1.6vw,24px)}

.n24-row__desc{
	display:block;
	font-size:clamp(.98rem,1.25vw,1.18rem);
	line-height:1.5;
	color:rgba(255,255,255,.88);
	margin-bottom:14px;
}

.n24-row__cta{
	display:inline-flex;
	align-items:center;
	gap:9px;
	font-size:.86rem;
	font-weight:600;
	letter-spacing:.04em;
	color:#fff;
	border-bottom:1px solid rgba(255,255,255,.5);
	padding-bottom:3px;
}

.n24-row__host{
	display:block;
	margin-top:10px;
	font-size:.76rem;
	letter-spacing:.08em;
	color:rgba(255,255,255,.55);
}

.n24-row__meta{
	position:relative;
	z-index:2;
	text-align:right;
	font-size:.85rem;
	color:var(--muted);
	max-width:26ch;
	transition:color .45s;
	padding-top:.5em;
}

.n24-row__meta strong{display:block;font-weight:600;color:var(--ink);margin-bottom:3px;transition:color .45s}

.n24-row:hover .n24-row__meta{color:rgba(255,255,255,.72)}
.n24-row:hover .n24-row__meta strong{color:#fff}

/* Ohne Foto: ruhige dunkle Fläche statt Bild */
.n24-row--noimg .n24-row__media{background:var(--ink)}
.n24-row--noimg .n24-row__media::after{background:none}

/* Auf Touchgeräten gibt es kein Überfahren */
.n24-row__thumb{display:none}

/* Schaltfläche zum Aufklappen – nur auf Geräten ohne Maus sichtbar */
.n24-row__toggle{display:none}

@media (hover:none),(max-width:860px){
	.n24-row,
	.n24-row:hover{padding:24px 0}

	.n24-row{
		grid-template-columns:minmax(0,1fr) 2.4rem;
		grid-template-areas:"head toggle" "meta meta";
		row-gap:10px;
		align-items:start;
	}

	.n24-row__head{grid-area:head}
	.n24-row__meta{grid-area:meta;text-align:left;padding-top:0}
	.n24-row__thumb{display:none}

	.n24-row__name{font-size:clamp(1.7rem,7.4vw,2.6rem)}
	.n24-row:hover .n24-row__name{transform:none;color:var(--ink)}
	.n24-row:hover .n24-row__meta{color:var(--muted)}
	.n24-row:hover .n24-row__meta strong{color:var(--ink)}

	/* Das Bild sitzt jetzt in der Zeile und klappt auf */
	.n24-row__media{
		display:block;
		position:relative;
		inset:auto;
		z-index:0;
		clip-path:none;
		width:100%;
		height:0;
		overflow:hidden;
		border-radius:2px;
		transition:height .5s cubic-bezier(.2,.8,.25,1),margin .5s cubic-bezier(.2,.8,.25,1);
		margin:0;
	}

	.n24-row__media::after{display:none}
	.n24-row__media img{height:100%;object-position:center 45%}

	.n24-row__more{
		opacity:0;
		transform:none;
		max-height:0;
		margin-top:0;
		transition:opacity .3s ease,max-height .5s cubic-bezier(.2,.8,.25,1),margin .5s cubic-bezier(.2,.8,.25,1);
	}

	.n24-row__desc{color:var(--muted);font-size:.98rem;margin-bottom:12px}
	.n24-row__cta{color:var(--ink);border-color:var(--line);font-size:.84rem}
	.n24-row__host{color:var(--muted)}

	/* Der Plus-Knopf */
	.n24-row__toggle{
		grid-area:toggle;
		display:block;
		width:34px;
		height:34px;
		border:1px solid var(--line);
		border-radius:50%;
		background:none;
		position:relative;
		flex:none;
		justify-self:end;
		margin-top:4px;
		transition:transform .45s cubic-bezier(.2,.8,.25,1),border-color .3s,background .3s;
	}

	.n24-row__toggle::before,
	.n24-row__toggle::after{
		content:"";position:absolute;top:50%;left:50%;background:var(--ink);
		transition:opacity .3s,background .3s;
	}

	.n24-row__toggle::before{width:13px;height:1.5px;transform:translate(-50%,-50%)}
	.n24-row__toggle::after{width:1.5px;height:13px;transform:translate(-50%,-50%)}

	.n24-row.is-open .n24-row__toggle{transform:rotate(135deg);background:var(--ink);border-color:var(--ink)}
	.n24-row.is-open .n24-row__toggle::before,
	.n24-row.is-open .n24-row__toggle::after{background:var(--paper)}

	.n24-row.is-open .n24-row__media{height:clamp(180px,52vw,300px);margin:16px 0 0}
	.n24-row.is-open .n24-row__more{opacity:1;max-height:22em;margin-top:16px}

	/* Zeile ohne Foto: nur die Angaben klappen auf */
	.n24-row--noimg.is-open .n24-row__media{height:0;margin:0}
}

/* ---------------- Schluss ---------------- */

.n24-end{
	padding:clamp(80px,12vw,180px) 0 clamp(50px,6vw,90px);
}

.n24-end h2{
	font-size:clamp(1.8rem,4.6vw,4rem);
	max-width:18ch;
	margin-bottom:clamp(28px,4vw,52px);
}

.n24-end__grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	gap:clamp(24px,4vw,60px);
	padding-top:clamp(28px,4vw,52px);
	border-top:1px solid var(--line);
}

.n24-end__grid h3{
	font-size:.76rem;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--muted);
	margin-bottom:14px;
	letter-spacing:.16em;
}

.n24-end__grid p{margin:0 0 6px}
.n24-end__grid a:hover{color:var(--accent)}

.n24-legal{
	display:flex;
	justify-content:space-between;
	gap:20px;
	flex-wrap:wrap;
	margin-top:clamp(40px,6vw,90px);
	padding-top:22px;
	border-top:1px solid var(--line);
	font-size:.8rem;
	color:var(--muted);
}

.n24-legal ul{display:flex;gap:14px;margin:0;padding:0;list-style:none}

/* ---------------- Unterseiten ---------------- */

.n24-page{padding:clamp(70px,9vw,120px) 0 clamp(60px,8vw,110px)}
.n24-page h1{font-size:clamp(2.4rem,6vw,5rem);margin-bottom:clamp(28px,4vw,48px);max-width:16ch}
.n24-entry{max-width:66ch;font-size:1.06rem}
.n24-entry h2{font-size:clamp(1.5rem,3vw,2.4rem);margin:44px 0 16px}
.n24-entry h3{font-size:1.25rem;margin:32px 0 12px}
.n24-entry a{text-decoration:underline;text-underline-offset:3px}
.n24-entry ul,.n24-entry ol{padding-left:20px}
.n24-entry li{margin-bottom:8px}
.n24-entry img{border-radius:2px;margin:28px 0}
.n24-entry table{width:100%;border-collapse:collapse;margin:26px 0}
.n24-entry th,.n24-entry td{border-bottom:1px solid var(--line);padding:12px 8px;text-align:left}
.n24-lead{font-size:clamp(1.15rem,2vw,1.5rem);color:var(--muted);max-width:44ch;margin-bottom:40px}

.n24-back{
	display:inline-block;margin-top:50px;font-size:.85rem;font-weight:600;
	letter-spacing:.06em;border-bottom:1px solid var(--line);padding-bottom:3px;
}
.n24-back:hover{border-color:var(--ink)}

.n24-btn{
	display:inline-block;border:1px solid var(--ink);padding:14px 26px;border-radius:999px;
	font-size:.86rem;font-weight:600;letter-spacing:.04em;transition:.25s;
}
.n24-btn:hover{background:var(--ink);color:var(--paper)}

/* ---------------- Hilfen ---------------- */

.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;background:var(--ink);color:var(--paper);padding:12px 20px;z-index:99}

.n24-reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.25,1)}
.n24-reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
	*{animation:none !important;transition:none !important}
	.n24-reveal{opacity:1;transform:none}
}

/* CG-Core-Bausteine in die ruhige Gestaltung einfügen */
.cg-contactcard{background:none;border:0;padding:0;border-radius:0}
.cg-table th,.cg-table td{border-color:var(--line)}
.cg-table thead th{background:none;border-bottom:1px solid var(--ink);color:var(--ink)}
.cg-statusbar{background:var(--ink)}