/* ==========================================================================
   Elshani Garten — public site

   The design prototype carried every value as an inline style. They are all
   here instead, unchanged: the clamp() expressions are ported verbatim rather
   than converted to breakpoints, so the layout stays fluid between sizes.

   Media queries appear only where the prototype's JavaScript actually changed
   the DOM structure (header mode, service grid columns, project spans) or
   where a grid needs different tracks.

   Contents
     1  Tokens
     2  Base
     3  Type and shared pieces
     4  Buttons and pills
     5  Header
     6  Footer
     7  Hero blocks
     8  Home
     9  Leistungen
    10  Projekte and lightbox
    11  Über uns
    12  Kontakt
    13  Terminformular
    14  Legal pages and 404
    15  Reveal on scroll
   ========================================================================== */

/* --------------------------------------------------------------------------
   1  Tokens
   -------------------------------------------------------------------------- */

:root {
  --cream: #F5F0E6;
  --cream-raised: #FFFDF8;
  --cream-warm: #F7F3E9;
  --cream-hover: #F0E9D9;
  --cream-menu-hover: #F2EDE0;
  --cream-field: #F9F5EC;

  --forest-darkest: #0B1C13;
  --forest-dark: #10261A;
  --forest-mid: #1C3D28;
  --forest-line: #2C4C36;
  --forest-border: #4A6753;
  --forest-border-soft: #3C5C45;

  --gold: #C8A24A;
  --gold-hover: #DDB861;
  --gold-text: #8A6E22;
  --gold-muted: #A8996F;

  --ink: #23271F;
  --ink-strong: #182B1E;
  --text-700: #33402F;
  --text-700-alt: #2C3626;
  --text-600: #3F4A3B;
  --text-600-alt: #3F5140;
  --text-500: #55604F;
  --text-500-alt: #4B5747;
  --text-450: #5F6A58;
  --text-400: #6C7663;
  --text-400-alt: #6B7462;
  --text-muted: #7A8470;
  --text-muted-alt: #7E8C6B;
  --text-muted-warm: #8B9479;
  --nav-link: #4C5544;

  --on-dark: #F5F0E6;
  --on-dark-body: #C4CFB6;
  --on-dark-body-alt: #DCE6D0;
  --on-dark-muted: #A9B899;
  --on-dark-muted-alt: #BFCDAE;
  --on-dark-eyebrow: #8FA57B;
  --on-dark-eyebrow-alt: #8C9C79;
  --footer-text: #CBD5BC;
  --footer-muted: #93A382;
  --footer-faint: #6F7D5F;
  --footer-rule: #23422E;

  --border-light: #E8E0CE;
  --border-mid: #D3C8AF;
  --border-mid-alt: #DED4C0;
  --border-mid-soft: #E0D7C3;
  --border-mid-soft-alt: #E4DBC8;
  --border-strong: #C9BFA9;
  --inset-frame: #E7DFCC;
  --thumb-rail: #CFC4AE;

  --sans: 'Manrope', Helvetica, Arial, sans-serif;
  --serif: 'Marcellus', Georgia, 'Times New Roman', serif;

  --ease: cubic-bezier(.22, .61, .36, 1);

  --gutter: clamp(16px, 3.5vw, 40px);
  --edge: clamp(10px, 1.6vw, 20px);
  --section-y: clamp(56px, 7vw, 116px);
  --container: 1320px;
}

/* --------------------------------------------------------------------------
   2  Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a {
  color: var(--forest-mid);
}

a:hover {
  color: var(--forest-dark);
}

a,
button {
  transition:
    background-color .28s ease,
    color .2s ease,
    border-color .28s ease,
    transform .3s var(--ease),
    box-shadow .3s ease;
}

/* Anchor targets clear the sticky header. */
[id] {
  scroll-margin-top: 104px;
}

input,
textarea,
select,
button {
  font-family: inherit;
}

input::placeholder,
textarea::placeholder {
  color: #9AA290;
}

/* Visible only to screen readers — used for form legends and skip links. */
.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;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--forest-dark);
  color: var(--cream);
  padding: 14px 22px;
  border-radius: 0 0 12px 0;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* A single visible focus treatment everywhere, since the design has none. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3  Type and shared pieces
   -------------------------------------------------------------------------- */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

/* The alternating raised band, ruled top and bottom. */
.band {
  background: var(--cream-raised);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.eyebrow {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted-alt);
}

.eyebrow--dark {
  color: var(--on-dark-eyebrow);
}

.h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 96px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 18px 0 0;
  color: var(--cream-warm);
  text-wrap: balance;
}

.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 66px);
  line-height: 1.02;
  margin: 16px 0 0;
  text-wrap: balance;
}

/* The slightly smaller H2 used inside dark blocks and narrow columns. */
.h2--tight {
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 1.06;
}

.h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  margin: 14px 0 10px;
}

.lead {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  font-weight: 600;
  color: var(--text-600-alt);
  text-wrap: pretty;
}

.body {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-500);
  text-wrap: pretty;
}

/* The header row every band shares: title block left, outlined pill right. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(30px, 3.5vw, 52px);
}

.chip {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-600);
  background: var(--cream-raised);
  border: 1px solid var(--border-light);
  padding: 9px 14px;
  border-radius: 999px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.note-chip {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-muted);
  border: 1px dashed var(--border-mid);
  padding: 9px 14px;
  border-radius: 999px;
}

.note-chip--dark {
  color: var(--on-dark-eyebrow);
  border-color: var(--forest-border-soft);
  letter-spacing: 0.14em;
}

/* Card and cover photography.

   These are <img> elements rather than CSS backgrounds so they can carry alt
   text and, more importantly, loading="lazy" — the projects page holds well
   over fifty photographs, and a background image gives the browser no way to
   defer the ones nobody has scrolled to yet. The wrapper keeps the rounded
   corners and the chips that sit on top. */
.cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.icon-round {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--forest-dark);
  font-size: 16px;
}

/* The dark rounded block used for the process, claims and CTA sections. */
.dark-block {
  padding: clamp(20px, 3vw, 44px) var(--edge);
}

.dark-block__inner {
  border-radius: 28px;
  background: var(--forest-dark);
  color: var(--on-dark);
  padding: clamp(32px, 5vw, 84px) clamp(20px, 4vw, 64px);
  position: relative;
  overflow: hidden;
}

.dark-block__inner--gradient {
  background: linear-gradient(150deg, var(--forest-mid), var(--forest-darkest));
}

.dark-block__body {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
}

/* Numbered items sitting under a hairline rule inside a dark block. */
.rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(22px, 3vw, 44px);
}

.rule-item {
  border-top: 1px solid var(--forest-line);
  padding-top: 22px;
}

.rule-item__num {
  font-family: var(--serif);
  font-size: clamp(38px, 4.4vw, 66px);
  color: var(--gold);
  line-height: 1;
}

.rule-item__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  margin: 14px 0 10px;
  color: var(--on-dark);
}

.rule-item__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--on-dark-muted);
  margin: 0;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4  Buttons and pills
   -------------------------------------------------------------------------- */

.pill {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  padding: 18px 30px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
}

.pill--dark {
  background: var(--forest-dark);
  color: var(--cream);
}

.pill--dark:hover {
  background: var(--forest-mid);
  color: var(--cream);
}

.pill--gold {
  background: var(--gold);
  color: #12261A;
}

.pill--gold:hover {
  background: var(--gold-hover);
  color: #12261A;
}

/* Outlined, on a dark ground. */
.pill--ghost {
  border: 1px solid var(--forest-border);
  color: var(--cream);
  background: transparent;
}

.pill--ghost:hover {
  background: var(--forest-mid);
  color: var(--cream);
}

/* Outlined, on the cream ground. */
.pill--outline {
  border: 1px solid var(--border-mid);
  color: var(--forest-dark);
  background: transparent;
  font-size: 14px;
  padding: 15px 26px;
}

.pill--outline:hover {
  background: var(--cream-hover);
  color: var(--forest-dark);
}

/* The same pill sitting on a raised band, where the hover must go lighter. */
.pill--outline-on-band:hover {
  background: var(--cream-raised);
}

.pill--wide {
  flex: 1 1 auto;
  min-width: 180px;
}

.pill--block {
  display: block;
  width: 100%;
}

/* The underlined serif phone number. */
.phone-link {
  display: inline-block;
  font-family: var(--serif);
  font-size: 26px;
  color: var(--forest-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
}

.phone-link:hover {
  color: var(--forest-mid);
}

/* --------------------------------------------------------------------------
   5  Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  font-family: var(--sans);
}

.utility {
  background: var(--forest-dark);
  color: var(--on-dark-muted-alt);
  font-size: 12.5px;
  padding: 8px 0;
}

.utility__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  align-items: center;
}

.utility__meta {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-eyebrow-alt);
}

@media (max-width: 619px) {
  .utility__meta {
    display: none;
  }
}

.utility__phone {
  margin-left: auto;
  color: var(--cream);
  text-decoration: none;
  font-weight: 700;
}

.utility__hours {
  color: var(--on-dark-eyebrow-alt);
}

.header__bar {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
}

.header__logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  flex: none;
}

.header__logo img {
  height: clamp(34px, 3vw, 46px);
  width: auto;
  display: block;
}

.nav {
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.4vw, 18px);
}

.nav__link {
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 2px;
  color: var(--nav-link);
  border-bottom: 1.5px solid transparent;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
}

.nav__link:hover {
  color: var(--forest-dark);
}

.nav__link.is-active,
.nav__link[aria-expanded="true"] {
  color: var(--forest-dark);
  border-bottom-color: var(--gold);
}

/* The caret is two borders on an empty box, rotated. */
.caret {
  display: block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
  margin-top: -3px;
}

[aria-expanded="true"] > .caret {
  transform: rotate(-135deg);
}

.header__cta {
  background: var(--forest-dark);
  color: var(--cream);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 15px 26px;
  border-radius: 999px;
  white-space: nowrap;
}

.header__cta:hover {
  background: var(--forest-mid);
  color: var(--cream);
}

.header__call {
  margin-left: auto;
  background: var(--forest-dark);
  color: var(--cream);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 13px 20px;
  border-radius: 999px;
}

.header__call:hover {
  background: var(--forest-mid);
  color: var(--cream);
}

.burger {
  width: 46px;
  height: 46px;
  flex: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0;
}

.burger span {
  width: 18px;
  height: 1.5px;
  background: var(--ink-strong);
}

/* The two halves of the bar are wrappers only — `contents` lets their children
   take part in the bar's own flex layout. Declared before the media queries so
   the ones below actually win. */
.header__desktop,
.header__mobile {
  display: contents;
}

/* Desktop nav above 940px, hamburger below — the prototype's one hard break. */
@media (max-width: 939px) {
  .header__desktop {
    display: none;
  }
}

@media (min-width: 940px) {
  .header__mobile,
  .menu {
    display: none !important;
  }
}

/* Mega menu */

.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 14px);
  padding-top: 14px;
  background: transparent;
}

.mega[hidden] {
  display: none;
}

.mega__panel {
  background: var(--cream-raised);
  border-top: 1px solid var(--border-mid-alt);
  border-bottom: 1px solid var(--border-mid-alt);
  box-shadow: 0 26px 44px -28px rgba(16, 38, 26, 0.4);
}

.mega__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(26px, 3vw, 40px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

.mega__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mega__label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-eyebrow-alt);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 8px;
}

.mega__item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  text-decoration: none;
  padding: 9px 12px;
  margin: 0 -12px;
  border-radius: 12px;
}

.mega__item:hover {
  background: var(--cream-menu-hover);
}

.mega__num {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.08em;
  flex: none;
}

.mega__title {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink-strong);
  line-height: 1.25;
}

.mega__kicker {
  display: block;
  font-size: 12.5px;
  color: var(--text-400-alt);
  margin-top: 2px;
}

.mega__promo {
  background: linear-gradient(150deg, var(--forest-mid), var(--forest-darkest));
  color: var(--cream);
  border-radius: 20px;
  padding: clamp(22px, 2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: stretch;
}

.mega__promo-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-eyebrow);
}

.mega__promo-title {
  font-family: var(--serif);
  font-size: clamp(21px, 1.8vw, 26px);
  line-height: 1.15;
}

.mega__promo-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--on-dark-body);
}

.mega__promo-cta {
  margin-top: auto;
  background: var(--gold);
  color: #12261A;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 15px 22px;
  border-radius: 999px;
}

.mega__promo-cta:hover {
  background: var(--gold-hover);
  color: #12261A;
}

.mega__promo-phone {
  text-align: center;
  color: var(--cream);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

/* Mobile menu */

.menu {
  background: var(--cream);
  border-top: 1px solid var(--border-mid-alt);
  display: flex;
  flex-direction: column;
  padding: 6px var(--gutter) 22px;
  max-height: calc(100dvh - 150px);
  overflow-y: auto;
}

.menu[hidden] {
  display: none;
}

.menu__link {
  font-family: var(--serif);
  font-size: 22px;
  text-decoration: none;
  color: var(--ink-strong);
  padding: 15px 0;
  border-bottom: 1px solid var(--border-mid-soft-alt);
}

.menu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-mid-soft-alt);
  padding: 15px 0;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink-strong);
  text-align: left;
  width: 100%;
}

.menu__toggle .caret {
  width: 8px;
  height: 8px;
  border-color: var(--text-400-alt);
  margin-top: 0;
}

.menu__sub {
  display: flex;
  flex-direction: column;
  padding: 8px 0 12px 2px;
  border-bottom: 1px solid var(--border-mid-soft-alt);
}

.menu__sub[hidden] {
  display: none;
}

.menu__sub-link {
  display: flex;
  gap: 12px;
  align-items: baseline;
  text-decoration: none;
  padding: 9px 0;
}

.menu__sub-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  flex: none;
}

.menu__sub-title {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-700-alt);
}

.menu__cta {
  margin-top: 18px;
  background: var(--forest-dark);
  color: var(--cream);
  text-decoration: none;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  padding: 17px;
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   6  Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--forest-dark);
  color: var(--footer-text);
  padding: clamp(56px, 7vw, 104px) 0 30px;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--footer-rule);
}

.footer__brand {
  max-width: 380px;
}

.footer__name {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  color: var(--cream);
  display: block;
  line-height: 1.1;
}

.footer__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--footer-muted);
  margin: 18px 0 0;
  text-wrap: pretty;
}

.footer__heading {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin: 0 0 20px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
}

.footer__col a {
  color: var(--footer-text);
  text-decoration: none;
  font-size: 15px;
}

.footer__col a:hover {
  color: #fff;
}

.footer__phone {
  color: var(--cream) !important;
  font-weight: 700;
  font-size: 18px !important;
}

.footer__phone:hover {
  color: var(--gold) !important;
}

.footer__muted {
  color: var(--footer-muted);
  line-height: 1.6;
}

.footer__bottom {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--footer-faint);
}

.footer__bottom a {
  color: var(--footer-faint);
  text-decoration: none;
}

.footer__bottom a:hover {
  color: var(--footer-text);
}

.footer__legal {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   7  Hero blocks
   -------------------------------------------------------------------------- */

.hero {
  padding: 0 var(--edge) var(--edge);
}

.hero__card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background-color: var(--forest-dark);
  background-size: cover, cover;
  background-position: center, center 35%;
}

/* The home hero is bottom-aligned and taller than the inner-page heroes. */
.hero--home .hero__card {
  min-height: clamp(560px, 80vh, 860px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 4vw, 64px);
}

.hero--page .hero__card {
  padding: clamp(32px, 5vw, 80px) clamp(22px, 4vw, 64px) clamp(30px, 4vw, 64px);
}

.hero__body {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}

.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--cream-warm);
  font-size: clamp(44px, 7.4vw, 116px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}

.hero__split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 56px);
  align-items: end;
  margin-top: clamp(28px, 3.5vw, 48px);
}

.hero__text {
  font-size: clamp(16px, 1.2vw, 18.5px);
  line-height: 1.7;
  color: var(--on-dark-body);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   8  Home
   -------------------------------------------------------------------------- */

/* Intro — image pair on the left, copy on the right. */

.intro {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(36px, 5vw, 88px);
  align-items: center;
}

.intro__media {
  position: relative;
  padding-bottom: clamp(48px, 6vw, 90px);
}

.intro__image {
  height: clamp(300px, 38vw, 520px);
  border-radius: 24px;
  background-position: center;
  background-size: cover;
}

.intro__inset {
  position: absolute;
  right: clamp(0px, 1vw, 24px);
  bottom: 0;
  width: clamp(150px, 20vw, 240px);
  height: clamp(180px, 24vw, 290px);
  border-radius: 24px;
  border: 8px solid var(--cream);
  background-position: center;
  background-size: cover;
}

.intro__h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.08;
  margin: 18px 0 0;
  text-wrap: balance;
}

.intro__lead {
  margin: 22px 0 0;
}

.intro__body {
  margin: 18px 0 0;
}

.checks {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 28px 0 0;
}

.check {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.check__mark {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--inset-frame);
  border: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-text);
  font-size: 12px;
}

.check__text {
  font-size: 16px;
  color: var(--text-700);
  font-weight: 600;
}

.intro__cta {
  margin-top: 30px;
  padding: 18px 32px;
}

/* Services grid.
   Three columns from 1000px, two from 640px, one below — the same thresholds
   the prototype's resize listener used. */

.services {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

@media (min-width: 640px) {
  .services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.service-card {
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: 24px;
  padding: clamp(16px, 1.6vw, 22px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(18px, 2vw, 28px);
  text-decoration: none;
  color: var(--ink);
  transition:
    background-color .28s ease,
    border-color .28s ease,
    transform .3s var(--ease);
}

.service-card:hover {
  background: var(--cream-hover);
  border-color: var(--border-mid);
  transform: translateY(-4px);
  color: var(--ink);
}

.service-card__image {
  position: relative;
  overflow: hidden;
  flex: none;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
  padding: 12px;
}

.service-card__num {
  position: relative;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #41503B;
  background: var(--cream-warm);
  padding: 6px 11px;
  border-radius: 999px;
}

.service-card__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.service-card__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.service-card__title {
  font-family: var(--serif);
  font-size: clamp(22px, 1.9vw, 29px);
  line-height: 1.15;
}

.service-card__note {
  font-size: 14.5px;
  color: var(--text-muted);
}

/* Winterdienst: the last card takes the whole row and turns horizontal, but
   only once there is more than one column to span. */
@media (min-width: 640px) {
  .service-card--full {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
  }

  .service-card--full .service-card__image {
    width: clamp(170px, 18vw, 240px);
  }
}

/* Projects strip — scrollbar hidden, duplicated for a seamless auto-scroll. */

.strip-section {
  padding: clamp(48px, 6vw, 100px) 0 clamp(48px, 6vw, 96px);
}

.strip-head {
  max-width: var(--container);
  margin: 0 auto clamp(26px, 3vw, 44px);
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-end;
  justify-content: space-between;
}

.strip {
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  overflow-x: auto;
  padding: 0 var(--gutter) 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.strip::-webkit-scrollbar {
  display: none;
}

.strip-card {
  flex: none;
  width: clamp(260px, 26vw, 360px);
  text-decoration: none;
  color: var(--ink);
  transition: transform .35s var(--ease), color .2s ease;
}

.strip-card:hover {
  color: var(--forest-mid);
  transform: translateY(-6px);
}

.strip-card__image {
  position: relative;
  overflow: hidden;
  height: clamp(300px, 32vw, 440px);
  border-radius: 22px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 14px;
}

.tag {
  position: relative;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #41503B;
  background: var(--cream-warm);
  padding: 7px 12px;
  border-radius: 999px;
}

.strip-card__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.15;
  margin: 18px 0 8px;
}

.strip-card__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-400);
  margin: 0;
  text-wrap: pretty;
}

/* Testimonials */

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

/* A single review would otherwise stretch the whole 1240px container and run
   the quote at ~137 characters a line — about double a readable measure. The
   cap only applies while it is alone: as soon as a second review is added the
   auto-fit grid takes over again and both cards share the row. */
.quote:only-child {
  max-width: 680px;
}

.quote {
  background: var(--cream);
  border: 1px solid var(--border-light);
  border-radius: 22px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 240px;
}

.quote__mark {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 0.8;
  height: 22px;
  color: var(--gold);
}

.quote__text {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-600);
  margin: 0;
  flex: 1;
  text-wrap: pretty;
}

.quote__who {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted-warm);
}

/* The star rating, between the quote and the name. Gold, because that is the
   accent this palette already spends on the things worth noticing. */
.quote__stars {
  margin-top: 20px;
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 0.18em;
  line-height: 1;
}

/* Where the quote came from, under the reviewer's name. Quieter than the name
   without being decoration: it is the part a reader checks. */
.quote__source {
  display: block;
  margin-top: 6px;
  letter-spacing: 0.1em;
  color: var(--text-muted-warm);
  opacity: 0.75;
}

/* FAQ */

.faq {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 108px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.faq__intro-text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-500);
  margin: 0;
  max-width: 38ch;
  text-wrap: pretty;
}

.faq__phone {
  margin-top: 24px;
}

.faq__row {
  border-bottom: 1px solid var(--border-mid-soft);
}

.faq__button {
  width: 100%;
  background: none;
  border: 0;
  padding: 22px 0;
  display: flex;
  gap: 20px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

.faq__button:hover {
  color: var(--forest-mid);
}

.faq__question {
  font-size: 17.5px;
  font-weight: 700;
  flex: 1;
}

.faq__sign {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-text);
  font-size: 16px;
}

.faq__answer {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-500);
  margin: 0;
  padding: 0 54px 24px 0;
  text-wrap: pretty;
}

.faq__answer[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   9  Leistungen
   -------------------------------------------------------------------------- */

.hero__anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.anchor-pill {
  font-size: 13px;
  font-weight: 600;
  color: var(--on-dark-body-alt);
  text-decoration: none;
  border: 1px solid var(--forest-border-soft);
  padding: 10px 16px;
  border-radius: 999px;
}

.anchor-pill:hover {
  background: var(--forest-mid);
  color: var(--cream);
}

.service-rows {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 104px) var(--gutter) clamp(24px, 3vw, 48px);
}

.service-row {
  border-top: 1px solid var(--border-mid-soft);
  padding: clamp(28px, 3.6vw, 56px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3.5vw, 56px);
  align-items: start;
}

/* Two columns from 720px, with the heading spanning both rows on the left;
   three from 1100px, where the photo gets its own column. */
@media (min-width: 720px) {
  .service-row {
    grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
  }

  .service-row__head {
    grid-row: 1 / span 2;
  }

  .service-row__media {
    grid-column: 2;
  }
}

@media (min-width: 1100px) {
  .service-row {
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.3fr) minmax(0, 1fr);
  }

  .service-row__head {
    grid-row: auto;
  }

  .service-row__media {
    grid-column: auto;
  }
}

.service-row__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.service-row__num {
  font-family: var(--serif);
  font-size: clamp(34px, 3.4vw, 52px);
  color: var(--gold);
  line-height: 1;
}

.service-row__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

.service-row__kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted-warm);
}

.service-row__text {
  font-size: clamp(16px, 1.15vw, 17.5px);
  line-height: 1.75;
  color: var(--text-500-alt);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}

.service-row__chips {
  margin: 22px 0 0;
}

.service-row__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--forest-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 6px;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  cursor: pointer;
}

.service-row__link:hover {
  color: var(--forest-mid);
}

.service-row__media {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background-size: cover;
  background-position: center;
  aspect-ratio: 4 / 5;
}

.service-rows__end {
  border-top: 1px solid var(--border-mid-soft);
}

.claims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(22px, 3vw, 44px);
}

.claims .rule-item__title {
  font-size: 24px;
  margin: 0 0 12px;
}

/* The "Hochwertige Gartenlösungen" two-column block. */

.split {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 108px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.split__media {
  position: relative;
  padding-bottom: clamp(40px, 5vw, 80px);
}

.split__image {
  height: clamp(280px, 34vw, 460px);
  border-radius: 24px;
  background-size: cover;
  background-position: center 40%;
}

.split__inset {
  position: absolute;
  right: clamp(0px, 1vw, 20px);
  bottom: 0;
  width: clamp(130px, 17vw, 210px);
  height: clamp(130px, 17vw, 210px);
  border-radius: 24px;
  border: 8px solid var(--cream-raised);
  background-size: cover;
  background-position: center;
}

.split__h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.08;
  margin: 16px 0 22px;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   10  Projekte and lightbox
   -------------------------------------------------------------------------- */

.filters {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 80px) var(--gutter) clamp(14px, 2vw, 28px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
}

.filter {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-mid);
  background: transparent;
  color: var(--nav-link);
}

.filter[aria-pressed="true"] {
  border-color: var(--forest-dark);
  background: var(--forest-dark);
  color: var(--cream);
}

.filter-count {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-muted);
}

.project-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(48px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
}

@media (min-width: 620px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.project {
  display: flex;
  flex-direction: column;
}

.project[hidden] {
  display: none;
}

/* The wide cards only stretch while the full list is shown; once a filter is
   applied the rows would break up, so they fall back to one column. */
@media (min-width: 900px) {
  .project-grid:not(.is-filtered) .project--big {
    grid-column: span 2;
  }

  .project-grid:not(.is-filtered) .project--big .project__cover {
    height: clamp(360px, 34vw, 520px);
  }
}

.project__cover {
  position: relative;
  cursor: zoom-in;
  border: 0;
  padding: 16px;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  height: clamp(260px, 64vw, 380px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

@media (min-width: 900px) {
  .project__cover {
    height: clamp(300px, 26vw, 400px);
  }
}

.project__num {
  position: relative;
  font-family: var(--serif);
  font-size: 20px;
  color: #3A4A35;
  background: var(--cream-warm);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 2px;
}

.thumbs::-webkit-scrollbar {
  height: 5px;
}

.thumbs::-webkit-scrollbar-thumb {
  background: var(--thumb-rail);
  border-radius: 99px;
}

.thumb {
  position: relative;
  overflow: hidden;
  display: block;
  cursor: zoom-in;
  flex: none;
  width: 74px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--border-mid-soft);
  padding: 0;
}

.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(23px, 2.2vw, 32px);
  line-height: 1.12;
  margin: 14px 0 10px;
  text-wrap: balance;
}

.project__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-450);
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
}

.project__facts {
  margin-top: 18px;
}

.project__facts .chip {
  font-size: 12.5px;
  color: var(--text-500-alt);
  padding: 8px 13px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.detail-grid__a,
.detail-grid__b {
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  aspect-ratio: 3 / 4;
  /* A grid item's automatic minimum size is its content size, and an
     aspect-ratio gives these empty boxes one — so at narrow widths the pair
     grew past the 1fr columns and the second tile was clipped by the
     overflow guard on <body>. */
  min-width: 0;
}

.detail-grid__b {
  margin-top: 28px;
}

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 18, 12, 0.93);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 44px);
  gap: 16px;
  border: 0;
  width: 100%;
  height: 100%;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  color: var(--on-dark-body-alt);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lightbox__count {
  color: var(--on-dark-eyebrow);
}

.lightbox__stage {
  width: min(1200px, 100%);
  height: 76vh;
  border-radius: 16px;
  background-color: var(--forest-darkest);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.lightbox__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.lightbox__btn {
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 13px 24px;
  border-radius: 999px;
  color: var(--cream);
  background: rgba(245, 240, 230, 0.1);
  border: 1px solid var(--forest-border);
}

.lightbox__btn--gold {
  color: #12261A;
  background: var(--gold);
  border: 0;
}

.lightbox__btn--plain {
  color: var(--on-dark-body-alt);
  background: none;
  border: 1px solid var(--forest-border-soft);
  padding: 13px 20px;
}

/* --------------------------------------------------------------------------
   11  Über uns
   -------------------------------------------------------------------------- */

.about-images {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(36px, 4.5vw, 72px) var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}

@media (min-width: 760px) {
  .about-images {
    grid-template-columns: 2fr 1fr;
  }
}

.about-images__a {
  border-radius: 24px;
  background-size: cover;
  background-position: center;
  height: clamp(240px, 32vw, 440px);
}

.about-images__b {
  border-radius: 24px;
  background-size: cover;
  background-position: center 40%;
  height: clamp(200px, 32vw, 440px);
}

.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}

.value {
  background: var(--cream-raised);
  border: 1px solid var(--border-light);
  border-radius: 24px;
  padding: clamp(24px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 230px;
}

.value__num {
  font-family: var(--serif);
  font-size: clamp(32px, 3vw, 46px);
  color: var(--gold);
  line-height: 1;
}

.value__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  margin: 0;
}

.value__text {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-500);
  margin: 0;
  text-wrap: pretty;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(20px, 3vw, 44px);
}

.stat {
  border-top: 1px solid var(--forest-line);
  padding-top: 20px;
}

.stat__value {
  font-family: var(--serif);
  font-size: clamp(42px, 4.6vw, 68px);
  line-height: 1;
  color: var(--gold);
}

.stat__label {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-dark-muted);
}

.story__text {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 58ch;
}

.story__lead {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.65;
  color: #2E3729;
  margin: 0;
  text-wrap: pretty;
}

.story__body {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--text-500);
  margin: 0;
  text-wrap: pretty;
}

.story__image {
  margin-top: clamp(28px, 3.5vw, 44px);
  border-radius: 24px;
  background-size: cover;
  background-position: center 35%;
  height: clamp(240px, 26vw, 400px);
}

.skill-list {
  border-top: 1px solid var(--border-mid-soft);
  margin-top: 20px;
}

.skill {
  border-bottom: 1px solid var(--border-mid-soft);
  padding: clamp(18px, 2vw, 26px) 0;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 32px);
  text-decoration: none;
  color: var(--ink);
}

.skill:hover {
  background: var(--cream-raised);
  color: var(--ink);
}

.skill__label {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.15;
  flex: 1;
  min-width: 0;
}

.skill .icon-round {
  width: 42px;
  height: 42px;
}

/* --------------------------------------------------------------------------
   12  Kontakt
   -------------------------------------------------------------------------- */

.contact {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(44px, 5.5vw, 96px) var(--gutter) clamp(48px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

@media (min-width: 980px) {
  .contact {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

.contact__block {
  border-top: 1px solid var(--border-mid-soft);
  padding-top: 22px;
}

.contact__block + .contact__block {
  margin-top: 32px;
}

.contact__label {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted-warm);
  font-weight: 700;
  margin: 0 0 16px;
}

.contact__address {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.35;
  margin: 0;
  color: var(--ink);
}

.contact__hours {
  font-size: 15.5px;
  color: var(--text-450);
  margin: 14px 0 0;
}

.contact__hero-phone {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 48px);
  color: var(--gold);
  text-decoration: none;
  line-height: 1;
  border-bottom: 1px solid var(--forest-border-soft);
  padding-bottom: 8px;
}

.contact__hero-phone:hover {
  color: var(--gold-hover);
}

.contact__hero-mail {
  font-size: 16px;
  font-weight: 600;
  color: var(--on-dark-body-alt);
  text-decoration: none;
  padding-bottom: 12px;
}

.contact__hero-mail:hover {
  color: var(--cream);
}

.contact__hero-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 48px);
  align-items: flex-end;
  margin-top: clamp(26px, 3.5vw, 44px);
}

/* The map. An OpenStreetMap embed rather than a photo placeholder — it needs
   no API key and no consent banner beyond the usual iframe note. */
.map {
  margin-top: 22px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  height: clamp(200px, 22vw, 300px);
  background: linear-gradient(160deg, #DCE2CE, #C3CFB2);
}

.map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The placeholder shown until the visitor asks for the embed. */
.map__gate {
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  text-align: left;
  padding: 20px;
  color: #2E3729;
}

.map__gate:hover {
  background: rgba(255, 253, 248, 0.35);
}

.map__gate-title {
  font-family: var(--serif);
  font-size: 20px;
}

.map__gate-text {
  font-size: 12.5px;
  line-height: 1.55;
  max-width: 40ch;
  color: #3F4A3B;
}

.map__link {
  display: inline-block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--forest-dark);
}

.contact__form {
  background: var(--cream-raised);
  border: 1px solid var(--border-light);
  border-radius: 28px;
  padding: clamp(24px, 3vw, 48px);
}

.contact__form-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.08;
  margin: 14px 0 10px;
  text-wrap: balance;
}

.contact__form-text {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-450);
  margin: 0 0 28px;
  text-wrap: pretty;
}

/* Shared form furniture, used by both the contact and appointment forms. */

.field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 560px) {
  .field-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field--wide {
  grid-column: 1 / -1;
}

.field__label {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-400);
}

.field input,
.field textarea {
  border: 1px solid var(--border-mid-soft);
  background: var(--cream-field);
  padding: 16px 18px;
  font-size: 16px;
  border-radius: 14px;
  color: var(--ink);
  width: 100%;
}

.field textarea {
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  background: var(--cream-raised);
}

.field.has-error input,
.field.has-error textarea {
  border-color: #A6472F;
}

.field__error {
  font-size: 13.5px;
  font-weight: 600;
  color: #8E3A24;
}

/* The selectable chips: a real checkbox or radio, visually a pill. */

.choice {
  position: relative;
  display: inline-flex;
}

.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.choice > span {
  font-size: 14.5px;
  font-weight: 600;
  padding: 14px 19px;
  border-radius: 999px;
  border: 1px solid var(--border-mid-soft);
  background: var(--cream-raised);
  color: var(--text-600);
  transition: background-color .28s ease, color .2s ease, border-color .28s ease;
}

.choice input:checked + span {
  border-color: var(--forest-dark);
  background: var(--forest-dark);
  color: var(--cream);
}

.choice input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.choice--sm > span {
  font-size: 14px;
  padding: 13px 18px;
}

/* On the contact page the unchecked chip sits on the field ground. */
.contact__form .choice > span {
  font-size: 14px;
  padding: 12px 17px;
  background: var(--cream-field);
}

.contact__form .choice input:checked + span {
  background: var(--forest-dark);
}

.form-note {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-muted);
  margin: 20px 0 0;
}

.form-success {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--forest-mid);
  font-weight: 600;
}

.form-error {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 600;
  color: #8E3A24;
  background: #FBF1EC;
  border: 1px solid #E7CEC3;
  border-radius: 14px;
  padding: 14px 18px;
}

.contact__submit {
  margin-top: 26px;
  width: 100%;
  padding: 20px;
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   13  Terminformular
   -------------------------------------------------------------------------- */

.termin {
  font-family: var(--sans);
  color: var(--ink);
}

.termin__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(52px, 6.5vw, 104px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
}

@media (min-width: 1000px) {
  .termin__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

.termin__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 1.04;
  margin: 16px 0 18px;
  max-width: 22ch;
  text-wrap: balance;
}

.termin__text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-500);
  margin: 0;
  max-width: 40ch;
  text-wrap: pretty;
}

.termin__aside {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.termin__aside-label {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted-warm);
}

.termin__aside-phone {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--forest-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  align-self: flex-start;
  padding-bottom: 4px;
}

.termin__aside-phone:hover {
  color: var(--forest-mid);
}

.termin__aside-meta {
  font-size: 14.5px;
  color: var(--text-450);
}

.termin__card {
  background: var(--cream-field);
  border: 1px solid var(--border-light);
  border-radius: 28px;
  padding: clamp(20px, 2.8vw, 44px);
}

.termin__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(20px, 2.6vw, 32px);
  padding: 0;
  border: 0;
  margin-inline: 0;
}

.termin__tab {
  flex: 1 1 110px;
  border-top: 2px solid var(--border-mid-soft);
  padding-top: 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.termin__tab-num {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #B7BCAC;
}

.termin__tab-label {
  font-size: 13px;
  font-weight: 700;
  color: #98A08C;
}

/* Steps already reached keep the dark rule; the current one golds its number. */
.termin__tab.is-done {
  border-top-color: var(--forest-dark);
}

.termin__tab.is-done .termin__tab-label {
  color: var(--forest-dark);
}

.termin__tab.is-done .termin__tab-num {
  color: var(--text-muted-warm);
}

.termin__tab.is-current .termin__tab-num {
  color: var(--gold);
}

.termin__step-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(23px, 2.2vw, 32px);
  line-height: 1.1;
  margin: 0 0 8px;
}

.termin__step-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-450);
  margin: 0 0 22px;
}

.termin__step + .termin__step {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--border-light);
}

/* With JavaScript on, the steps become a wizard and only one is shown. */
.js .termin__step + .termin__step {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.js .termin__step[hidden] {
  display: none;
}

.termin__group {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.termin__group-label {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-400);
}

.termin__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  border: 0;
  padding: 0;
  margin: 0;
}

/* The eight day cards. Child combinator on purpose: the card holds three
   nested spans (weekday, day, month) that must not pick up the pill styling
   themselves — as descendants they did, and every card rendered as three
   stacked pills inside a fourth. */
.day-choice > span {
  min-width: 92px;
  padding: 13px 15px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  font-weight: 400;
}

.day-choice__dow {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

.day-choice__day {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1;
}

.day-choice__month {
  font-size: 11.5px;
  opacity: 0.7;
}

.termin__summary {
  margin-top: 24px;
  border-top: 1px solid var(--border-light);
  padding-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 26px;
}

@media (min-width: 620px) {
  .termin__summary {
    grid-template-columns: 1fr 1fr;
  }
}

.termin__summary-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.termin__summary-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted-warm);
}

.termin__summary-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-600);
}

.termin__nav {
  margin-top: 28px;
  border-top: 1px solid var(--border-light);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.termin__back {
  font-size: 15px;
  font-weight: 700;
  padding: 16px 26px;
  border-radius: 999px;
  border: 1px solid var(--border-mid);
  background: transparent;
  color: var(--forest-dark);
  cursor: pointer;
}

.termin__back:hover {
  background: var(--cream-hover);
}

.termin__next {
  flex: 1 1 200px;
  font-size: 16px;
  font-weight: 700;
  padding: 18px 30px;
  border-radius: 999px;
  border: 0;
  background: var(--forest-dark);
  color: var(--cream);
  cursor: pointer;
}

.termin__next:hover {
  background: var(--forest-mid);
}

.termin__next.is-submit {
  background: var(--gold);
  color: #12261A;
}

.termin__next.is-submit:hover {
  background: var(--gold-hover);
}

.termin__hint {
  font-size: 13.5px;
  color: var(--text-muted-warm);
  flex: 1 1 100%;
}

.termin__hint.is-error {
  color: #8E3A24;
  font-weight: 600;
}

/* The confirmation shown after a successful submission. */

.termin__done {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.termin__done-mark {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--forest-dark);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}

.termin__done-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(25px, 2.6vw, 38px);
  line-height: 1.06;
  margin: 0;
}

.termin__done-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-500-alt);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}

.termin__done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.termin__done-actions .pill {
  padding: 17px 28px;
}

/* --------------------------------------------------------------------------
   14  Legal pages and 404
   -------------------------------------------------------------------------- */

.prose {
  max-width: 72ch;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) var(--gutter);
}

.prose h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.15;
  margin: 44px 0 14px;
}

.prose h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 28px 0 10px;
}

.prose p,
.prose li {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--text-500);
  text-wrap: pretty;
}

.prose ul {
  padding-left: 20px;
}

.prose a {
  color: var(--forest-mid);
}

/* Marks a legal detail only the client can supply. Deliberately loud: an
   Impressum that silently ships half-finished is a legal problem, so these
   have to be impossible to overlook before launch. */
.todo {
  background: #FBF3DC;
  border-bottom: 2px dashed var(--gold);
  color: #6B5518;
  padding: 2px 4px;
  font-style: italic;
}

.notfound {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(64px, 10vw, 160px) var(--gutter);
  text-align: center;
}

.notfound__code {
  font-family: var(--serif);
  font-size: clamp(64px, 12vw, 140px);
  line-height: 1;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   15  Reveal on scroll

   Sections start hidden only once the script has confirmed it will reveal
   them; without JavaScript, or with reduced motion, nothing is ever hidden.
   -------------------------------------------------------------------------- */

.js [data-reveal="pending"] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 700ms var(--ease),
    transform 700ms var(--ease);
}

.js [data-reveal="shown"] {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Tap targets

   A row of 15px text links is comfortable with a mouse and awkward with a
   thumb: the footer columns were 21px tall with a 12px gap, so neither the
   link nor the space around it reached the 24px WCAG 2.2 asks for. The
   padding below grows each target to ~33px while the gap shrinks by the same
   amount, so the rendered spacing — and the design — stay exactly as they
   were. Applied only where the pointer is coarse, so the desktop layout is
   untouched.
   -------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
  .footer__col {
    gap: 0;
  }

  .footer__col a {
    padding-block: 6px;
  }

  .footer__legal {
    gap: 4px 16px;
  }

  .footer__legal a,
  .map__link,
  .utility__phone {
    display: inline-block;
    padding-block: 6px;
  }

  .utility__phone {
    margin-block: -6px;
  }

  .map__link {
    margin-top: 6px;
  }

  .header__logo {
    min-height: 44px;
  }
}

/* Consent notice (see layout.php consent_banner). A bottom sheet on phones,
   a card in the lower-left corner on wider screens. It never covers the
   whole page and never blocks scrolling - the site works fine unanswered. */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  padding: 12px;
  pointer-events: none;
}

.consent__box {
  pointer-events: auto;
  max-width: 440px;
  background: var(--forest-dark);
  color: var(--cream);
  border: 1px solid var(--forest-border-soft);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 18px 48px rgba(11, 28, 19, 0.35);
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.consent.is-open .consent__box {
  transform: none;
  opacity: 1;
}

.consent__title {
  font-family: var(--serif);
  font-size: 20px;
  margin: 0 0 6px;
}

.consent__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-dark-body);
  margin: 0 0 16px;
}

.consent__text a {
  color: var(--gold);
  text-decoration: underline;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.consent__actions .pill {
  padding: 12px 20px;
  font-size: 14px;
}

@media (min-width: 640px) {
  .consent {
    padding: 20px;
  }
}

/* The reopen link sits among the legal links and has to look like one. */
.footer__linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.footer__linkbtn:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .consent__box {
    transition: none;
  }
}