/*CSS Reset*/

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Increase line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* 11. Smoothly animate all <details>/<summary> elements when opening/closing */
summary {
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  details::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.3s ease, content-visibility 0.3s ease allow-discrete;
  }

  details[open]::details-content {
    height: auto;
  }
}

/*fonts*/

@font-face {
    font-family: 'Calibri Light';
    font-style: normal;
    font-weight: normal;
    src: local('Calibri Light'), url('calibril.woff') format('woff');
}

/* Used only by third-party embeds (e.g. the mein-intra.net booking widget) that render
   icons via class="material-icons" (not "-outlined"). Kept separate from
   icons/material-icons/material-icons.css, which also redefines ".material-icons-outlined"
   with a different font file and would conflict with the site's Material Symbols Outlined
   icons used everywhere else. */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../icons/material-icons/material-icons.woff2') format('woff2'),
         url('../icons/material-icons/material-icons.woff') format('woff');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga";
}

:root {

/******
Farben
******/

  /* Grundfarben */
  --color-primary-blue: hsl(196 44% 20%);      /* #1d3f4b */
  --color-primary-green: hsl(163 69% 23%);     /* #12614a */
  --color-primary-yellow: hsl(48 99% 50%);     /* #fecc01 */

  --color-white: hsl(0, 0%, 100%);  
  --color-black: hsl(0, 0%, 0%);  

  /* Grundfarben – Abstufungen */
  --color-primary-blue-light: hsl(196 44% 32%);
  --color-primary-blue-dark: hsl(196 44% 14%);

  --color-primary-green-light: hsl(163 69% 35%);
  --color-primary-green-lightest: hsl(163 69% 90%);
  --color-primary-green-dark: hsl(163 69% 16%);

  --color-primary-yellow-light: hsl(48 99% 62%);
  --color-primary-yellow-dark: hsl(48 99% 40%);

  /* Bereichsfarben */
  --color-freibad: hsl(209 100% 32%);          /* #0056a4 */
  --color-freibad-light: hsl(206 65% 64%);     /* #69acdf */

  --color-kita: hsl(344 79% 55%);              /* #e73363 */
  --color-kita-light: hsl(354 78% 81%);        /* #f4a7af */

  --color-camping: hsl(115 42% 48%);           /* #4faf47 */
  --color-camping-light: hsl(100 38% 75%);     /* #b6d7a5 */

  --color-buecherei: hsl(13 83% 59%);          /* #ed6842 */
  --color-buecherei-light: hsl(19 85% 79%);    /* #f7b99c */

  --color-bauhof: hsl(161 32% 39%);            /* #44836f */
  --color-bauhof-light: hsl(167 25% 68%);      /* #9ac3ba */


  --container: 80rem;
  --gutter: 1.5rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999rem;

  --shadow-leaf: 0 10px 30px -5px rgb(45 90 39 / 0.08);
  --shadow-header: 0 2px 8px rgb(45 90 39 / 0.08);

  --fw-regular: 400;
  --fw-semi-bold: 500;
  --fw-bold: 700;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.3125rem;
  --fs-2xl: 1.7rem;
  --fs-3xl: 2.652rem;
  --fs-4xl: 4rem;

  --space-xxs: 0.25rem;   /* Extra Extra Small */
  --space-xs: 0.5rem;     /* Extra Small */
  --space-sm: 0.75rem;    /* Small */
  --space-md: 1rem;       /* Medium / Base spacing */
  --space-lg: 1.5rem;     /* Large */
  --space-xl: 2rem;       /* Extra Large */
  --space-2xl: 3rem;      /* 2X Large */
  --space-3xl: 4rem;      /* 3X Large */
  --space-4xl: 6rem;      /* 4X Large */
}

html {scroll-behavior: smooth;}

body {
  min-height: 100vh;
  font-family: "Calibri Light", Calibri, Arial, sans-serif;
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: var(--color-primary-green);
  background: var(--color-white);
}

section{margin-bottom: var(--space-xl);}

.page__title {font-size: 0;}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--color-primary-green-light);
  font-weight: var(--fw-bold);
  transition: all 160ms ease;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-md);
  color: var(--color-white);
  background: var(--color-primary-blue);
  border-radius: var(--radius-sm);
  transform: translateY(calc(-100% - var(--space-lg)));
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--color-primary-yellow);
  outline-offset: 3px;
}

/* =========================
   Header / Navigation
========================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-white);
	box-shadow: var(--shadow-header);
	transition: box-shadow 200ms ease;
}

.site-header__inner {
    display: grid;
    align-items: center;
    gap: var(--space-xl);
    padding-block: var(--space-sm);
    grid-template-columns: 1fr auto 1fr;
    transition: padding-block 200ms ease;
	max-width: 95%;
    margin-inline: auto;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	justify-self: start;
	text-decoration: none;
}

.site-logo__image {
	display: block;
	width: auto;
	height: clamp(3.5rem, 7vw, 5.5rem);
	object-fit: contain;
	transition: height 200ms ease;
}

/* Verkleinerter Header beim Scrollen (Desktop) */

.site-header.is-scrolled .site-header__inner {
	padding-block: var(--space-xs);
}

.site-header.is-scrolled .site-logo__image {
	height: 2.75rem;
}

/* Desktop Nav */

.site-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	justify-self: center;
	flex: 1 1 auto;
	min-width: 0;
}

.site-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__item {
	position: relative;
	padding: 0;
	list-style: none;
}

.site-nav__link {
	display: inline-flex;
	align-items: center;
	padding: var(--space-xs) var(--space-sm);
	color: var(--color-primary-green-light);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-decoration: none;
	border-radius: var(--radius-pill);
	white-space: nowrap;
	transition:
		color 160ms ease,
		background-color 160ms ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link.is-active {
	color: var(--color-primary-green);
	background: hsl(163 69% 23% / 0.08);
}

.site-nav__link:focus-visible {
	outline: 3px solid var(--color-primary-yellow);
	outline-offset: 4px;
}

/* Desktop Subnav */

.site-nav__sublist {
	position: absolute;
	top: calc(100% + 0.45rem);
	left: 0;
	z-index: 120;
	min-width: 14rem;
	max-height: calc(100vh - 8rem);
	margin: 0;
	padding: var(--space-xs);
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	background: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: 0 1rem 2rem hsl(196 44% 14% / 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition:
		opacity 160ms ease,
		visibility 160ms ease,
		transform 160ms ease;
}

/* Unsichtbarer Steg ueber die Luecke zwischen Link und Untermenue, damit der
   Hover beim Rueberfahren nicht kurz abreisst und das Menue vorzeitig schliesst. */
.site-nav__sublist::before {
	content: "";
	position: absolute;
	top: -0.45rem;
	left: 0;
	right: 0;
	height: 0.45rem;
}

.site-nav__item:hover > .site-nav__sublist,
.site-nav__item:focus-within > .site-nav__sublist {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.site-nav__subitem {
	margin: 0;
	list-style: none;
}

.site-nav__sublink {
	display: block;
	width: 100%;
	padding: 0.65rem 0.8rem;
	color: var(--color-primary-blue);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	line-height: 1.25;
	text-decoration: none;
	border-radius: var(--radius-sm);
	white-space: nowrap;
	transition:
		color 160ms ease,
		background-color 160ms ease;
}

.site-nav__sublink:hover,
.site-nav__sublink:focus-visible,
.site-nav__sublink.is-active {
	color: var(--color-primary-green);
	background: hsl(196 44% 20% / 0.08);
}

.site-nav__sublink:focus-visible {
	outline: 3px solid var(--color-primary-yellow);
	outline-offset: 3px;
}

/* Hamburger Button */

.site-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 0.28rem;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: var(--color-primary-green);
	background: transparent;
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition:
		color 160ms ease,
		background-color 160ms ease;
}

.site-menu-toggle:hover,
.site-menu-toggle:focus-visible {
	color: var(--color-primary-green-light);
	background: hsl(163 69% 23% / 0.08);
}

.site-menu-toggle:focus-visible {
	outline: 3px solid var(--color-primary-yellow);
	outline-offset: 4px;
}

.site-menu-toggle__line {
	display: block;
	width: 1.35rem;
	height: 0.125rem;
	background: currentColor;
	border-radius: var(--radius-pill);
	transition:
		transform 180ms ease,
		opacity 180ms ease;
}

.site-menu-toggle.is-open .site-menu-toggle__line:nth-child(1) {
	transform: translateY(0.405rem) rotate(45deg);
}

.site-menu-toggle.is-open .site-menu-toggle__line:nth-child(2) {
	opacity: 0;
}

.site-menu-toggle.is-open .site-menu-toggle__line:nth-child(3) {
	transform: translateY(-0.405rem) rotate(-45deg);
}

/* Kontakt-Icons + Search Button im Header */

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	justify-self: end;
}

.header-contact-link,
.search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--color-primary-green);
	background: transparent;
	border: 0;
	border-radius: 999rem;
	cursor: pointer;
	transition:
		color 160ms ease,
		background-color 160ms ease;
}

.header-contact-link:hover,
.header-contact-link:focus-visible,
.search-toggle:hover,
.search-toggle:focus-visible {
	color: var(--color-primary-green-light);
	background: hsl(163 69% 23% / 0.08);
}

.header-contact-link:focus-visible,
.search-toggle:focus-visible {
	outline: 3px solid var(--color-primary-yellow);
	outline-offset: 4px;
}

.header-contact-link .material-icons-outlined,
.search-toggle .material-icons-outlined {
	font-size: 1.65rem;
}

@media (max-width: 30rem) {
	/* Auf sehr kleinen Screens bleibt nur "Anrufen" sichtbar (hoechster Nutzen unterwegs) */
	.header-contact-link[href^="mailto:"] {
		display: none;
	}
}

/* =========================
   Mobile Header
========================= */

@media (max-width: 64rem) {
	body.is-menu-open {
		overflow: hidden;
	}

	.site-header__inner {
		gap: var(--space-sm);
		width: min(100% - 1rem, var(--container));
		padding-block: var(--space-xs);
		grid-template-columns: 1fr 1fr;
	}

	.site-header.is-menu-open {
		position: fixed;
		inset: 0;
		overflow: hidden;
	}

	.site-header.is-menu-open .site-header__inner {
		grid-template-columns: 1fr auto;
		grid-template-rows: auto minmax(0, 1fr);
		align-content: start;
		height: 100vh;
		overflow: hidden;
	}

	@supports (height: 100dvh) {
		.site-header.is-menu-open .site-header__inner {
			height: 100dvh;
		}
	}

	.site-logo__image {
		height: 4.25rem;
	}

	.site-header.is-menu-open .site-logo__image {
		height: 3.5rem;
	}

	.site-menu-toggle {
		display: inline-flex;
	}

	.site-header.is-menu-open .header-contact-link,
	.site-header.is-menu-open .search-toggle {
		display: none;
	}

	.site-header.is-menu-open .site-header__actions {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		justify-self: end;
	}

	.site-nav {
		grid-column: 1 / -1;
		display: none;
		width: 100%;
		padding-block: var(--space-sm);
		border-top: 1px solid hsl(196 44% 20% / 0.1);
	}

	.site-header.is-menu-open .site-nav {
		grid-column: 1 / -1;
		grid-row: 2;
		display: block;
		min-height: 0;
		height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.site-nav__list {
		display: grid;
		justify-content: stretch;
		gap: var(--space-xs);
		width: 100%;
	}

	.site-nav__item {
		position: static;
		width: 100%;
	}

	.site-nav__link {
		display: flex;
		width: 100%;
		padding: var(--space-sm) var(--space-md);
		font-size: var(--fs-md);
		letter-spacing: 0.05em;
		border-radius: var(--radius-md);
		white-space: normal;
	}

	.site-nav__sublist {
		position: static;
		min-width: 0;
		margin: 0 0 var(--space-xs);
		padding: 0 0 0 var(--space-md);
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav__sublink {
		padding: var(--space-xs) var(--space-md);
		font-size: var(--fs-sm);
		background: hsl(196 44% 20% / 0.04);
		border-radius: var(--radius-sm);
		white-space: normal;
	}
}

/* Sehr kleine Screens */

@media (max-width: 36rem) {
	.site-header__inner {
		gap: var(--space-xs);
	}

	.site-logo__image {
		height: 3.5rem;
	}

	.site-menu-toggle,
	.header-contact-link,
	.search-toggle {
		width: 2.5rem;
		height: 2.5rem;
	}

	.site-menu-toggle__line {
		width: 1.2rem;
	}

	.site-nav__link {
		padding: var(--space-sm);
		font-size: var(--fs-sm);
	}

	.site-nav__sublist {
		padding-left: var(--space-sm);
	}
}

/*breadcrumbs*/

nav.breadcrumbs {
    padding-inline: var(--gutter);
    padding-block: var(--space-sm);
    overflow: hidden;
}

nav.breadcrumbs > ol {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    overflow: hidden;
}

li.breadcrumbs__item {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 14rem;
}

/* Current page is the most relevant crumb and usually the longest (e.g. full notice title) - give it more room */
li.breadcrumbs__item:last-child {
    flex-shrink: 1;
    max-width: 24rem;
}

a.breadcrumbs__link {
    display: block;
    overflow: hidden;
    min-width: 0;
    font-weight: var(--fw-regular);
    font-size: var(--fs-sm);
    white-space: nowrap;
    text-overflow: ellipsis;
}

li.breadcrumbs__item::after {content: '>'; flex: 0 0 auto;}

li.breadcrumbs__item:last-child::after {display: none;}

/* Mobile: collapse everything between "Startseite" and the current page to keep the trail scannable */
@media (max-width: 40rem) {
    li.breadcrumbs__item {
        max-width: 8rem;
    }

    li.breadcrumbs__item:last-child {
        max-width: 14rem;
    }

    li.breadcrumbs__item:not(:first-child):not(:last-child) {
        display: none;
    }

    li.breadcrumbs__item:first-child:not(:last-child)::after {
        content: '…';
    }
}

/*Hero*/


.hero {
  position: relative;
  min-height: 46.9375rem;
  overflow: hidden;
  color: var(--color-white);
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(21 66 18 / 0.6), transparent 65%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
  padding-bottom: var(--space-xl);
}

.hero__content {
  max-width: 42rem;
}

.hero__title {
  margin-bottom: var(--space-md);
  font-size: clamp(3rem, 7vw, 3.75rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hero__text {
  max-width: 38rem;
  margin-bottom: var(--space-lg);
  font-size: 1.125rem;
  color: rgb(255 255 255 / 0.9);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.5rem;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: transform 160ms ease, background-color 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button--primary {
  color: var(--color-white);
  background: var(--color-primary-green);
}

.button--primary:hover {
  color: var(--color-white);
  background: var(--color-primary-green-light);
}

.button--secondary {
    color: var(--color-black);
    background: var(--color-primary-yellow);
}

.button--secondary:hover {
  background: var(--color-primary-yellow-light);
}

.button--input-height {
  min-height: 3rem;
  padding-block: 0.7rem;
}


/*search*/

/* =========================
   SearchEngine Form + Results
========================= */

.home-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-2xl);
  text-align: center;
}

.home-search__title {
  margin-bottom: var(--space-sm);
  color: var(--color-primary-blue);
}

.search-form {
  display: grid;
  gap: var(--space-sm);
  width: 100%;
  max-width: 42rem;
  margin-bottom: var(--space-4xl);
}

.search-form__label {
  font-size: 0;
  font-weight: var(--fw-semi-bold);
  color: var(--color-primary-green);

}

.search-form__input {
  width: 100%;
  padding: 0.95rem 1rem;
  font: inherit;
  font-size: var(--fs-md);
  color: var(--color-primary-blue);
  background: var(--color-white);
  border: 2px solid hsl(196 18% 82%);
  border-radius: 0.75rem;
  box-shadow: 0 0.35rem 1rem hsl(196 44% 14% / 0.04);
}

.search-form__input::placeholder {
  color: hsl(196 12% 48%);
}

.search-form__input:hover {
  border-color: var(--color-primary-green-light);
}

.search-form__input:focus {
  outline: none;
  border-color: var(--color-primary-yellow);
  box-shadow: 0 0 0 4px hsl(48 99% 50% / 0.22);
}

.search-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  height: 3.65rem;
  padding-inline: var(--space-lg);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-primary-blue);
  background: var(--color-primary-yellow);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 0.35rem 1rem hsl(196 44% 14% / 0.12);
}

.search-form__submit:hover {
  background: var(--color-primary-yellow-light);
}

.search-form__submit:focus-visible {
  outline: 3px solid var(--color-primary-yellow);
  outline-offset: 4px;
}

.search-form__submit:active {
  transform: translateY(1px);
}


/* Inline layout on wider screens */
@media (min-width: 40rem) {
  .search-form {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .search-form__label {
    grid-column: 1 / -1;
  }

  .search-form__submit {
    min-height: 3.45rem;
  }
}


/* =========================
   SearchEngine Results
========================= */

#se-results {
  width: 100%;
  max-width: 52rem;
  margin-block: var(--space-xl) var(--space-3xl);
  padding: var(--space-xl);
  color: var(--color-primary-blue);
  background: var(--color-white);
  border: 1px solid hsl(196 18% 86%);
  border-radius: 1rem;
  box-shadow: 0 0.75rem 2rem hsl(196 44% 14% / 0.08);
}

.search-results__heading {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-2xl);
  line-height: 1.15;
  color: var(--color-primary-blue);
}

.search-results__summary {
  font-size: var(--fs-md);
  color: hsl(196 20% 34%);
}


/* Falls SearchEngine Ergebnislisten rendert */
#se-results ul,
.search-results__list {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding: 0;
  list-style: none;
}

#se-results li {
  padding-block: var(--space-md);
  border-top: 1px solid hsl(196 18% 88%);
}

#se-results li:first-child {
  border-top: 0;
}

#se-results a {
  font-weight: var(--fw-bold);
  color: var(--color-primary-green);
  text-decoration: none;
}

#se-results a:hover {
  color: var(--color-primary-blue);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

/* SearchEngine result tabs (group_by => 'template') */
#se-results .pwse-tabs__tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid hsl(196 18% 88%);
}

#se-results .pwse-tabs__tablist-item {
  margin: 0;
  padding-block: 0;
  border-top: 0;
}

#se-results .pwse-tabs__tab {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  font-weight: var(--fw-semi-bold);
  font-size: var(--fs-sm);
  color: hsl(196 20% 34%);
  background: transparent;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  text-decoration: none;
}

#se-results .pwse-tabs__tab:hover {
  color: var(--color-primary-blue);
  text-decoration: none;
  background: hsl(196 18% 95%);
}

#se-results .pwse-tabs__tab[aria-selected="true"] {
  color: var(--color-white);
  background: var(--color-primary-green);
}

.search-results-pager {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid hsl(196 18% 88%);
}

#se-results .search-results-pager__list,
.search-results-pager__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
  border: 0;
  overflow: visible;
}

#se-results .search-results-pager__list-item,
.search-results-pager__list-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border: 0;
}

#se-results .search-results-pager__item,
#se-results .search-results-pager__separator,
.search-results-pager__item,
.search-results-pager__separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.75rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-primary-green);
  text-decoration: none;
  background: var(--color-white);
  border: 1px solid hsl(163 69% 23% / 0.12);
  border-radius: var(--radius-pill);
}

#se-results .search-results-pager__item:hover,
#se-results .search-results-pager__item:focus-visible,
.search-results-pager__item:hover,
.search-results-pager__item:focus-visible {
  color: var(--color-primary-blue);
  text-decoration: none;
  background: hsl(163 69% 23% / 0.08);
}

#se-results .search-results-pager__item--current,
#se-results .search-results-pager__item--current:hover,
#se-results .search-results-pager__item--current:focus-visible,
.search-results-pager__item--current,
.search-results-pager__item--current:hover,
.search-results-pager__item--current:focus-visible {
  color: var(--color-white);
  background: var(--color-primary-green);
  border-color: var(--color-primary-green);
}

#se-results .search-results-pager__separator,
.search-results-pager__separator {
  color: hsl(196 18% 42%);
  background: hsl(196 18% 94%);
  border-color: transparent;
}

.search-overlay .search-results-pager__list {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  padding-bottom: var(--space-xs);
}

.search-overlay .search-results-pager__list-item {
  flex: 0 0 auto;
}

@media (max-width: 36rem) {
  .search-results-pager__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-xs);
  }
}


.search-toggle:hover {
	color: var(--color-primary-green-light);
}

.search-toggle:focus-visible {
	outline: 3px solid var(--color-primary-yellow);
	outline-offset: 4px;
}

.search-overlay[hidden] {
	display: none;
}

.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: start center;
	padding: clamp(1rem, 5vw, 3rem);
}

.search-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: hsl(196 44% 14% / 0.72);
	backdrop-filter: blur(0.25rem);
}

.search-overlay__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(100%, 44rem);
	max-height: calc(100vh - clamp(2rem, 10vw, 6rem));
	overflow: hidden;
	padding: var(--space-lg);
	color: var(--color-primary-blue);
	background: var(--color-white);
	border-radius: 1rem;
	box-shadow: 0 1.5rem 4rem hsl(196 44% 14% / 0.35);
}

@supports (height: 100dvh) {
	.search-overlay__dialog {
		max-height: calc(100dvh - clamp(2rem, 10vw, 6rem));
	}
}

.search-overlay__header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

.search-overlay .search-form {
	flex: 0 0 auto;
	max-width: none;
	margin-block: 0 var(--space-lg);
}

.search-overlay #se-results {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	max-width: none;
	margin-block: 0;
	overflow: hidden;
}

.search-overlay #se-results > .search-results__heading,
.search-overlay #se-results > .search-results__summary,
.search-overlay #se-results > .search-results-pager {
	flex: 0 0 auto;
}

.search-overlay #se-results > .search-results__list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
	padding-right: var(--space-sm);
}

/* Tabs (group_by => 'template') add an extra .pwse-tabs > .pwse-tabpanel wrapper
   around .search-results__summary/.search-results__list/.search-results-pager, so
   the flex chain above has to be repeated one level deeper for those elements. */
.search-overlay #se-results > .pwse-tabs {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.search-overlay #se-results .pwse-tabs__tabpanel:empty {
	display: none;
}

.search-overlay #se-results .pwse-tabs__tabpanel {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.search-overlay #se-results .pwse-tabs__tabpanel > .search-results__summary,
.search-overlay #se-results .pwse-tabs__tabpanel > .search-results-pager {
	flex: 0 0 auto;
}

.search-overlay #se-results .pwse-tabs__tabpanel > .search-results__list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
	padding-right: var(--space-sm);
}

.search-overlay__title {
	font-size: var(--fs-2xl);
	line-height: 1.1;
	color: var(--color-primary-blue);
}

.search-overlay__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--color-primary-blue);
	background: var(--color-white);
	border: 0;
	border-radius: 999rem;
	cursor: pointer;
}

.search-overlay__close:hover {
	color: var(--color-white);
	background: var(--color-primary-blue);
}

/*Quicklinks*/

.quick-access {
      position: relative;
      z-index: 10;
      margin-top: -4rem;
    }

    .quick-access__grid {
      display: grid;
      grid-template-columns: repeat( auto-fill, minmax(min(250px, 100%), 1fr) );
      gap: var(--space-md);
    }

    .quick-card {
      padding: 2rem;
      text-align: center;
      color: var(--color-primary-green);
      background: var(--color-white);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-leaf);
      cursor: pointer;
      transition: background-color 160ms ease, transform 160ms ease;
    }

    .quick-card:hover {
      transform: translateY(-5px);
    }

    .quick-card__icon {
      display: grid;
      place-items: center;
      width: 4rem;
      height: 4rem;
      margin-inline: auto;
      margin-bottom: 1rem;
      background: var(--color-primary-green-lightest);
      border-radius: var(--radius-pill);
      transition: background-color 160ms ease;
      color: var(--color-primary-green-dark);
    }

    .quick-card:hover .quick-card__title {
      color: var(--color-primary-green-dark);
    }

    .quick-card__icon .material-symbols-outlined {
      font-size: 2rem;
    }

    .quick-card__title {
      font-size: var(--fs-md);
      font-weight: 600;
      letter-spacing: 0.05em;
      color: var(--color-primary-green);
    }


/*News*/

header.news-preview__header {margin-bottom: var(--space-md);}


.news-filters {
	display:flex;
	gap:var(--space-xs);
	overflow-x:auto;
	padding-bottom:var(--space-md);
	margin-bottom:var(--space-lg);
	scrollbar-width:none;
}


.news-filters::-webkit-scrollbar {
	display:none;
}


.news-filter {
	flex:0 0 auto;
	padding:.5rem 1.5rem;
	font-size:.875rem;
	font-weight:600;
	letter-spacing:.05em;
	color:var(--color-primary-blue);
	background:hsl(196 35% 96%);
	border:0;
	border-radius:var(--radius-pill);
	white-space:nowrap;
	transition:background-color .18s ease,color .18s ease;
}


.news-filter:hover,.news-filter.is-active {
	color:var(--color-primary-green-dark);
	background:var(--color-primary-green-lightest);
}


.news-grid {
	display:grid;
	grid-template-columns:1fr;
	gap:var(--space-md);
}


.news-card {
	background:var(--color-white);
	border:1px solid rgb(16 185 129 / .12);
	border-radius:var(--radius-xl);
	box-shadow:var(--shadow-leaf);
	transition:transform .22s ease,box-shadow .22s ease;
}


.news-card:hover {
	transform:translateY(-.25rem);
	box-shadow:0 18px 40px -10px rgb(45 90 39 / .12);
}


.news-card__media {
    position: relative;
    height: 16rem;
    overflow: hidden;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}


.news-card__image {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .5s ease;
}

.news-card__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-primary-green-dark);
  background:
    radial-gradient(circle at top left, hsl(48 99% 62% / 0.35), transparent 34%),
    linear-gradient(135deg, hsl(163 69% 90%), hsl(196 44% 92%));
}

.news-card__placeholder span {
  font-size: 3.25rem;
}


.news-card:hover .news-card__image {
	transform:scale(1.1);
}

a.news-card__link {
    color: inherit;
    font-weight: var(--fw-regular);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.news-card__date {
	position:absolute;
	top:1rem;
	left:1rem;
	padding:.5rem 1rem;
	text-align:center;
	background:rgb(255 255 255 / .9);
	border-radius:var(--radius-lg);
	box-shadow:0 1px 3px rgb(0 0 0 / .1);
	backdrop-filter:blur(.25rem);
}


.news-card__day {
	display:block;
	font-size:2rem;
	font-weight:600;
	line-height:1;
	color:var(--color-primary-blue);
}


.news-card__month {
	display:inline-block;
	font-size:.75rem;
	font-weight:600;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:hsl(196 20% 34%);
}


.news-card__year {
	display:inline-block;
	font-size:.75rem;
	font-weight:600;
	color:hsl(196 20% 34%);
}


.news-card__tag {
	position:absolute;
	top:1rem;
	right:1rem;
	padding:.25rem .75rem;
	font-size:.75rem;
	font-weight:600;
	letter-spacing:.05em;
	color:var(--color-primary-green-dark);
	background:var(--color-primary-green-lightest);
	border-radius:var(--radius-pill);
}


.news-card__tag--secondary {
	color:var(--color-primary-blue-dark);
	background:hsl(196 35% 96%);
}


.news-card__tag--tertiary {
	color:var(--color-black);
	background:var(--color-primary-yellow-light);
}


.news-card__body {
	display:flex;
	flex:1;
	flex-direction:column;
	padding:var(--space-md);
}


.news-card__title {
	margin-bottom:var(--space-xs);
  font-size: var(--fs-xl);
	font-weight:600;
	line-height:1.3;
	color:var(--color-primary-blue);
}


.news-card__description {
	display:-webkit-box;
	margin-bottom:var(--space-md);
	overflow:hidden;
	color:hsl(196 20% 34%);
  line-clamp:3;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
}


.news-card__footer {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem;
	margin-top:auto;
}


.news-card__location {
	display:inline-flex;
	align-items:center;
	gap:.25rem;
	font-size:.875rem;
	font-weight:600;
	color:hsl(196 20% 34%);
}


.news-card__details {
	display:inline-flex;
	align-items:center;
	gap:.25rem;
	padding:0;
	font-weight:600;
	color:var(--color-primary-green);
	background:transparent;
	border:0;
}

.news-grid {
    margin-bottom: var(--space-lg);
}

/*News Pagination*/
.pagination {
  display:flex;
  flex-direction: row; 
  align-items:center;
  justify-content:center;
  gap:var(--space-sm);
  margin-top:var(--space-xl);
}


.pagination>li {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--color-primary-green); 
  background:var(--color-white);
  border:1px solid hsl(163 69% 23% / .12);
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:all .18s ease;
}

.pagination > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-radius:var(--radius-pill);
}

.pagination>li:hover,
.pagination>li>a:hover
{
  background:hsl(163 69% 23% / 0.08);
}

.pagination > li.MarkupPagerNavOn,
.pagination > li.MarkupPagerNavOn > a {
  background: var(--color-primary-green);
  color: var(--color-black);
}


@media (min-width: 48rem) {

	.news-hero__header {
		flex-direction:row;
		align-items:flex-end;
	}

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

}


@media (min-width: 64rem) {

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

/* Overview page */

.overview-page__header {
	max-width: 58rem;
}

.overview-page__intro {
	margin-bottom: var(--space-xl);
}

.overview-card__media {
	background: hsl(163 69% 90%);
}

.overview-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 16rem;
	color: var(--color-primary-green-dark);
	background:
		radial-gradient(circle at top left, hsl(48 99% 62% / 0.35), transparent 34%),
		linear-gradient(135deg, hsl(163 69% 90%), hsl(196 44% 92%));
}

.overview-card__placeholder .material-icons-outlined {
	font-size: 3rem;
}

/* Employees */

.employee-index__header {
	max-width: 58rem;
}

.employee-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.employee-card {
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid hsl(163 69% 23% / 0.12);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-leaf);
}

.employee-card__media {
	height: 25rem;
	background: hsl(163 69% 90%);
}

.employee-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.employee-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--color-primary-green-dark);
	background:
		radial-gradient(circle at top left, hsl(48 99% 62% / 0.35), transparent 34%),
		linear-gradient(135deg, hsl(163 69% 90%), hsl(196 44% 92%));
}

.employee-card__placeholder .material-icons-outlined {
	font-size: 4rem;
}

header.employee-card__header{
	position: relative;
}

.employee-card__body {
	display: grid;
	gap: var(--space-md);
	padding: var(--space-lg);
}

.employee-card__eyebrow {
	margin-bottom: var(--space-xs);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	letter-spacing: 0.06em;
	color: var(--color-primary-green);
	text-transform: uppercase;
}

.employee-card__title {
	margin-bottom: var(--space-xs);
	font-size: var(--fs-2xl);
	line-height: 1.15;
	color: var(--color-primary-blue);
}

.employee-card__position {
	color: hsl(196 24% 32%);
	font-weight: var(--fw-bold);
	position: absolute;
    top: 83%;
}

.employee-card__contact {
	display: grid;
	gap: var(--space-sm);
}

.employee-card__contact-item {
	display: grid;
	gap: 0.15rem;
	padding-top: var(--space-sm);
	border-top: 1px solid hsl(196 18% 88%);
}

.employee-card__contact dt {
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-primary-green);
}

.employee-card__contact dd,
.employee-card__contact a {
	color: var(--color-primary-blue);
}

.employee-card__details {
	border-top: 1px solid hsl(196 18% 88%);
	padding-top: var(--space-md);
}

.employee-card__summary {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 3rem;
	padding: 0.65rem 1rem;
	color: var(--color-white);
	background: var(--color-primary-green);
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-weight: var(--fw-bold);
	list-style: none;
}

.employee-card__summary::-webkit-details-marker {
	display: none;
}

.employee-card__summary:hover {
	background: var(--color-primary-green-light);
}

.employee-card__summary .material-icons-outlined {
	transition: transform 0.3s ease;
}

.employee-card__details[open] .employee-card__summary .material-icons-outlined {
	transform: rotate(180deg);
}

.employee-card__details-panel {
	display: grid;
	gap: var(--space-lg);
	margin-top: var(--space-md);
}

.employee-card__section-title {
	margin-bottom: var(--space-sm);
	font-size: var(--fs-lg);
	line-height: 1.2;
	color: var(--color-primary-blue);
}

.employee-card__tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.employee-card__tag-list li {
	padding: 0.45rem 0.85rem;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-primary-green-dark);
	background: var(--color-primary-green-lightest);
	border-radius: var(--radius-pill);
}

.employee-card__responsibility-list {
	display: grid;
	gap: 0.45rem;
	max-height: 24rem;
	padding-right: var(--space-sm);
	overflow: auto;
	color: hsl(196 30% 24%);
}

.employee-card__responsibility-list li {
	position: relative;
	padding-left: 1rem;
}

.employee-card__responsibility-list li::before {
	position: absolute;
	left: 0;
	content: "";
	width: 0.35rem;
	height: 0.35rem;
	margin-top: 0.55rem;
	background: var(--color-primary-yellow);
	border-radius: 50%;
}

@media (min-width: 48rem) {
	.employee-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*news-article*/

.news-article {
	padding-block: var(--space-2xl, 3rem) var(--space-4xl, 6rem);
}

.news-article__header {
	margin-bottom: var(--space-xl, 2rem);
}

.news-article__backlink {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: var(--space-lg, 1.5rem);
	font-size: var(--fs-sm, 0.875rem);
	font-weight: var(--fw-semi-bold, 600);
	color: var(--color-primary-green);
	text-decoration: none;
}

.news-article__date {
	margin-bottom: var(--space-sm, 0.75rem);
	font-size: var(--fs-sm, 0.875rem);
	font-weight: var(--fw-bold, 700);
	color: var(--color-primary-green);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.news-article__title {
	margin-bottom: var(--space-md, 1rem);
	font-size: clamp(var(--fs-xl, 1.65rem), 6vw, var(--fs-2xl, 3rem));
	line-height: 1.05;
	color: var(--color-primary-blue);
}

.news-article__teaser {
	font-size: var(--fs-lg, 1.125rem);
	line-height: 1.6;
	color: hsl(196 24% 32%);
}

.news-article__figure {
	margin: 0 0 var(--space-2xl, 3rem);
}

.news-article__image {
	width: 100%;
	max-height: 42rem;
	object-fit: cover;
	border-radius: 1rem;
	box-shadow: 0 1rem 2.5rem hsl(196 44% 14% / 0.12);
}

.news-article__caption {
	margin-top: var(--space-xs, 0.5rem);
	font-size: var(--fs-sm, 0.875rem);
	color: hsl(196 18% 42%);
}

.news-article__content {
	font-size: var(--fs-lg, 1.125rem);
	line-height: 1.7;
	color: hsl(196 30% 24%);
}

.news-article__content > * + * {
	margin-top: var(--space-md, 1rem);
}

blockquote {
	padding-left: var(--space-md, 1rem);
	border-left: 3px solid hsl(196 18% 82%);
	color: hsl(196 18% 40%);
	font-style: italic;
}

.news-article__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-md, 1rem);
	margin-top: var(--space-2xl, 3rem);
}

.news-article__gallery-item {
	margin: 0;
}

.news-article__gallery-image {
	width: 100%;
	height: 18rem;
	object-fit: cover;
	border-radius: 0.75rem;
}


/* Job postings */

.job-posting__header {
	max-width: 58rem;
}

.job-posting__layout {
	display: grid;
	gap: var(--space-2xl);
	align-items: start;
}

.job-posting__main {
	min-width: 0;
}

.job-posting__aside {
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 64rem) {
	.job-posting__layout {
		grid-template-columns: minmax(0, 1fr) 22rem;
	}

	.job-posting__aside {
		position: sticky;
		top: 8rem;
	}
}

.job-posting__content {
	max-width: 56rem;
}

.job-posting-info {
	padding: var(--space-lg);
	background: var(--color-white);
	border: 1px solid hsl(196 18% 86%);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-leaf);
}

.job-posting-info__title {
	margin-bottom: var(--space-md);
	font-size: var(--fs-xl);
	line-height: 1.2;
	color: var(--color-primary-blue);
}

.job-posting-facts {
	display: grid;
	gap: var(--space-sm);
}

.job-posting-facts__item {
	display: grid;
	gap: 0.15rem;
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid hsl(196 18% 88%);
}

.job-posting-facts__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.job-posting-facts dt {
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-primary-green);
}

.job-posting-facts dd,
.job-posting-contact__name {
	color: var(--color-primary-blue);
}

.job-posting-contact__name {
	margin-bottom: var(--space-md);
	font-weight: var(--fw-bold);
}

.job-posting-contact__actions {
	display: grid;
	gap: var(--space-sm);
}

.job-posting-contact__actions .button {
	width: 100%;
	min-height: 3rem;
	padding: var(--space-sm) var(--space-md);
}


/* =========================
   Accommodations
========================= */

.accommodation-index__header,
.accommodation-detail__header {
  max-width: 58rem;
}

.accommodation-grid {
  margin-top: var(--space-xl);
}

.accommodation-card__media {
  background: hsl(163 69% 90%);
}

.accommodation-card__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 16rem;
  color: var(--color-primary-green-dark);
  background:
    radial-gradient(circle at top left, hsl(48 99% 62% / 0.35), transparent 34%),
    linear-gradient(135deg, hsl(163 69% 90%), hsl(196 44% 92%));
}

.accommodation-card__placeholder span {
  font-size: 3.25rem;
}

.accommodation-card__tag {
  max-width: calc(100% - 2rem);
  text-align: right;
  padding: 0.45rem 0.85rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary-green-dark);
  background: var(--color-primary-green-lightest);
  border-radius: var(--radius-pill);
}

.accommodation-card__description {
  color: hsl(196 20% 34%);
}

.accommodation-empty {
  max-width: 44rem;
  padding: var(--space-xl);
  color: var(--color-primary-blue);
  background: var(--color-white);
  border: 1px solid hsl(196 18% 86%);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-leaf);
}

.accommodation-empty > * + * {
  margin-top: var(--space-md);
}

.accommodation-index__content {
  margin: var(--space-xl) 0;
}
.accommodation-camping-teaser,
.camping-page__intro,
.camping-page__contact,
.camping-page__feature {
  border: 1px solid hsl(196 18% 88%);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.accommodation-camping-teaser {
  display: grid;
  gap: var(--space-lg);
  align-items: stretch;
  overflow: hidden;
}

.accommodation-camping-teaser__content {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.accommodation-camping-teaser img,
.camping-page__hero img,
.camping-page__feature img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.accommodation-camping-teaser img {
  min-height: 16rem;
}

.camping-page {
  display: grid;
  gap: var(--space-xl);
}

.camping-page__hero {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.camping-page__hero img {
  aspect-ratio: 16 / 7;
}

.camping-page__intro,
.camping-page__contact,
.camping-page__gallery {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.camping-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.camping-page__feature-grid {
  display: grid;
  gap: var(--space-md);
}

.camping-page__feature {
  overflow: hidden;
}

.camping-page__feature img {
  aspect-ratio: 4 / 3;
}

.camping-page__feature h3,
.camping-page__feature p {
  margin-inline: var(--space-md);
}

.camping-page__feature h3 {
  margin-top: var(--space-md);
  color: var(--color-primary-blue);
}

.camping-page__feature p {
  margin-bottom: var(--space-md);
}

.camping-page__booking-embed {
  margin: 0 var(--space-md) var(--space-md);
}

.camping-page__pitch-card {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding: var(--space-md);
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.camping-page__pitch-card h3,
.camping-page__pitch-card p {
  margin: 0;
}

.camping-page__pitch-card h3 {
  color: var(--color-primary-blue);
}

.camping-page__pitch-card .button {
  justify-self: start;
}

.camping-page__pitch-card:hover,
.camping-page__pitch-card:focus-visible {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-leaf);
}

.camping-page__contact {
  background: linear-gradient(135deg, hsl(115 42% 96%), hsl(196 35% 98%));
}

.camping-page__contact a {
  overflow-wrap: anywhere;
}
.camping-page__gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-sm);
}

.camping-page__gallery-item {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: hsl(196 35% 96%);
}

.camping-page__gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 180ms ease;
}

.camping-page__gallery-item:hover img,
.camping-page__gallery-item:focus-visible img {
  transform: scale(1.03);
}


body.is-gallery-lightbox-open {
  overflow: hidden;
}

.gallery-lightbox[hidden] {
  display: none;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: var(--space-md);
}

.gallery-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: hsl(196 38% 8% / 0.86);
}

.gallery-lightbox__panel {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  width: min(72rem, 100%);
  max-height: calc(100vh - (2 * var(--space-md)));
}

.gallery-lightbox__figure {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
}

.gallery-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 1.5rem 4rem hsl(196 38% 4% / 0.45);
}

.gallery-lightbox__caption,
.gallery-lightbox__counter {
  color: var(--color-white);
  text-align: center;
}

.gallery-lightbox__caption {
  min-height: 1.5rem;
  font-weight: var(--fw-bold);
}

.gallery-lightbox__counter {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
}

.gallery-lightbox__button {
  position: absolute;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  color: var(--color-white);
  background: hsl(196 38% 12% / 0.82);
  border: 1px solid hsl(0 0% 100% / 0.3);
  border-radius: 50%;
  cursor: pointer;
}

.gallery-lightbox__button:hover,
.gallery-lightbox__button:focus-visible {
  background: var(--color-primary-green-dark);
}

.gallery-lightbox__button--close {
  top: var(--space-sm);
  right: var(--space-sm);
}

.gallery-lightbox__button--prev,
.gallery-lightbox__button--next {
  top: 50%;
  transform: translateY(-50%);
}

.gallery-lightbox__button--prev {
  left: var(--space-sm);
}

.gallery-lightbox__button--next {
  right: var(--space-sm);
}

@media (max-width: 40rem) {
  .gallery-lightbox__button--prev,
  .gallery-lightbox__button--next {
    top: auto;
    bottom: var(--space-lg);
    transform: none;
  }
}
@media (min-width: 48rem) {
  .accommodation-camping-teaser {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 42%);
  }

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

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

/* Detail */

.accommodation-detail__layout {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

.accommodation-detail__main {
  min-width: 0;
}

.accommodation-detail__aside {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 64rem) {
  .accommodation-detail__layout {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }

  .accommodation-detail__aside {
    position: sticky;
    top: 8rem;
  }
}

.accommodation-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

.accommodation-feature-list__item {
  padding: 0.45rem 0.85rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary-green-dark);
  background: var(--color-primary-green-lightest);
  border-radius: var(--radius-pill);
}

.accommodation-section {
  margin-top: var(--space-2xl);
}

.accommodation-section__title {
  margin-bottom: var(--space-md);
  font-size: var(--fs-2xl);
  line-height: 1.15;
  color: var(--color-primary-blue);
}

.accommodation-text,
.accommodation-price-box {
  max-width: 48rem;
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: hsl(196 30% 24%);
}

.accommodation-price-box,
.accommodation-info-card {
  padding: var(--space-lg);
  background: var(--color-white);
  border: 1px solid hsl(196 18% 86%);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-leaf);
}

.accommodation-price-box {
  border-left: 0.35rem solid var(--color-primary-yellow);
}

.accommodation-info-card__title {
  margin-bottom: var(--space-md);
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--color-primary-blue);
}

.accommodation-facts {
  display: grid;
  gap: var(--space-sm);
}

.accommodation-facts__item {
  display: grid;
  gap: 0.15rem;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid hsl(196 18% 88%);
}

.accommodation-facts__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.accommodation-facts dt {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary-green);
}

.accommodation-facts dd {
  color: var(--color-primary-blue);
}

.accommodation-contact-card__address {
  margin-bottom: var(--space-md);
  font-style: normal;
  color: hsl(196 30% 24%);
}

.accommodation-contact-card__actions {
  display: grid;
  gap: var(--space-sm);
}

.accommodation-contact-card__actions .button {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-sm) var(--space-md);
}


.accommodation-gallery {
  margin-top: var(--space-md);
}

.accommodation-gallery__item img {
  transition: transform 180ms ease;
}

.accommodation-gallery__item:hover img,
.accommodation-gallery__item:focus-visible img {
  transform: scale(1.03);
}

/* =========================
   Amtliche Bekanntmachungen
========================= */

.notice-index__header,
.notice-detail__header {
  max-width: 58rem;
}

.notice-filters {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-white);
  border: 1px solid hsl(196 18% 86%);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-leaf);
}

.notice-filters__group {
  display: grid;
  gap: var(--space-xs);
}

.notice-filters__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary-green-dark);
}

.notice-filters__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  color: var(--color-primary-blue);
  background: var(--color-white);
  border: 1px solid hsl(196 18% 78%);
  border-radius: var(--radius-sm);
}

.notice-filters__input:focus {
  outline: 3px solid hsl(48 99% 50% / 0.35);
  border-color: var(--color-primary-yellow);
}

.notice-filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: end;
}

@media (min-width: 48rem) {
  .notice-filters {
    grid-template-columns: minmax(12rem, 1fr) auto;
    align-items: end;
  }
}

.notice-index__count {
  margin-bottom: var(--space-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: hsl(196 18% 42%);
}

.notice-list {
  display: grid;
  gap: var(--space-md);
}

.notice-card {
  padding: var(--space-lg);
  background: var(--color-white);
  border: 1px solid hsl(196 18% 86%);
  border-left: 0.3rem solid var(--color-primary-yellow);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-leaf);
}

.notice-card__meta,
.notice-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.notice-card__date {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary-green-dark);
}

.notice-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.6rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-primary-green-dark);
  background: var(--color-primary-green-lightest);
  border-radius: var(--radius-sm);
}

.notice-badge--muted {
  color: hsl(196 30% 24%);
  background: hsl(196 18% 92%);
}

.notice-card__title {
  margin-top: var(--space-sm);
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--color-primary-blue);
}

.notice-card__title a {
  color: inherit;
  text-decoration: none;
}

.notice-card__title a:hover {
  color: var(--color-primary-green);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.notice-card__excerpt {
  max-width: 64rem;
  margin-top: var(--space-sm);
  color: hsl(196 30% 24%);
}

.notice-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-top: var(--space-md);
}

.notice-card__actions .button {
  min-height: 2.75rem;
}

.notice-card__file-count {
  font-size: var(--fs-sm);
  color: hsl(196 18% 42%);
}

.notice-empty {
  padding: var(--space-xl);
  background: var(--color-white);
  border: 1px solid hsl(196 18% 86%);
  border-radius: var(--radius-sm);
}

.notice-empty h2 {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-xl);
  color: var(--color-primary-blue);
}

.notice-empty p {
  margin-bottom: var(--space-md);
  color: hsl(196 30% 24%);
}

.notice-detail__layout {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

.notice-detail__main {
  min-width: 0;
}

.notice-detail__aside {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 64rem) {
  .notice-detail__layout {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }

  .notice-detail__aside {
    position: sticky;
    top: 8rem;
  }

  .notice-detail__layout--files-only {
    grid-template-columns: minmax(0, 1fr);
    max-width: 40rem;
  }

  .notice-detail__layout--files-only .notice-detail__aside {
    position: static;
  }
}

.notice-detail__content {
  max-width: 56rem;
}

.notice-detail__content table {
  width: 100%;
  border-collapse: collapse;
}

.notice-detail__content th,
.notice-detail__content td {
  padding: 0.65rem;
  border: 1px solid hsl(196 18% 86%);
  vertical-align: top;
}

.notice-file-box {
  padding: var(--space-lg);
  background: var(--color-white);
  border: 1px solid hsl(196 18% 86%);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-leaf);
}

.notice-file-box__title {
  margin-bottom: var(--space-md);
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--color-primary-blue);
}

.notice-file-box__group-title {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  font-size: var(--fs-md, 1rem);
  color: var(--color-primary-green);
}

.notice-file-box__group-title:first-of-type {
  margin-top: 0;
}

.notice-file-list {
  display: grid;
  gap: var(--space-sm);
  padding: 0;
  list-style: none;
}

.notice-file-list__link {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.85rem;
  color: var(--color-primary-blue);
  text-decoration: none;
  background: hsl(196 18% 96%);
  border-radius: var(--radius-sm);
}

.notice-file-list__link:hover {
  color: var(--color-primary-green);
  background: var(--color-primary-green-lightest);
}

.notice-file-list__link small {
  flex: 0 0 auto;
  font-weight: var(--fw-bold);
  color: var(--color-primary-green-dark);
}



/* =========================
   Öffentliche Ausschreibungen
========================= */
.public_tender_content{
  display:flex;
  flex-direction:row;
  gap:var(--space-md);
  
}

.public_tender_text{
  min-width:75%;
  font-size:var(--fs-lg);
  line-height:1.7;
  color:hsl(196 30% 24%);
}

.public_tender_file_list{
  display:grid;
  gap:var(--space-sm);
  padding:0;
  list-style:none;
  max-width:48rem;
}

.public_tender_file__link {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.85rem;
  color: var(--color-primary-blue);
  text-decoration: none;
  background: hsl(196 18% 96%);
  border-radius: var(--radius-sm);
  min-width: 20rem;
}


.public_tender_file__link:hover {
  color: var(--color-primary-green);
  background: var(--color-primary-green-lightest);
}



/* =========================
   Digitales Rathaus
========================= */

.news-article__content:has(.digital-services) {
	max-width: 72rem;
}

.digital-services {
	display: grid;
	gap: var(--space-xl);
}


.digital-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--space-lg);
}

.digital-services__section {
	display: grid;
	align-content: start;
	gap: var(--space-md);
	padding: var(--space-lg);
	border: 1px solid hsl(196 18% 88%);
	border-radius: var(--radius-sm);
	background: hsl(0 0% 100%);
	box-shadow: 0 0.75rem 1.75rem hsl(196 44% 14% / 0.06);
}

.digital-services__section h2 {
	font-size: var(--fs-xl);
	line-height: 1.2;
	color: var(--color-primary-blue);
}

.digital-services__list {
	display: grid;
	gap: var(--space-xs);
}

.digital-services__link {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--space-xs) var(--space-md);
	min-height: 3.25rem;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid hsl(163 24% 86%);
	border-radius: var(--radius-sm);
	color: var(--color-primary-blue);
	background: hsl(163 35% 97%);
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	line-height: 1.25;
}

.digital-services__link:hover {
	color: var(--color-primary-green-dark);
	border-color: hsl(163 46% 72%);
	background: hsl(163 48% 94%);
}

.digital-services__link-title,
.digital-services__note {
	min-width: 0;
}

.digital-services__note {
	display: block;
	grid-column: 1 / -1;
	margin-top: -0.15rem;
	color: hsl(196 18% 42%);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
}

.digital-services__badge {
	justify-self: end;
	padding: 0.2rem 0.45rem;
	border-radius: var(--radius-sm);
	color: var(--color-primary-green-dark);
	background: hsl(48 99% 88%);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: 1;
	text-transform: uppercase;
  
}


/* =========================
   Verwaltungsgebühren
========================= */

.administration-fees__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
 
} 

.administration-fee {
	gap: var(--space-sm);
  border: solid 1px var(--color-primary-green-light);
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 75%;
  margin-bottom: 5px;
}

.administration-fee__title {
	min-width: 0;
}

.administration-fee__price {
	margin: 0;
	color: var(--color-primary-green-dark);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	line-height: 1.25;
}

/* =========================
   Kontakte
========================= */

.contact-directory-detail__content {
	display: grid;
	gap: var(--space-lg);
}

.contact-directory-detail__address {
	font-size: var(--fs-lg);
}

.contact-directory-detail__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}
/* =========================
   Abfallbeseitigung
========================= */
.waste-grid{
  display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-lg);
}


/* =========================
   Partial "white-card"
========================= */

.white-card{
     border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-lg, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 0.5rem);

}

.white-card--wide{
  grid-column: span 2;

}
.white-card--wider {
    grid-column: span 4;
}
/* =========================
   Winterdienst
========================= */


/* =========================
   Wirtschaft & Gewerbe
========================= */

.business-page {
  display: grid;
  gap: var(--space-xl);
}

.business-page__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid hsl(196 18% 88%);
  border-radius: var(--radius-sm);
  background: hsl(196 35% 97%);
}

.business-page__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--color-primary-blue);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.business-page__nav a:hover,
.business-page__nav a:focus-visible {
  background: var(--color-primary-green-lightest);
  color: var(--color-primary-green-dark);
}

.business-page__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.business-page__grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.business-directory {
  gap: var(--space-sm);
}

.business-directory__tools {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid hsl(196 18% 88%);
  border-radius: var(--radius-sm);
  background: hsl(196 35% 97%);
}

.business-directory__search-label {
  color: var(--color-primary-blue);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.business-directory__search {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid hsl(196 18% 78%);
  border-radius: var(--radius-sm);
  color: var(--color-primary-blue);
  font: inherit;
}

.business-directory__search:focus {
  border-color: var(--color-primary-green-dark);
  outline: 3px solid hsl(148 39% 70% / 0.35);
}

.business-directory__az {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.business-directory__az-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid hsl(196 18% 82%);
  border-radius: var(--radius-sm);
  background: hsl(0 0% 100%);
  color: var(--color-primary-blue);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.business-directory__az-link:hover,
.business-directory__az-link:focus-visible,
.business-directory__az-link.is-active {
  border-color: var(--color-primary-green-dark);
  background: var(--color-primary-green-lightest);
  color: var(--color-primary-green-dark);
}

.business-directory__count {
  width: fit-content;
  margin: 0 0 var(--space-sm);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary-green-lightest);
  color: var(--color-primary-green-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.business-directory__groups {
  display: grid;
  gap: var(--space-lg);
}

.business-directory__group {
  display: grid;
  gap: var(--space-sm);
}

.business-directory__group[hidden],
.business-directory-card[hidden] {
  display: none;
}

.business-directory__letter {
  margin: 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid hsl(196 18% 88%);
  color: var(--color-primary-blue);
  font-size: var(--fs-lg);
}

.business-directory__empty {
  margin: 0;
  color: hsl(196 18% 34%);
  font-weight: var(--fw-bold);
}

.business-directory__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.business-directory-card {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  min-width: 0;
  padding: var(--space-md);
  border: 1px solid hsl(196 18% 88%);
  border-radius: var(--radius-sm);
  background: hsl(196 35% 98%);
}

.business-directory-card h3 {
  margin: 0;
  color: var(--color-primary-blue);
  font-size: var(--fs-md);
  line-height: 1.35;
}

.business-directory-card p,
.business-directory-card summary {
  margin: 0;
  color: hsl(196 18% 34%);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.business-directory-card__details summary {
  cursor: pointer;
}

.business-directory-card__details p {
  margin-top: 0.5rem;
}

.contact-directory-card__description {
  color: hsl(196 18% 34%);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.business-directory-card__tags,
.business-directory-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.business-directory-card__tags li {
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  background: hsl(0 0% 100%);
  color: var(--color-primary-green-dark);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.business-directory-card__meta {
  display: grid;
  gap: 0.45rem;
}

.business-directory-card__meta li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
  min-width: 0;
  color: hsl(196 18% 34%);
  font-size: var(--fs-sm);
}

.business-directory-card__meta .material-icons-outlined {
  color: var(--color-primary-green-dark);
  font-size: 1.1rem;
  line-height: 1.35;
}

.business-directory-card__meta a {
  min-width: 0;
  color: var(--color-primary-blue);
  overflow-wrap: anywhere;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.business-section,
.business-card,
.business-callout {
  border: 1px solid hsl(196 18% 88%);
  border-radius: var(--radius-sm);
  background: hsl(0 0% 100%);
}

.business-section,
.business-card {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.business-section--highlight {
  border-color: hsl(148 39% 70%);
  background: linear-gradient(135deg, hsl(148 45% 96%), hsl(196 35% 98%));
}

.business-section__kicker {
  margin: 0;
  color: var(--color-primary-green-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.business-section h2,
.business-card h2,
.business-callout h3 {
  color: var(--color-primary-blue);
}

.business-section h3 {
  margin-top: var(--space-sm);
  color: var(--color-primary-blue);
  font-size: var(--fs-lg);
}

.business-card > .material-icons-outlined {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-primary-green-lightest);
  color: var(--color-primary-green-dark);
  font-size: 1.45rem;
}

.business-callout {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: hsl(196 35% 97%);
}

.business-page .button {
  justify-self: start;
  align-self: start;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}

@media (max-width: 48rem) {
  .business-page__grid {
    grid-template-columns: 1fr;
  }

  .business-section,
  .business-card {
    padding: var(--space-md);
  }
}

.business-directory-card h3 a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.business-entry__layout {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

.business-entry__contact {
  align-self: start;
}

@media (min-width: 64rem) {
  .business-entry__layout {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }

  .business-entry__contact {
    position: sticky;
    top: 8rem;
  }
}

/* =========================
   DGH rentals and regional products
========================= */

.venue-page,
.regional-products-page {
  display: grid;
  gap: var(--space-xl);
}

/* Nested grids don't shrink below their content's intrinsic width by
   default, which let the fee table blow up every ancestor track in turn. */
.venue-page > *,
.regional-products-page > * {
  min-width: 0;
}

.venue-group > * {
  min-width: 0;
}

.venue-equipment__list,
.regional-product-card__products {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: 0;
  margin: 0;
  list-style: none;
}

.venue-equipment__list li,
.regional-product-card__products li {
  padding: 0.45rem 0.75rem;
  color: var(--color-primary-green-dark);
  background: var(--color-primary-green-lightest);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}

.venue-group {
  display: grid;
  gap: var(--space-md);
}

.venue-grid,
.regional-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-lg);
}

.venue-card,
.regional-product-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  border: 1px solid hsl(196 18% 88%);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.venue-card__image,
.regional-product-card__image,
.regional-products-hero img,
.venue-detail__hero img,
.regional-product-detail__hero img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.venue-card__image,
.regional-product-card__image {
  aspect-ratio: 16 / 9;
}

.venue-card__placeholder,
.venue-detail__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  color: var(--color-primary-green-dark);
  background:
    radial-gradient(circle at top left, hsl(48 99% 62% / 0.35), transparent 34%),
    linear-gradient(135deg, hsl(163 69% 90%), hsl(196 44% 92%));
}

.venue-card__placeholder span,
.venue-detail__placeholder span {
  font-size: 3.25rem;
}

.regional-products-hero,
.venue-detail__hero,
.regional-product-detail__hero {
  margin: 0 0 var(--space-lg);
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.regional-products-hero img {
  aspect-ratio: 16 / 7;
}

.venue-detail__hero img,
.regional-product-detail__hero img {
  aspect-ratio: 16 / 9;
}

.venue-card__body,
.regional-product-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.venue-card__cta {
  margin-top: auto;
}

.venue-card__body > *,
.regional-product-card__body > * {
  min-width: 0;
}

.venue-detail__main,
.regional-product-detail__main {
  min-width: 0;
}

.venue-card__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: baseline;
  justify-content: space-between;
}

.venue-card__header h2,
.regional-product-card h2 {
  color: var(--color-primary-blue);
}

.venue-card__meta,
.venue-card__notice {
  font-weight: var(--fw-bold);
  color: var(--color-primary-green-dark);
}

.venue-card__notice {
  padding: var(--space-sm) var(--space-md);
  background: hsl(48 99% 62% / 0.22);
  border-radius: var(--radius-sm);
}

.venue-fees summary {
  cursor: pointer;
  color: var(--color-primary-blue);
  font-weight: var(--fw-bold);
}

.venue-fees__table-wrap {
  overflow-x: auto;
  margin-top: var(--space-sm);
}

.venue-fees__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.venue-fees__table th,
.venue-fees__table td {
  padding: 0.6rem 0.7rem;
  text-align: left;
  vertical-align: top;
  border: 1px solid hsl(196 18% 88%);
}

.venue-fees__table th {
  color: var(--color-primary-blue);
  background: hsl(196 35% 96%);
}

.venue-contact,
.venue-detail__aside,
.regional-product-detail__aside {
  display: grid;
  gap: var(--space-sm);
}

.venue-detail__layout,
.regional-product-detail__layout {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

.venue-booking {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-white);
  border: 1px solid hsl(196 18% 88%);
  border-radius: var(--radius-sm);
}

.venue-booking h2 {
  margin-bottom: var(--space-md);
  color: var(--color-primary-blue);
}

.venue-booking__widget {
  overflow-x: auto;
}

/* mein-intra.net booking widget (Portuna): its own ".button"/".button-row" classes already
   collide with the site's, inheriting shape/spacing/hover-lift for free — only color needs
   fixing here, since the widget has no ".button--primary" equivalent of its own. */
.venue-booking__widget .button-row,
.camping-page__booking-embed .button-row {
  align-items: center;
}

/* !important on layout (not just color) because the widget injects its own stylesheet
   after ours, at runtime — with equal specificity, its ".button" rule would otherwise win
   the cascade and silently override alignment, which is why text looked off-center. */
.venue-booking__widget .button.button-add,
.venue-booking__widget .button.button-back,
.camping-page__booking-embed .button.button-add,
.camping-page__booking-embed .button.button-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
}

.venue-booking__widget .button.button-add,
.camping-page__booking-embed .button.button-add {
  color: var(--color-white) !important;
  background: var(--color-primary-green) !important;
}

.venue-booking__widget .button.button-add:hover,
.camping-page__booking-embed .button.button-add:hover {
  background: var(--color-primary-green-light) !important;
}

.venue-booking__widget .button.button-back,
.camping-page__booking-embed .button.button-back {
  color: var(--color-black) !important;
  background: var(--color-primary-yellow) !important;
}

.venue-booking__widget .button.button-back:hover,
.camping-page__booking-embed .button.button-back:hover {
  background: var(--color-primary-yellow-light) !important;
}

.venue-booking__widget .action-menu,
.camping-page__booking-embed .action-menu {
  color: var(--color-primary-blue);
  font-weight: var(--fw-semi-bold);
}

.venue-booking__widget .action-menu .material-icons,
.camping-page__booking-embed .action-menu .material-icons {
  font-size: 20px;
  vertical-align: middle;
  color: var(--color-primary-blue);
}

.regional-product-card .button,
.venue-card .button,
.venue-detail__aside .button,
.regional-product-detail__aside .button {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

@media (min-width: 64rem) {
  .venue-detail__layout,
  .regional-product-detail__layout {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }

  .venue-detail__aside,
  .regional-product-detail__aside {
    position: sticky;
    top: 8rem;
  }

  .venue-grid,
  .regional-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* =========================
   Gastronomie
========================= */

.gastronomy-page {
  display: grid;
  gap: var(--space-xl);
}

.gastronomy-hero {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.gastronomy-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.gastronomy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-md);
}

.gastronomy-card h2 {
  margin: 0;
  color: var(--color-primary-blue);
  font-size: var(--fs-lg);
  line-height: 1.25;
}

.gastronomy-card h2 a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.gastronomy-card__hours {
  display: grid;
  gap: 0.35rem;
  margin-top: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid hsl(196 18% 88%);
}

.gastronomy-card__hours h3 {
  margin: 0;
  color: var(--color-primary-blue);
  font-size: var(--fs-sm);
}

.gastronomy-card__hours ul {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: hsl(196 18% 34%);
  font-size: var(--fs-sm);
}
/* =========================
   Ausflugsziele & Freizeit
========================= */

.experience-page {
  display: grid;
  gap: var(--space-xl);
}

.experience-hero,
.experience-detail__hero {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.experience-hero img,
.experience-detail__hero img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.experience-hero img {
  aspect-ratio: 16 / 7;
}

.ortsteile-credit {
  margin-top: 0.35rem;
  color: hsl(196 18% 45%);
  font-size: var(--fs-xs, 0.8125rem);
}

.experience-detail__hero {
  margin-bottom: var(--space-lg);
}

.experience-detail__hero img {
  aspect-ratio: 16 / 9;
}

.experience-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.experience-filter__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid hsl(196 18% 82%);
  border-radius: var(--radius-sm);
  background: hsl(0 0% 100%);
  color: var(--color-primary-blue);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-family: inherit;
  cursor: pointer;
}

.experience-filter__link:hover,
.experience-filter__link:focus-visible,
.experience-filter__link.is-active {
  border-color: var(--color-primary-green-dark);
  background: var(--color-primary-green-lightest);
  color: var(--color-primary-green-dark);
}

.experience-section {
  display: grid;
  gap: var(--space-md);
}

.experience-section[hidden] {
  display: none;
}

.experience-section__header h2 {
  color: var(--color-primary-blue);
}

.experience-grid {
  display: grid;
  gap: var(--space-lg);
}

.experience-card {
  display: grid;
  overflow: hidden;
  border: 1px solid hsl(196 18% 88%);
  border-radius: var(--radius-sm);
  background: hsl(0 0% 100%);
}

.experience-card__image-link {
  display: block;
  background: hsl(196 35% 96%);
}

.experience-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.experience-card__body {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: var(--space-lg);
}

.experience-card__body h3 {
  margin: 0;
  color: var(--color-primary-blue);
  font-size: var(--fs-lg);
  line-height: 1.25;
}

.experience-card__body h3 a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.experience-card__body p {
  margin: 0;
  color: hsl(196 18% 34%);
  line-height: 1.55;
}

.experience-card .button {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

.experience-detail__layout {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

.experience-detail__aside {
  align-self: start;
}

.experience-links {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid hsl(196 18% 88%);
}

.experience-links h3 {
  margin: 0;
  color: var(--color-primary-blue);
  font-size: var(--fs-sm);
}

.experience-links .button {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  white-space: normal;
}

.experience-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.experience-gallery a {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: hsl(196 35% 96%);
}

.experience-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 52rem) {
  .experience-card {
    grid-template-columns: minmax(16rem, 34%) minmax(0, 1fr);
  }

  .experience-card__image {
    height: 100%;
    aspect-ratio: auto;
  }
}

@media (min-width: 64rem) {
  .experience-detail__layout {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }

  .experience-detail__aside {
    position: sticky;
    top: 8rem;
  }
}
/* =========================
   Footer
========================= */

.site-footer {
  margin-top: var(--space-4xl);
  color: var(--color-white);
  background: var(--color-primary-blue-dark);
}

.site-footer a {
  color: inherit;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xl);
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
  padding-block: var(--space-2xl);
}

.site-footer__section {
  display: grid;
  align-content: start;
  gap: var(--space-md);
}

.site-footer__heading {
  color: var(--color-primary-yellow);
  font-size: var(--fs-lg);
  line-height: 1.2;
}

.footer-contact {
  display: grid;
  gap: 0.25rem;
  color: hsl(0 0% 100% / 0.86);
  font-style: normal;
}

.footer-contact strong {
  color: var(--color-white);
}

.footer-contact__list,
.footer-nav__list,
.footer-partners {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-contact__list li {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  color: hsl(0 0% 100% / 0.86);
  font-size: var(--fs-sm);
}

.footer-contact__list .material-icons-outlined {
  color: var(--color-primary-yellow);
  font-size: 1.15rem;
  line-height: 1.25;
}

.footer-contact__list a,
.footer-nav__link {
  text-decoration: none;
}

.footer-contact__list a:hover,
.footer-nav__link:hover {
  color: var(--color-primary-yellow);
}

.footer-hours {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
}

.footer-hours__day {
  display: grid;
  grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr);
  gap: var(--space-sm);
  color: hsl(0 0% 100% / 0.86);
  font-size: var(--fs-sm);
}

.footer-hours dt {
  color: var(--color-white);
  font-weight: var(--fw-bold);
}

.footer-hours dd {
  display: grid;
  gap: 0.15rem;
  margin: 0;
}

.footer-hours__time {
  white-space: nowrap;
}

.footer-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: max-content;
  max-width: 100%;
  color: hsl(0 0% 100% / 0.86);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi-bold);
}

.footer-nav__link .material-icons-outlined {
  color: var(--color-primary-yellow);
  font-size: 1rem;
}

.footer-contact__list a:focus-visible,
.footer-nav__link:focus-visible,
.footer-partners__link:focus-visible {
  outline: 3px solid var(--color-primary-yellow);
  outline-offset: 0.25rem;
  border-radius: 0.25rem;
}

.footer-partners {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.footer-partners__link {
  display: grid;
  min-height: 4.5rem;
  padding: 0.55rem;
  border-radius: var(--radius-sm);
  background: hsl(0 0% 100%);
}

.footer-partners__link img {
  width: 100%;
  max-height: 3.75rem;
  object-fit: contain;
  align-self: center;
  justify-self: center;
}

.site-footer__bottom {
  border-top: 1px solid hsl(0 0% 100% / 0.16);
}

.site-footer__copyright {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
  padding-block: var(--space-md);
  font-size: var(--fs-sm);
  color: hsl(0 0% 100% / 0.72);
}

@media (max-width: 64rem) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    padding-block: var(--space-xl);
  }

  .footer-hours__day {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .footer-partners {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.municipal-services {
	display: grid;
	gap: var(--space-lg);
	max-width: 72rem;
}

.municipal-services__tools {
	display: grid;
	gap: var(--space-md);
	padding: var(--space-lg);
	border: 1px solid hsl(196 18% 88%);
	border-radius: var(--radius-sm);
	background: hsl(0 0% 100%);
	box-shadow: 0 0.75rem 1.75rem hsl(196 44% 14% / 0.06);
}

.municipal-services__search-label {
	color: var(--color-primary-blue);
	font-weight: var(--fw-bold);
}

.municipal-services__search {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.85rem 1rem;
	border: 1px solid hsl(196 18% 82%);
	border-radius: var(--radius-sm);
	font: inherit;
	color: var(--color-primary-blue);
	background: hsl(0 0% 100%);
}

.municipal-services__search:focus {
	border-color: var(--color-primary-green);
	outline: 3px solid hsl(163 48% 84%);
	outline-offset: 2px;
}

.municipal-services__az {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xxs);
}

.municipal-services__az-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.35rem;
	min-height: 2.35rem;
	padding: 0.35rem 0.65rem;
	border: 1px solid hsl(163 24% 82%);
	border-radius: var(--radius-sm);
	color: var(--color-primary-blue);
	background: hsl(163 35% 97%);
	font-weight: var(--fw-bold);
	line-height: 1;
}

.municipal-services__az-link:hover,
.municipal-services__az-link:focus-visible,
.municipal-services__az-link.is-active {
	color: hsl(0 0% 100%);
	border-color: var(--color-primary-green-dark);
	background: var(--color-primary-green-dark);
}

.municipal-services__count {
	color: hsl(196 18% 42%);
	font-weight: var(--fw-bold);
}

.municipal-services__groups {
	display: grid;
	gap: var(--space-xl);
}

.municipal-services__group {
	display: grid;
	gap: var(--space-md);
}

.municipal-services__group[hidden],
.municipal-service-card[hidden] {
	display: none !important;
}

.municipal-services__letter {
	width: max-content;
	padding-bottom: 0.2rem;
	border-bottom: 3px solid var(--color-primary-green);
	color: var(--color-primary-blue);
	font-size: var(--fs-2xl);
	line-height: 1;
}

.municipal-services__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--space-md);
}

.municipal-service-card {
	display: grid;
	align-content: start;
	gap: var(--space-xs);
	padding: var(--space-md);
	border: 1px solid hsl(196 18% 88%);
	border-radius: var(--radius-sm);
	background: hsl(0 0% 100%);
}

.municipal-service-card__title {
	font-size: var(--fs-lg);
	line-height: 1.25;
}

.municipal-service-card__title a {
	color: var(--color-primary-blue);
}

.municipal-service-card__title a:hover {
	color: var(--color-primary-green-dark);
}

.municipal-service-card__summary {
	color: hsl(196 18% 38%);
	font-size: var(--fs-sm);
}

.municipal-services__empty {
	padding: var(--space-lg);
	border: 1px solid hsl(196 18% 88%);
	border-radius: var(--radius-sm);
	background: hsl(196 35% 97%);
	color: var(--color-primary-blue);
	font-weight: var(--fw-bold);
}

.municipal-service-detail__content {
	display: grid;
	gap: var(--space-lg);
}

.municipal-service-detail__sections {
	display: grid;
	gap: var(--space-md);
}

.municipal-service-detail__section {
	padding: var(--space-lg);
	border: 1px solid hsl(196 18% 88%);
	border-radius: var(--radius-sm);
	background: hsl(0 0% 100%);
}

.municipal-service-detail__section h2 {
	margin-bottom: var(--space-sm);
	color: var(--color-primary-blue);
	font-size: var(--fs-xl);
	line-height: 1.25;
}

.municipal-service-detail__section :where(p, ul, ol) {
	margin-top: var(--space-sm);
}

.municipal-service-detail__section :where(ul, ol) {
	padding-left: 1.25rem;
}

.municipal-service-detail__section a {
	display: inline-flex;
	align-items: center;
	margin: var(--space-xs) 0;
	padding: 0.6rem 1rem;
	color: var(--color-black);
	font-weight: var(--fw-bold);
	text-decoration: none;
	background: var(--color-primary-yellow-light);
	border-radius: var(--radius-sm);
	transition: background-color 160ms ease, transform 160ms ease;
}

.municipal-service-detail__section a:hover {
	background: var(--color-primary-yellow);
	transform: translateY(-2px);
}

.municipal-service-detail__table-wrap {
	margin: var(--space-sm) 0;
	overflow-x: auto;
}

.municipal-service-detail__section table {
	width: 100%;
	min-width: 30rem;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.municipal-service-detail__section table th,
.municipal-service-detail__section table td {
	padding: 0.6rem 0.7rem;
	text-align: left;
	vertical-align: top;
	border: 1px solid hsl(196 18% 88%);
}

.municipal-service-detail__section table th {
	color: var(--color-primary-blue);
	background: hsl(196 35% 96%);
}

.municipal-services__load-more-wrap {
	display: flex;
	justify-content: center;
}

.municipal-services__load-more[hidden] {
	display: none;
}
/* Multi-level main navigation */
.site-nav__entry {
	display: flex;
	align-items: center;
	gap: 0.15rem;
}

.site-nav__entry--level-2,
.site-nav__entry--level-3 {
	min-width: 100%;
}

.site-nav__entry--level-2 > .site-nav__sublink,
.site-nav__entry--level-3 > .site-nav__sublink {
	flex: 1 1 auto;
}

.site-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	color: var(--color-primary-blue);
	background: transparent;
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
}

.site-nav__toggle .material-icons-outlined {
	font-size: 1.25rem;
	transition: transform 160ms ease;
}

.site-nav__item--level-1 > .site-nav__entry > .site-nav__toggle {
	color: var(--color-primary-green-light);
}

.site-nav__item--level-2 > .site-nav__entry > .site-nav__toggle .material-icons-outlined {
	transform: rotate(-90deg);
}

.site-nav__item--level-2 > .site-nav__sublist {
	top: 0;
	left: calc(100% + 0.35rem);
}

.site-nav__sublist--level-3::before {
	top: 0;
	left: -0.35rem;
	right: auto;
	width: 0.35rem;
	height: 100%;
}

.site-nav__item:hover > .site-nav__entry .site-nav__toggle,
.site-nav__item:focus-within > .site-nav__entry .site-nav__toggle,
.site-nav__item.is-active > .site-nav__entry .site-nav__toggle {
	color: var(--color-primary-green);
}

@media (min-width: 64.001rem) {
	.site-nav__sublist {
		max-height: none;
		overflow: visible;
		overscroll-behavior: auto;
	}

	.site-nav__sublist--level-3 {
		z-index: 130;
	}

	.site-nav__toggle {
		pointer-events: none;
	}

	.site-nav__item--level-1 > .site-nav__entry > .site-nav__toggle {
		display: none;
	}
}

@media (max-width: 64rem) {
	.site-nav__entry {
		width: 100%;
	}

	.site-nav__entry--level-1 {
		background: transparent;
		border-radius: var(--radius-md);
	}

	.site-nav__entry--level-1 > .site-nav__link,
	.site-nav__entry--level-2 > .site-nav__sublink,
	.site-nav__entry--level-3 > .site-nav__sublink {
		flex: 1 1 auto;
	}

	.site-nav__toggle {
		width: 2.75rem;
		height: 2.75rem;
		color: var(--color-primary-green);
	}

	.site-nav__item--level-2 > .site-nav__entry > .site-nav__toggle .material-icons-outlined {
		transform: none;
	}

	.site-nav__item.is-subnav-open > .site-nav__entry > .site-nav__toggle .material-icons-outlined {
		transform: rotate(180deg);
	}

	.site-nav__sublist,
	.site-nav__item:hover > .site-nav__sublist,
	.site-nav__item:focus-within > .site-nav__sublist {
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav__item.is-subnav-open > .site-nav__sublist {
		display: grid;
	}

	.site-nav__sublist--level-2,
	.site-nav__sublist--level-3 {
		position: static;
		min-width: 0;
		max-height: none;
		margin: 0 0 var(--space-xs);
		padding: 0 0 0 var(--space-md);
		overflow: visible;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
	}

	.site-nav__sublist--level-3 {
		padding-left: var(--space-sm);
	}

	.site-nav__sublist::before {
		display: none;
	}

	.site-nav__sublink {
		white-space: normal;
	}
}

/* =========================
   PrivacyWire Cookie-Banner
   Modul-eigenes CSS (add_basic_css_styling) ist bewusst deaktiviert -
   die folgenden Regeln übernehmen deshalb ALLE Basis-Mechanismen
   (Position, Sichtbarkeit, Ein-/Ausblenden der Blueprint-Vorlage),
   nicht nur das Aussehen. Ohne diese Regeln bleiben Banner/Optionen/
   Meldung permanent sichtbar im normalen Textfluss.
========================= */

.privacywire-wrapper .privacywire {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
  width: min(100% - 2 * var(--gutter), 34rem);
  max-height: min(85vh, 40rem);
  overflow-y: auto;
  padding: var(--space-xl) var(--gutter);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-header);
  color: var(--color-primary-blue-dark);
  font-family: inherit;
}

.privacywire-wrapper.show-banner .privacywire-banner,
.privacywire-wrapper.show-options .privacywire-options,
.privacywire-wrapper.show-message .privacywire-message {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.privacywire-wrapper button[hidden] {
  display: none;
}

.privacywire-ask-consent-blueprint,
.privacywire-wrapper [data-ask-consent-rendered="1"] {
  display: none;
}

.privacywire-wrapper .privacywire-header {
  margin-bottom: var(--space-sm);
  color: var(--color-primary-blue);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.privacywire-wrapper .privacywire-text {
  margin-bottom: var(--space-md);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.privacywire-wrapper .privacywire-text ul {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.privacywire-wrapper .privacywire-text label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.privacywire-wrapper .privacywire-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.privacywire-wrapper .privacywire-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-lg);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease;
}

.privacywire-wrapper .privacywire-buttons button:hover {
  transform: translateY(-2px);
}

.privacywire-wrapper .privacywire-buttons .allow-all {
  color: var(--color-white);
  background: var(--color-primary-green);
}

.privacywire-wrapper .privacywire-buttons .allow-all:hover {
  background: var(--color-primary-green-light);
}

.privacywire-wrapper .privacywire-buttons .allow-necessary,
.privacywire-wrapper .privacywire-buttons .choose,
.privacywire-wrapper .privacywire-buttons .toggle {
  color: var(--color-black);
  background: var(--color-primary-yellow);
}

.privacywire-wrapper .privacywire-buttons .allow-necessary:hover,
.privacywire-wrapper .privacywire-buttons .choose:hover,
.privacywire-wrapper .privacywire-buttons .toggle:hover {
  background: var(--color-primary-yellow-light);
}

.privacywire-wrapper .privacywire-buttons .save {
  color: var(--color-white);
  background: var(--color-primary-blue);
}

.privacywire-wrapper .privacywire-buttons .save:hover {
  background: var(--color-primary-blue-light);
}

.privacywire-wrapper .privacywire-page-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.privacywire-wrapper .privacywire-page-link {
  color: var(--color-primary-blue);
  font-size: var(--fs-xs);
  text-decoration: underline;
}

.privacywire-wrapper .privacywire-page-link:hover {
  color: var(--color-primary-green);
}

.privacywire-wrapper .privacywire-message .privacywire-body {
  color: var(--color-primary-green-dark);
  font-weight: var(--fw-bold);
}

/* =========================
   FrontendForms (Kontaktformular)
========================= */

.contact-page__layout {
  display: grid;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.contact-form-section {
  max-width: 34rem;
}

@media (min-width: 64rem) {
  .contact-page__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
    align-items: start;
  }

  .contact-form-section {
    max-width: none;
  }
}

.contact-form-section .fieldwrapper.seca {
  display: none;
}

.contact-form-section .fieldwrapper {
  margin-bottom: var(--space-md);
}

.contact-form-section .label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: var(--fw-semi-bold);
  color: var(--color-primary-blue);
}

.contact-form-section #contactForm-privacy-fieldwrapper .label {
  align-items: start;
  gap: var(--space-xs);
  font-weight: var(--fw-regular);
}

.contact-form-section .input,
.contact-form-section .textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: var(--fs-md);
  color: var(--color-primary-blue);
  background: var(--color-white);
  border: 2px solid hsl(196 18% 82%);
  border-radius: var(--radius-sm);
}

.contact-form-section .input:hover,
.contact-form-section .textarea:hover {
  border-color: var(--color-primary-green-light);
}

.contact-form-section .checkbox {
  width: auto;
  margin-top: 0.2rem;
}

.contact-form-section button[type="submit"] {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: var(--space-sm) var(--space-xl);
  font: inherit;
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background: var(--color-primary-green);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 160ms ease;
}

.contact-form-section button[type="submit"]:hover {
  background: var(--color-primary-green-light);
}

.contact-form__success {
  padding: var(--space-md) var(--space-lg);
  color: var(--color-primary-green-dark);
  background: var(--color-primary-green-lightest);
  border-radius: var(--radius-sm);
}

/* =========================
   Scroll-Eingangsanimation (Kartenelemente)
   Die Klasse .js-reveal wird ausschliesslich per JS gesetzt (main.js),
   und nur wenn IntersectionObserver verfuegbar ist und der Nutzer keine
   reduzierte Bewegung bevorzugt. Ohne JS/bei altem Browser bleibt der
   Inhalt dadurch immer sofort sichtbar.

   Nutzt bewusst die eigenstaendige "translate"-Property statt "transform":
   so kombiniert sich der Einblend-Versatz mit vorhandenen Hover-Effekten
   (transform: translateY(...) bei :hover), statt sie bei gleicher
   Selektor-Spezifitaet zu ueberschreiben.
========================= */

@media (prefers-reduced-motion: no-preference) {
  .js-reveal {
    opacity: 0;
    translate: 0 1rem;
    transition: opacity 500ms ease, translate 500ms ease;
  }

  .js-reveal.is-revealed {
    opacity: 1;
    translate: 0 0;
  }

  /* .quick-card und .news-card definieren bereits eine eigene
     "transition" fuer ihren Hover-Effekt. Die Property "transition"
     laesst sich nicht aus zwei Regeln zusammenfuehren - wer bei der
     Kaskade gewinnt, liefert die komplette Liste. Diese zusammengesetzten
     Selektoren (hoehere Spezifitaet als beide Einzelregeln) tragen daher
     Hover- und Reveal-Timing gemeinsam ein, statt sich zu ueberschreiben. */
  .quick-card.js-reveal {
    transition: background-color 160ms ease, transform 160ms ease, opacity 500ms ease, translate 500ms ease;
  }

  .news-card.js-reveal {
    transition: transform .22s ease, box-shadow .22s ease, opacity 500ms ease, translate 500ms ease;
  }
}