/* ==========================================================================
   Übersichtsseite Angebote (page-angebote.php)
   Farben je Angebot über .tone-0 … .tone-3 (--tone / --tone-dark aus main.css).
   ========================================================================== */

/* ---------- Seitenkopf ---------- */
.of-hero {
	padding-bottom: clamp(7rem, 11vw, 9rem);
	background:
		radial-gradient(40% 70% at 8% 100%, rgb(15 139 141 / .5), transparent 60%),
		radial-gradient(35% 60% at 38% 0%, rgb(255 107 53 / .35), transparent 60%),
		radial-gradient(40% 70% at 70% 100%, rgb(37 99 235 / .45), transparent 60%),
		radial-gradient(35% 70% at 100% 10%, rgb(217 70 143 / .45), transparent 60%),
		linear-gradient(150deg, var(--navy), var(--deep));
}
.of-hero .page-hero__title { font-size: clamp(2.8rem, 7vw, 5.5rem); }
.of-hero__lead { max-width: 38rem; margin: 1rem 0 0; font-size: 1.2rem; color: rgb(255 255 255 / .85); }

.of-jump { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.of-jump__item {
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .5rem 1.1rem .5rem .5rem;
	border-radius: 999px;
	background: rgb(255 255 255 / .1);
	border: 1px solid rgb(255 255 255 / .18);
	color: #fff; font-weight: 600; text-decoration: none;
	backdrop-filter: blur(8px);
	transition: background .2s, transform .2s var(--ease);
}
.of-jump__item:hover { color: #fff; background: var(--tone); transform: translateY(-2px); }
.of-jump__icon {
	display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
	background: var(--tone); color: #fff;
}
.of-jump__icon svg { width: 18px; height: 18px; }
@media (max-width: 480px) {
	.of-jump { display: grid; grid-template-columns: 1fr 1fr; }
	.of-jump__item { font-size: .9rem; }
}

/* ---------- Angebote ---------- */
.of-list { padding-top: clamp(1rem, 3vw, 2rem); }
.of-list__inner { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.of-item {
	scroll-margin-top: calc(var(--header-h) + 1rem);
	display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow-lg);
}
.of-item:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.of-item:nth-child(even) .of-item__visual { order: 2; }
@media (max-width: 820px) {
	.of-item, .of-item:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
	.of-item:nth-child(even) .of-item__visual { order: 0; }
}

.of-item__visual {
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; place-items: center;
	min-height: clamp(12rem, 28vw, 22rem);
	color: #fff; text-decoration: none;
	background:
		radial-gradient(60% 80% at 100% 0%, rgb(255 255 255 / .22), transparent 60%),
		linear-gradient(140deg, var(--tone), var(--tone-dark));
}
.of-item__visual::before, .of-item__visual::after {
	content: ""; position: absolute; z-index: -1; border-radius: 50%;
	border: 2px solid rgb(255 255 255 / .18);
}
.of-item__visual::before { width: 26rem; height: 26rem; left: -8rem; bottom: -14rem; }
.of-item__visual::after { width: 14rem; height: 14rem; right: -4rem; top: -5rem; background: rgb(255 255 255 / .06); }
.of-item__no {
	position: absolute; left: clamp(1.25rem, 3vw, 2rem); top: clamp(1rem, 2.5vw, 1.5rem);
	font: 800 clamp(3rem, 7vw, 5rem)/1 var(--font-head); letter-spacing: -.04em;
	color: rgb(255 255 255 / .22);
}
.of-item__icon {
	display: grid; place-items: center;
	width: clamp(6rem, 12vw, 9rem); height: clamp(6rem, 12vw, 9rem);
	border-radius: 32%;
	background: rgb(255 255 255 / .16);
	border: 1px solid rgb(255 255 255 / .3);
	backdrop-filter: blur(6px);
	transition: transform .5s var(--ease);
}
.of-item__icon svg { width: 55%; height: 55%; stroke-width: 1.6; }
.of-item:hover .of-item__icon { transform: rotate(-6deg) scale(1.06); }
.of-item__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .35; mix-blend-mode: luminosity; }

.of-item__body { padding: clamp(1.5rem, 4vw, 3rem); align-self: center; }
.of-item__title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: .6rem; }
.of-item__title::after {
	content: ""; display: block; width: 3rem; height: 4px; margin-top: .7rem;
	border-radius: 4px; background: var(--tone);
}
.of-item__text { margin: 0 0 1.25rem; font-size: 1.1rem; color: var(--muted); }
.of-item__points { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: .55rem; }
.of-item__points li { position: relative; padding-left: 2rem; font-weight: 600; line-height: 1.4; }
.of-item__points li::before {
	content: ""; position: absolute; left: 0; top: .05rem;
	width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--tone);
}
.of-item__points li::after {
	content: ""; position: absolute; left: .34rem; top: .38rem;
	width: .62rem; height: .34rem;
	border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
	transform: rotate(-45deg);
}
.of-item__btn { --_bg: var(--tone); }
.of-item__btn:hover { --_bg: var(--tone-dark); box-shadow: 0 12px 28px color-mix(in srgb, var(--tone) 40%, transparent); }
.of-item__btn svg { transition: transform .2s var(--ease); }
.of-item__btn:hover svg { transform: translateX(4px); }

/* ---------- Was passt zu dir? ---------- */
.of-match { background: var(--soft); }
.of-match__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1000px) { .of-match__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .of-match__grid { grid-template-columns: minmax(0, 1fr); } }
.of-match__card {
	display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
	padding: 1.6rem;
	border-radius: var(--radius);
	background: #fff;
	border-top: 4px solid var(--tone);
	box-shadow: var(--shadow);
	color: var(--ink); text-decoration: none;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.of-match__card:hover { color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.of-match__wish { font: 600 1.15rem/1.4 var(--font-head); }
.of-match__answer { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--tone); }
.of-match__answer svg:first-child { width: 22px; height: 22px; }

/* ---------- Schnuppern ---------- */
.of-cta__card {
	display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap;
	padding: clamp(1.75rem, 5vw, 3.5rem);
	border-radius: var(--radius-lg);
	color: #fff;
	background:
		radial-gradient(50% 90% at 100% 0%, rgb(255 107 53 / .45), transparent 60%),
		radial-gradient(45% 80% at 0% 100%, rgb(15 139 141 / .55), transparent 60%),
		var(--deep);
}
.of-cta__card > div:first-child { max-width: 38rem; }
.of-cta__card h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: .5rem; }
.of-cta__card p:not(.kicker) { margin: 0; color: rgb(255 255 255 / .82); }
.of-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 480px) { .of-cta__actions .btn { width: 100%; } }