/* Kiste Speisekarte – Layout wie kistetrier.de/angebote
   Farben & Schriften lassen sich über die Variablen anpassen. */

.ks-menu {
	--ks-gold: #c59d5f;
	--ks-dark: #262526;
	--ks-text: #515150;
	--ks-dots: #b3b3b3;
	--ks-title-font: "Source Sans 3", "Source Sans Pro", sans-serif;
	--ks-text-font: "Cabin", sans-serif;
	--ks-gap: 80px;
	--ks-bg: #fff;          /* Hintergrundfarbe hinter der Karte */
	--ks-price-width: 100px; /* Platz für den Preis */

	width: 100%;
	min-width: 0;
	max-width: 1250px;
	margin: 0 auto;
	box-sizing: border-box;
}
.ks-menu *,
.ks-menu *::before,
.ks-menu *::after { box-sizing: border-box; }

/* Kategorie */
.ks-category + .ks-category { margin-top: 80px; }

.ks-category__title {
	margin: 0 0 24px;
	font-family: var(--ks-title-font);
	font-size: 32px;
	font-weight: 200;
	line-height: 1.3;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	color: var(--ks-dark);
}
.ks-category__intro {
	max-width: 760px;
	margin: 0 auto 40px;
	font-family: var(--ks-text-font);
	text-align: center;
	color: var(--ks-text);
}
.ks-category__intro p { margin: 0 0 .8em; }

/* Spalten */
.ks-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--ks-gap);
	margin-top: 40px;
}
.ks-menu--cols-2 .ks-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.ks-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Gericht */
.ks-item {
	position: relative;
	margin: 0 0 30px;
	padding: 0;
}
.ks-item:last-child { margin-bottom: 0; }

.ks-item__row {
	position: relative;
}
.ks-item__row.has-price { padding-right: var(--ks-price-width); }

.ks-item__title {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 0;
	font-family: var(--ks-title-font);
	font-size: 19px;
	font-weight: 200;
	line-height: 1.35;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ks-dark);
	overflow-wrap: break-word; /* lange Wörter dürfen umbrechen */
	-webkit-hyphens: auto;
	hyphens: auto;
}
/* Text deckt die Punktlinie ab -> Punkte beginnen direkt nach dem Namen */
.ks-item__title span {
	padding-right: 8px;
	background: var(--ks-bg);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.ks-item__dots {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: .4em;
	height: 3px;
	background-image: radial-gradient(circle closest-side, var(--ks-dots) 99%, transparent 100%);
	background-size: 6px 3px;
	background-repeat: repeat-x;
	background-position: left center;
}
.ks-item__price {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	padding-left: 8px;
	font-family: var(--ks-text-font);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	white-space: nowrap;
	color: var(--ks-text);
	background: var(--ks-bg);
}
.ks-item__desc {
	margin: 4px 0 0;
	font-family: var(--ks-text-font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ks-text);
}

/* Hervorgehobenes Gericht („Der Klassiker“) */
.ks-item--highlight {
	margin-top: 54px;
	margin-bottom: 40px;
	padding: 16px 18px;
	border: 2px solid var(--ks-gold);
}
.ks-list .ks-item--highlight:first-child { margin-top: 36px; }
.ks-item--highlight:last-child { margin-bottom: 0; }

.ks-item__label {
	position: absolute;
	left: -2px;
	bottom: 100%;
	margin-bottom: 2px;
	padding: 2px 18px;
	font-family: var(--ks-text-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .25em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	background: var(--ks-gold);
}

/* Handy & Tablet */
@media (max-width: 991px) {
	.ks-menu { --ks-gap: 40px; }
}
@media (max-width: 767px) {
	.ks-menu { --ks-price-width: 78px; }
	.ks-menu--cols-2 .ks-grid { grid-template-columns: minmax(0, 1fr); }
	.ks-item__title { letter-spacing: .06em; }
	.ks-list + .ks-list { margin-top: 30px; }
	.ks-category__title { font-size: 26px; }
	.ks-item__title,
	.ks-item__price { font-size: 17px; }
	.ks-item__desc { font-size: 15px; }
}