/* ==========================================================
   PetrolPress
   11 – Sections
   Wiederverwendbare Inhaltsbereiche
========================================================== */

.section{
position:relative;
padding-block:clamp(4rem,8vw,7rem);
overflow:hidden;
}

.section-sm{padding-block:clamp(2.5rem,5vw,4rem);}
.section-lg{padding-block:clamp(6rem,10vw,9rem);}

.section-alt{
background:var(--color-background-soft);
}

.section-dark{
color:var(--color-white);
background:linear-gradient(135deg,var(--color-primary-deep),var(--color-primary));
}

.section-glass{
background:var(--glass-background-medium);
backdrop-filter:var(--glass-blur-large);
-webkit-backdrop-filter:var(--glass-blur-large);
}

.section-header{
max-width:760px;
margin:0 auto var(--space-8);
text-align:center;
}

.section-eyebrow{
display:inline-block;
margin-bottom:var(--space-3);
font-size:var(--font-size-xs);
font-weight:var(--font-weight-bold);
letter-spacing:var(--letter-spacing-wide);
text-transform:uppercase;
color:var(--color-primary);
}

.section-title{
margin-bottom:var(--space-4);
font-size:clamp(2rem,5vw,3.5rem);
line-height:1.05;
text-wrap:balance;
}

.section-intro{
max-width:62ch;
margin-inline:auto;
color:var(--color-text-muted);
font-size:var(--font-size-lg);
}

.section-actions{
display:flex;
justify-content:center;
gap:var(--space-3);
margin-top:var(--space-7);
flex-wrap:wrap;
}

.section-divider{
height:1px;
background:linear-gradient(90deg,transparent,var(--color-border-strong),transparent);
margin:0;
border:0;
}

.section-watercolor::before{
content:"";
position:absolute;
top:-5rem;
right:-4rem;
width:18rem;
height:18rem;
background:var(--watercolor-teal);
opacity:var(--watercolor-opacity-light);
border-radius:50% 50% 42% 58%/45% 55% 45% 55%;
filter:blur(6px);
z-index:var(--z-background);
}

.section-watercolor::after{
content:"";
position:absolute;
left:-5rem;
bottom:-5rem;
width:20rem;
height:20rem;
background:var(--watercolor-petrol);
opacity:var(--watercolor-opacity-light);
border-radius:45% 55% 55% 45%;
filter:blur(8px);
z-index:var(--z-background);
}

.section > .container{
position:relative;
z-index:var(--z-base);
}

@media (max-width:782px){
.section{padding-block:3.5rem;}
.section-actions{
flex-direction:column;
align-items:stretch;
}
.section-actions .btn{
width:100%;
}
}

/* ==========================================================
   BLOG & ARCHIVE FOUNDATION
========================================================== */

.archive-hero {
	position: relative;
	padding-block: clamp(3.5rem, 7vw, 6rem);
	background:
		radial-gradient(circle at 88% 18%, rgba(27, 179, 173, 0.13), transparent 30%),
		linear-gradient(180deg, var(--color-background-soft), var(--color-white));
	border-bottom: 1px solid var(--color-border);
	overflow: hidden;
}

.archive-hero-content {
	max-width: min(100%, var(--pp-content-width, 760px));
}

.archive-hero-title {
	margin: 0;
	font-size: clamp(2.4rem, 6vw, 4.75rem);
	line-height: 1.04;
	text-wrap: balance;
}

.archive-description {
	margin-top: var(--space-5);
	margin-inline: 0;
}

.archive-description > :last-child {
	margin-bottom: 0;
}

.archive-breadcrumbs {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

.archive-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.archive-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.archive-breadcrumbs__item:not(:last-child)::after {
	content: "/";
	color: var(--color-border-strong);
}

.archive-breadcrumbs a {
	color: var(--color-text-muted);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
}

.archive-breadcrumbs a:hover {
	color: var(--color-primary);
}

.archive-breadcrumbs a:focus-visible {
	border-radius: var(--radius-xs);
	outline: 3px solid var(--color-primary-soft);
	outline-offset: 3px;
}

.archive-layout__main {
	min-width: 0;
}

.archive-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-7);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.archive-toolbar__count {
	margin: 0;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-muted);
}

.archive-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.archive-grid--2-columns {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.archive-pagination {
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.archive-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.6rem 0.85rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	color: var(--color-heading);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
}

.archive-pagination a.page-numbers:hover {
	color: var(--color-primary-deep);
	border-color: var(--color-primary);
	box-shadow: var(--shadow-sm);
}

.archive-pagination .page-numbers.current {
	color: var(--color-white);
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.archive-pagination a.page-numbers:focus-visible {
	outline: 3px solid var(--color-primary-soft);
	outline-offset: 3px;
}

/* ==========================================================
   PREMIUM ARCHIVE TOOLBAR
========================================================== */

.archive-toolbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1rem, 2.5vw, 2rem);
	margin-bottom: var(--space-7);
	padding: clamp(1rem, 2vw, 1.35rem);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
}

.archive-toolbar__results {
	flex: 0 0 auto;
}

.archive-toolbar__count {
	margin: 0;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-muted);
}

.archive-toolbar__controls {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: var(--space-3);
	min-width: 0;
}

.archive-toolbar__form {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: var(--space-3);
	min-width: 0;
}

.archive-toolbar__sort,
.archive-toolbar__layout {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.archive-toolbar__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
	color: var(--color-text-muted);
}

.archive-toolbar__select,
.archive-toolbar__submit {
	min-height: 44px;
}

.archive-toolbar__select {
	width: min(100%, 15rem);
	min-width: 12rem;
	padding: 0.65rem 2.4rem 0.65rem 0.85rem;
	color: var(--color-heading);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.archive-toolbar__layout-options {
	display: flex;
	align-items: stretch;
	gap: 0.25rem;
}

.archive-toolbar__layout-option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 44px;
	padding: 0.55rem 0.75rem;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-muted);
	background: var(--color-surface, #f7faf9);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.archive-toolbar__layout-option.is-active {
	color: var(--color-primary-deep);
	background: var(--color-primary-soft);
	border-color: var(--color-primary);
}

.archive-toolbar__layout-option.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.archive-toolbar__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1rem;
	font-weight: var(--font-weight-semibold);
	color: var(--color-white);
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-md);
	cursor: pointer;
}

.archive-toolbar__submit:hover {
	background: var(--color-primary-deep);
	border-color: var(--color-primary-deep);
}

.archive-toolbar__select:focus-visible,
.archive-toolbar__submit:focus-visible {
	outline: 3px solid var(--color-primary-soft);
	outline-offset: 3px;
}

.archive-toolbar__filters:empty {
	display: none;
}