@import url('/_ds_bundle.css');

:root {
  color-scheme: light dark;
}

::selection {
  background: var(--c-accent);
  color: var(--c-accent-on);
}

.site-head {
  position: sticky;
  z-index: 50;
  top: 0;
  padding-block: var(--sp-3);
  background: color-mix(in srgb, var(--c-bg) 90%, transparent);
  backdrop-filter: blur(var(--sp-4));
}

.site-head__logo {
  gap: var(--sp-2);
  min-height: calc(var(--sp-8) - var(--sp-4));
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-head__logo picture,
.site-head__logo img {
  display: block;
}

.site-head__logo img {
  width: auto;
  height: calc(var(--sp-6) + var(--sp-1));
}

.site-nav ul {
  gap: var(--sp-2);
}

.site-nav li:last-child a {
  border: 2px solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-accent);
  color: var(--c-accent-on);
}

.site-nav li:last-child a:hover {
  border-color: var(--c-accent-hover);
  background: var(--c-accent-hover);
  color: var(--c-accent-on);
}

.hero {
  position: relative;
  border-bottom: 1px solid var(--c-rule);
  overflow: hidden;
}

.hero::before {
  position: absolute;
  inset-block: var(--sp-8);
  left: 0;
  width: var(--sp-1);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--c-accent);
  content: '';
}

.hero .sheet {
  align-items: end;
}

.hero .sheet__body {
  max-width: none;
}

.hero .lede {
  max-width: var(--measure);
}

.hero .contact-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

.hero .button,
.hero .more {
  margin-top: 0;
}

.hero .more {
  color: var(--c-text-muted);
  text-decoration: none;
}

section,
.hero {
  scroll-margin-top: var(--sp-10);
}

main:focus {
  outline: none;
}

h1 + .lede,
h2 + .lede,
.breaks h3 + p,
.facets h3 + p {
  margin-top: var(--sp-4);
}

.breaks p + .list-plain {
  margin-top: var(--sp-6);
}

.sheet__body {
  gap: var(--sp-7);
}

.sheet__mark {
  color: var(--c-accent);
  font-weight: 650;
}

.button {
  padding: var(--sp-4) var(--sp-6);
}

.note {
  padding: var(--sp-4) var(--sp-5);
}

#leistungen {
  background: var(--c-bg-sunk);
}

#leistungen .breaks,
#prinzipien .breaks {
  gap: var(--sp-6);
}

#leistungen .breaks > article,
#prinzipien .breaks > article {
  border: 0;
  border-top: 2px solid var(--c-text);
  border-radius: 0;
  padding: var(--sp-5) 0 0;
  background: transparent;
}

#leistungen .breaks h3 {
  font-size: var(--step-2);
}

#leistungen .breaks article > p,
#prinzipien .breaks article > p:last-child {
  color: var(--c-text-muted);
  font-size: var(--step-0);
}

#leistungen .list-plain {
  margin-top: var(--sp-5);
  padding-top: 0;
}

#vorgehen .stages {
  margin-top: 0;
  gap: 0;
  border: 0;
  border-top: 2px solid var(--c-text);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

#vorgehen .stage {
  gap: var(--sp-2) var(--sp-4);
  grid-template-columns: 2.5rem minmax(0, 1fr);
  border-bottom: 1px solid var(--c-rule);
  padding: var(--sp-5) 0;
}

#vorgehen .stages > .stage:last-child {
  border-bottom: 2px solid var(--c-text);
}

#vorgehen .stage__no {
  width: auto;
  aspect-ratio: auto;
  border-radius: 0;
  padding: .35em 0 0;
  background: transparent;
  color: var(--c-accent);
  display: block;
  grid-area: 1 / 1;
}

#vorgehen .stage > h3 {
  grid-area: 1 / 2;
}

#vorgehen .stage > :not(.stage__no):not(h3) {
  grid-column: 2;
  color: var(--c-text-muted);
}

.audience {
  gap: var(--sp-6);
}

.audience-item {
  border: 0;
  border-top: 2px solid var(--c-text);
  border-radius: 0;
  padding: var(--sp-4) 0 0;
  background: transparent;
}

.audience h3,
.audience-item h3 {
  font-size: var(--step-1);
}

#zielgruppen .audience-item:first-child h3 span {
  white-space: nowrap;
}

#projekte .facets {
  gap: var(--sp-6);
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

#projekte .facets > article {
  border: 0;
  border-top: 1px solid var(--c-rule-strong);
  padding: var(--sp-4) 0 0;
}

#prinzipien .breaks > article {
  background: transparent;
}

#prinzipien .breaks .num {
  margin-bottom: var(--sp-5);
  color: var(--c-accent);
  font-size: var(--step-3);
  line-height: var(--lh-tight);
}

#prinzipien .breaks .facet__label {
  margin-bottom: var(--sp-5);
  color: var(--c-accent);
}

#prinzipien .sheet__body > .list-plain {
  max-width: var(--measure);
  border-left: var(--sp-1) solid var(--c-rule);
  padding-left: var(--sp-6);
}

#ueber-uns .figure {
  max-width: var(--measure);
}

#ueber-uns .figure img {
  width: 100%;
  height: auto;
  display: block;
}

#ueber-uns .figure figcaption {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  text-align: center;
}

#ueber-uns .facets {
  gap: var(--sp-5);
}

#ueber-uns .facets > article {
  border-top: 1px solid var(--c-rule);
  padding-top: var(--sp-4);
}

#ueber-uns .facets p {
  margin-top: var(--sp-2);
  font-weight: 650;
}

#termin .facets {
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
}

#termin .facets > article {
  border-top: 1px solid var(--c-rule);
  padding-top: var(--sp-4);
}

#termin .sheet__body > .facets .num {
  margin: var(--sp-2) 0 0;
  color: var(--c-accent);
  font-size: var(--step-1);
  font-weight: 650;
  line-height: var(--lh-tight);
}

#termin .facets h3 + p {
  margin-top: var(--sp-2);
  color: var(--c-text);
  font-weight: 650;
}

#termin .form {
  max-width: none;
  margin-top: 0;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: var(--sp-5);
  background: var(--c-bg);
}

#termin .field select {
  width: 100%;
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  padding: var(--sp-3);
  background: var(--c-bg);
  color: var(--c-text);
  font: inherit;
}

#termin .field select:focus-visible {
  border-color: var(--c-accent);
}

#termin .form > .note {
  margin-top: 0;
}

#termin .form > .button {
  justify-self: start;
}

#termin .form > fieldset {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
  grid-column: 1 / -1;
}

#termin .form > fieldset:first-of-type {
  container-type: inline-size;
}

#termin .form fieldset > legend {
  padding: 0;
  font-size: var(--step-1);
  font-weight: 650;
}

#termin .form fieldset > p {
  margin-top: 0;
  color: var(--c-text-muted);
  font-size: var(--step--1);
}

#termin .form fieldset .contact-line {
  margin-top: 0;
  gap: var(--sp-3);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  display: grid;
}

#termin .form fieldset .contact-line strong {
  font-size: var(--step--1);
  text-align: center;
}

#termin .form fieldset .contact-line .more {
  margin-top: 0;
  border: 0;
  padding: var(--sp-2);
  background: transparent;
  color: var(--c-accent);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

#termin .form fieldset .contact-line .more:last-child {
  text-align: right;
}

#termin .form fieldset .contact-line .more:disabled {
  color: var(--c-text-muted);
  cursor: not-allowed;
  opacity: .5;
}

#termin .table-wrap {
  margin-top: 0;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
}

#termin .table-wrap table {
  table-layout: fixed;
}

#termin .table-wrap caption {
  border-bottom: 1px solid var(--c-rule);
  padding: var(--sp-3);
  color: var(--c-text);
  font-weight: 650;
  text-align: left;
}

#termin .table-wrap th,
#termin .table-wrap td {
  padding: var(--sp-1);
  text-align: center;
}

#termin .table-wrap th {
  color: var(--c-text-muted);
  font-family: var(--font-num);
  font-size: var(--step--1);
}

#termin .table-wrap td {
  border-right: 1px solid var(--c-rule);
}

#termin .table-wrap td:last-child {
  border-right: 0;
}

#termin .table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

#termin .table-wrap button {
  width: min(100%, var(--sp-7));
  aspect-ratio: 1;
  margin-inline: auto;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  font: inherit;
}

#termin .table-wrap button:hover:not(:disabled) {
  border-color: var(--c-accent);
}

#termin .table-wrap button[data-active="true"] {
  border-color: var(--c-accent);
  background: var(--c-bg-sunk);
}

#termin .table-wrap button[data-has-slot="true"] {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-accent-on);
}

#termin .table-wrap button[data-active="true"][data-has-slot="true"] {
  box-shadow: inset 0 0 0 2px var(--c-accent-on);
}

#termin .table-wrap button:disabled {
  color: var(--c-text-muted);
  cursor: not-allowed;
  opacity: .35;
}

#termin .form fieldset .facets {
  margin-top: 0;
  gap: var(--sp-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#termin .form > fieldset:first-of-type > .facets {
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
}

#termin .form > fieldset:first-of-type > .facets > .table-wrap:nth-child(2) {
  display: none;
}

@container (min-width: 46rem) {
  #termin .form > fieldset:first-of-type > .facets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #termin .form > fieldset:first-of-type > .facets > .table-wrap:nth-child(2) {
    display: block;
  }
}

#termin .form fieldset .facets .button {
  width: 100%;
  border-color: var(--c-rule-strong);
  padding: var(--sp-3);
  background: var(--c-bg);
  color: var(--c-text);
  text-align: center;
}

#termin .form fieldset .facets .button[aria-pressed="true"] {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-accent-on);
}

#termin .form fieldset .facets .button:disabled {
  border-color: var(--c-rule);
  background: var(--c-bg-sunk);
  color: var(--c-text-muted);
  cursor: not-allowed;
  opacity: .4;
}

#termin .form fieldset:disabled .facets .button {
  cursor: not-allowed;
  opacity: .5;
}

#termin .form .note .list-plain {
  margin-top: var(--sp-3);
}

#termin .form .note .more {
  margin-top: 0;
  border: 0;
  padding: var(--sp-1) var(--sp-2);
  background: transparent;
  color: var(--c-accent);
  cursor: pointer;
  font: inherit;
}

#kontakt {
  border-top: 0;
  background: var(--c-accent);
  color: var(--c-accent-on);
}

#kontakt .sheet__mark,
#kontakt .lede,
#kontakt .contact-line a,
#kontakt .more {
  color: var(--c-accent-on);
}

#kontakt .contact-line {
  font-size: var(--step-2);
}

#kontakt .more {
  border: 2px solid currentColor;
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-5);
  text-decoration: none;
}

#kontakt .more:hover {
  background: var(--c-accent-on);
  color: var(--c-accent);
}

#kontakt .note {
  border: 1px solid currentColor;
  background: transparent;
  color: var(--c-accent-on);
}

.site-foot {
  margin-top: 0;
  background: var(--c-bg-sunk);
}

@media (width >= 44rem) {
  #ueber-uns .facets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #leistungen .breaks,
  #prinzipien .breaks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #leistungen .breaks > article:last-child,
  #prinzipien .breaks > article:last-child {
    grid-column: 1 / -1;
  }

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

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

  #termin .sheet__body > .facets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #termin .form > .field:last-of-type,
  #termin .form > .note,
  #termin .form > .button {
    grid-column: 1 / -1;
  }

  #termin .form fieldset .facets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width >= 52rem) {
  .sheet {
    gap: var(--sp-8);
    grid-template-columns: 8rem minmax(0, 1fr);
  }

  .sheet__mark {
    position: sticky;
    top: var(--sp-9);
  }

  .hero .sheet__mark {
    position: static;
  }
}

@media (width >= 56rem) and (width < 64rem) {
  .audience {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audience-item:last-child {
    grid-column: 1 / -1;
  }
}

@media (width >= 64rem) {
  #leistungen .breaks,
  #prinzipien .breaks,
  .audience {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #leistungen .breaks > article:last-child,
  #prinzipien .breaks > article:last-child,
  .audience-item:last-child {
    grid-column: auto;
  }

  #termin .form fieldset .facets {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  #vorgehen .stages {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #vorgehen .stage,
  #vorgehen .stage:nth-child(even) {
    min-height: calc(var(--sp-10) + var(--sp-7));
    border-right: 1px solid var(--c-rule);
    border-bottom: 2px solid var(--c-text);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #vorgehen .stage:last-child {
    border-right: 0;
  }

  #vorgehen .stage__no,
  #vorgehen .stage > h3,
  #vorgehen .stage > :not(.stage__no):not(h3) {
    grid-area: auto;
    grid-column: auto;
  }
}

@media (width < 44rem) {
  .site-head__inner {
    flex-wrap: nowrap;
    align-items: center;
  }

  .site-nav {
    width: auto;
    margin-left: auto;
    overflow: visible;
  }

  .site-nav ul {
    width: auto;
    padding-inline: 0;
    flex-wrap: nowrap;
  }

  .site-nav li:not(:last-child) {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-nav a,
  .button,
  .more {
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
  }

  .button:hover:not(:disabled) {
    transform: translateY(calc(var(--sp-1) * -1));
  }
}