:root {
  --ease-3: cubic-bezier(.25, 0, .3, 1);
  --border-size-2: 2px;
  --size-1: .25rem;
  --font-weight-7: 700;
  --font-lineheight-1: 1.25;
  --border-size-1: 1px;
  --font-lineheight-2: 1.375;
  --font-weight-6: 600;
  --size-2: .5rem;
  --size-3: 1rem;
  --choco-1: #fce1bc;
  --shadow-2: 
    0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
  --shadow-3: 
    0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
}
.recipe-card-image {
  box-shadow: inset var(--text-1) 0 0 0 2px, inset var(--surface-1) 0 0 0 4px,
    inset var(--text-1) 0 0 0 5px, inset var(--surface-1) 0 0 0 7px,
    inset var(--text-1) 0 0 0 10px, inset var(--surface-1) 0 0 0 15px,
    inset var(--text-1) 0 0 0 16px;
  padding: 22px;
}
.card-archive-list {
  display: flex;
  flex-flow: row wrap;
  gap: var(--size-2);
  margin-inline: auto;
  max-inline-size: var(--detail-view-container-inline-size);
  padding: var(--size-3);
}
.card-archive-list > li {
    display: contents;
  }
.card-card {
  align-self: start;
  background-color: var(--surface-1);
  border: 1px solid var(--choco-1);
  border-radius: var(--border-size-1);
  box-shadow: var(--shadow-2);
  flex: 0 1 min(calc(7rem + 13vw), 24rem);
  overflow: hidden;
  padding: var(--size-2);
  position: relative;
  transform: rotate(var(--card-rotate));
  transition: box-shadow 0.1s ease-out, transform 0.1s ease-out;
  z-index: var(--card-z-index);
}
:is(.card-card:hover,.card-card:focus-within) {
    box-shadow: var(--shadow-3);
    transform: rotate(calc(-0.5 * var(--card-rotate)));
    z-index: 15;
  }
.card-card__series {
  background-color: var(--text-1);
  color: var(--surface-1);
  display: flex;
  font-variant-numeric: initial;
  line-height: 1;
  margin-block: calc(-1 * var(--size-2)) var(--size-2);
  margin-inline: calc(-1 * var(--size-2));
  padding-block: var(--size-1);
  padding-inline: var(--size-2);
}
.card-card__headline {
  font-size: var(--u-font-size-3);
  line-height: 1.1;
}
.card-card__headline a {
    color: var(--text-1);
    text-decoration: none;
  }
.card-card__headline a::after {
      content: '';
      inset: 0;
      position: absolute;
    }
.facets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs, 0.5rem);
  margin-block: var(--space-xs, 0.75rem);
  margin-inline: 0;
  padding: 0;
}
.facet-chip {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: var(--border-size-1, 1px) solid var(--text-1);
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  font-size: var(--u-font-size--2, 0.8125rem);
  min-block-size: 2.75rem;
  padding-block: var(--space-3xs, 0.25rem);
  padding-inline: var(--space-2xs, 0.5rem);
  transition: background-color 0.15s var(--ease-3, ease),
    color 0.15s var(--ease-3, ease);
}
.facet-chip:hover {
    background: var(--accent);
    color: var(--surface-1);
  }
.facet-chip:focus-visible {
    outline: var(--border-size-2, 2px) solid var(--link);
    outline-offset: var(--border-size-2, 2px);
  }
.facet-chip[aria-pressed='true'] {
    background: var(--text-1);
    border-color: var(--text-1);
    color: var(--surface-1);
  }
.kochbuch-page {
  margin-inline: auto;
  max-inline-size: var(--detail-view-container-inline-size);
  padding-block: var(--space-m);
  padding-inline: var(--space-s);
}
.cookbook-heading {
  font-size: var(--u-font-size-2);
  margin-block-end: var(--space-m);
  text-align: center;
}
.cookbook-meta {
  font-size: var(--u-font-size--1);
  margin-block: var(--space-xs) 0;
}
.cookbook-empty {
  padding-block: var(--space-l);
  text-align: center;
}
.cookbook-remove {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: var(--border-size-1) solid var(--text-1);
  color: var(--text-1);
  cursor: pointer;
  font: inherit;
  font-size: var(--u-font-size--2);
  margin-block-start: var(--space-2xs);
  padding-block: var(--space-3xs);
  padding-inline: var(--space-2xs);
  position: relative;
  transition: background-color 0.15s var(--ease-3), color 0.15s var(--ease-3);

  /* z-index lifts button above .card-card__headline a::after full-card link overlay */
  z-index: 1;
}
.cookbook-remove:hover {
    background: var(--accent);
    color: var(--surface-1);
  }
.cookbook-remove:focus-visible {
    outline: var(--border-size-2) solid var(--link);
    outline-offset: var(--border-size-2);
  }
cookbook-page .sr-only {
  block-size: 1px;
  border: 0;
  clip-path: inset(50%);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-color: 220 40% 2%;
    --shadow-strength: 25%;
  }
}