/* The shop's own styles. Every colour, size and spacing comes from tokens.css
   or from docs/gestaltung.md, §3 and §4; nothing here invents a value.
   Breakpoints: phone to 599px, tablet to 959px, desktop from 960px (§3). */

/* --- Base --- */

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

[hidden] {
  display: none !important;
}

/* The footer sits at the bottom of a short page. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--farbe-grund);
  color: var(--farbe-tinte);
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
  line-height: var(--zeile-text);
}

h1,
h2,
h3 {
  margin: 0 0 var(--abstand-4);
  font-family: var(--schrift-titel);
  font-weight: 600;
}

h1 {
  font-size: var(--groesse-h1);
  line-height: var(--zeile-h1);
}

h2 {
  font-size: var(--groesse-h2);
  line-height: var(--zeile-h2);
}

h3 {
  font-size: var(--groesse-h3);
  line-height: var(--zeile-h3);
}

/* §3: H1 on a phone, 32 / 36 px. */
@media (max-width: 599px) {
  h1 {
    font-size: 2rem;
    line-height: 1.125;
  }
}

p {
  margin: 0 0 var(--abstand-4);
}

a {
  color: var(--farbe-wald);
}

a:hover {
  color: var(--farbe-wald-dunkel);
}

ul {
  margin: 0;
  padding: 0;
}

/* §4 »Schaltflächen«: focus always visible, 2px with 2px offset. */
:focus-visible {
  outline: 2px solid var(--farbe-fokus);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon {
  flex: none;
  width: 24px;
  height: 24px;
}

.icon--small {
  width: 18px;
  height: 18px;
}

.small {
  font-size: var(--groesse-klein);
  line-height: var(--zeile-klein);
  color: var(--farbe-tinte-leise);
}

/* --- Demo notice, §4 »Demo-Balken« --- */

.demo-notice {
  background: var(--farbe-demo);
  color: var(--farbe-tinte);
  font-size: var(--groesse-klein);
  line-height: var(--zeile-klein);
  padding: var(--abstand-2) var(--abstand-4);
  text-align: center;
}

/* --- Header, §4 »Kopf« --- */

.site-header {
  background: var(--farbe-flaeche);
  border-bottom: 1px solid var(--farbe-linie);
}

.site-header__bar,
.site-nav__list {
  max-width: var(--breite-max);
  margin: 0 auto;
  padding: 0 var(--abstand-4);
}

.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-4);
  padding-top: var(--abstand-3);
  padding-bottom: var(--abstand-3);
}

.site-header__logo {
  display: inline-block;
  min-height: var(--hoehe-ziel);
}

.site-header__logo svg {
  display: block;
  height: var(--hoehe-ziel);
  width: auto;
}

.search {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.search__field {
  width: 100%;
  max-width: 480px;
}

.site-header__tools {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
}

.icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hoehe-ziel);
  min-height: var(--hoehe-ziel);
  border: 0;
  border-radius: var(--radius-mittel);
  background: none;
  color: var(--farbe-tinte);
  cursor: pointer;
}

.icon-link__count {
  position: absolute;
  top: var(--abstand-1);
  right: 0;
  min-width: 20px;
  padding: 0 var(--abstand-1);
  border-radius: var(--radius-klein);
  background: var(--farbe-wald);
  color: var(--farbe-flaeche);
  font-size: var(--groesse-klein);
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.menu-button {
  display: none;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1) var(--abstand-5);
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--hoehe-ziel);
  color: var(--farbe-tinte);
  font-weight: 600;
  text-decoration: none;
}

.site-nav__link:hover {
  color: var(--farbe-wald);
  text-decoration: underline;
}

/* On a phone the search takes its own row and the navigation folds away. The
   logo shrinks so that it shares its row with the icons, above its minimum of
   28 px (§2). */
@media (max-width: 599px) {
  .site-header__logo svg {
    height: var(--abstand-6);
    margin-top: var(--abstand-1);
  }

  .search {
    order: 3;
    flex-basis: 100%;
  }

  .site-header__tools {
    margin-left: auto;
  }

  .menu-button {
    display: inline-flex;
  }

  .site-nav {
    display: none;
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav__list {
    flex-direction: column;
    padding-bottom: var(--abstand-3);
  }
}

/* --- Page --- */

.page {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--breite-max);
  margin: 0 auto;
  padding: var(--abstand-6) var(--abstand-4) var(--abstand-8);
}

.section {
  margin-top: var(--abstand-7);
}

.lead {
  max-width: var(--breite-text);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  margin: 0 0 var(--abstand-4);
  padding: 0;
  list-style: none;
  font-size: var(--groesse-klein);
  line-height: var(--zeile-klein);
  color: var(--farbe-tinte-leise);
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: var(--abstand-2);
}

.list-meta {
  font-size: var(--groesse-klein);
  line-height: var(--zeile-klein);
  color: var(--farbe-tinte-leise);
}

/* --- Buttons, §4 »Schaltflächen« --- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hoehe-ziel);
  padding: 0 var(--abstand-5);
  border-radius: var(--radius-mittel);
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button--primary {
  border: 0;
  background: var(--farbe-wald);
  color: var(--farbe-flaeche);
}

.button--primary:hover,
a:hover .button--primary {
  background: var(--farbe-wald-dunkel);
  color: var(--farbe-flaeche);
}

.button--secondary {
  border: 1.5px solid var(--farbe-wald);
  background: var(--farbe-flaeche);
  color: var(--farbe-wald);
}

.button--secondary:hover {
  border-color: var(--farbe-wald-dunkel);
  color: var(--farbe-wald-dunkel);
}

.button--block {
  width: 100%;
}

.text-button {
  min-height: var(--hoehe-ziel);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Form fields, §4 »Formulare« --- */

.field-label {
  display: block;
  margin-bottom: var(--abstand-1);
  font-size: var(--groesse-klein);
  font-weight: 600;
  line-height: var(--zeile-klein);
}

.field,
.search__field {
  min-height: var(--hoehe-ziel);
  padding: 0 var(--abstand-3);
  border: 1px solid var(--farbe-rand-feld);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  color: var(--farbe-tinte);
  font: inherit;
}

.field[aria-invalid="true"] {
  border-color: var(--farbe-fehler);
}

.form-field {
  margin-bottom: var(--abstand-4);
}

.form-field .field {
  width: 100%;
  max-width: var(--breite-text);
}

/* §4 »Formulare«: the error under the field, in the error colour, with an icon. */
.field-error {
  display: flex;
  align-items: center;
  gap: var(--abstand-1);
  margin: var(--abstand-1) 0 0;
  color: var(--farbe-fehler);
  font-size: var(--groesse-klein);
  line-height: var(--zeile-klein);
}

.choices {
  margin: 0 0 var(--abstand-4);
  padding: 0;
  border: 0;
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  min-height: var(--hoehe-ziel);
  margin-bottom: var(--abstand-2);
  padding: var(--abstand-2) var(--abstand-4);
  border: 1px solid var(--farbe-rand-feld);
  border-radius: var(--radius-mittel);
  background: var(--farbe-flaeche);
  cursor: pointer;
}

.choice:has(:checked) {
  border-color: var(--farbe-wald);
  background: var(--farbe-wald-hell);
}

.choice__input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--farbe-wald);
}

.switch {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  min-height: var(--hoehe-ziel);
  padding: var(--abstand-2) 0;
  cursor: pointer;
}

.switch__input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--farbe-wald);
}

/* --- Notices, §4 »Hinweise« --- */

.info-box {
  padding: var(--abstand-3) var(--abstand-4);
  border-radius: var(--radius-mittel);
  background: var(--farbe-wald-hell);
  color: var(--farbe-wald-dunkel);
}

/* --- Images, images D6 --- */

/* The light green shows while an image loads, and in the cart for a position
   without one (images D8). The ratio holds the place before the file arrives. */
.product-card__image,
.product__image,
.thumbnail__image,
.cart-item__media,
.article-teaser__image,
.category-teaser__image,
.article__image {
  display: block;
  width: 100%;
  height: auto;
  background: var(--farbe-wald-hell);
}

.product-card__image,
.product__image,
.thumbnail__image,
.cart-item__media {
  aspect-ratio: 1;
}

.article-teaser__image,
.category-teaser__image,
.article__image {
  aspect-ratio: 3 / 2;
}

/* --- Home page: promotions, §4 »Aktionsbanner« --- */

.promotions {
  display: grid;
  gap: var(--abstand-5);
}

/* minmax(0, 1fr): a banner that grows past 3:1 must not widen its column. */
@media (min-width: 960px) {
  .promotions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* NOTE: 3:1 is a minimum, not a fixed height. Side by side at 1,200 px a banner
   is about 190 px high, less than its text box needs, and a box that clips the
   text would hide the button. The image will cover whatever height results.
   Not `aspect-ratio`: a grid item with a ratio either ignores the row's height or,
   stretched, derives a wider width from it. A strut a third as high as the
   banner is wide sets the minimum instead, and both banners stretch to the row. */
.promotion {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--abstand-4);
  border-radius: var(--radius-gross);
  color: var(--farbe-tinte);
  text-decoration: none;
}

.promotion::before {
  content: "";
  flex: none;
  width: 0;
  padding-bottom: calc(100% / 3);
}

/* The image covers the banner however high it grows, anchored right: the text box
   covers the left, where both prompts ask for a quiet area (images D9). */
.promotion__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  border-radius: var(--radius-gross);
  background: var(--farbe-wald-hell);
}

.promotion__box {
  position: relative;
  max-width: 70%;
  padding: var(--abstand-4);
  border-radius: var(--radius-mittel);
  background: color-mix(in srgb, var(--farbe-flaeche) 92%, transparent);
}

.promotion__label {
  display: inline-block;
  margin-bottom: var(--abstand-2);
  padding: 0 var(--abstand-2);
  border-radius: var(--radius-klein);
  background: var(--farbe-glut);
  color: var(--farbe-flaeche);
  font-size: var(--groesse-klein);
  font-weight: 600;
  line-height: var(--zeile-klein);
}

.promotion__title {
  margin-bottom: var(--abstand-2);
}

.promotion__text {
  margin-bottom: var(--abstand-3);
  font-size: var(--groesse-klein);
  line-height: var(--zeile-klein);
}

@media (max-width: 599px) {
  .promotion__box {
    max-width: none;
  }
}

/* --- Teasers and product grid, §4 and §5 --- */

.teaser-grid,
.category-grid,
.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-5);
  list-style: none;
}

/* minmax(0, 1fr): a card's one-line short text must not widen its column. */
@media (min-width: 600px) {
  .teaser-grid,
  .category-grid,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .category-grid,
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.article-teaser,
.category-teaser,
.product-card {
  display: block;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-mittel);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-karte);
  color: var(--farbe-tinte);
  text-decoration: none;
}

.article-teaser > :not(img),
.category-teaser > :not(img),
.product-card__link > :not(img) {
  margin-left: var(--abstand-4);
  margin-right: var(--abstand-4);
}

/* The card holds its link and »Merken« side by side (search-wishlist-sorting D3). */
.product-card {
  position: relative;
}

.product-card__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* §4 »Produktkarte«: »Merken« as an icon button at the image's top right. */
.product-card__wish {
  position: absolute;
  top: var(--abstand-2);
  right: var(--abstand-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hoehe-ziel);
  height: var(--hoehe-ziel);
  border: 1.5px solid var(--farbe-wald);
  border-radius: var(--radius-mittel);
  background: var(--farbe-flaeche);
  color: var(--farbe-wald);
  cursor: pointer;
}

/* »Gemerkt«: light green, the heart filled (§4 »Schaltflächen«). */
.product-card__wish[aria-pressed="true"],
.wish-button[aria-pressed="true"] {
  background: var(--farbe-wald-hell);
  color: var(--farbe-wald-dunkel);
}

.product-card__wish[aria-pressed="true"] .icon path,
.wish-button[aria-pressed="true"] .icon path {
  fill: currentColor;
}

.wish-button {
  gap: var(--abstand-2);
}

.product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
}

/* Above the product list, on the right (§4 »Sortierung«). Styled by the id, which the
   specification promises, not by the classes, which it does not. */
.list-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  margin-bottom: var(--abstand-4);
}

.list-bar .list-meta {
  margin: 0;
}

#dz-sortierung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
  font-size: var(--groesse-klein);
  line-height: var(--zeile-klein);
}

#dz-sortierung button {
  min-height: var(--hoehe-ziel);
  padding: 0 var(--abstand-3);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-mittel);
  background: var(--farbe-flaeche);
  color: var(--farbe-tinte);
  font: inherit;
  cursor: pointer;
}

#dz-sortierung button[aria-pressed="true"] {
  border-color: var(--farbe-wald);
  background: var(--farbe-wald-hell);
  color: var(--farbe-wald-dunkel);
  font-weight: 600;
}

.article-teaser__category,
.article-teaser__date {
  margin-top: var(--abstand-3);
  margin-bottom: var(--abstand-2);
  font-size: var(--groesse-klein);
  line-height: var(--zeile-klein);
  color: var(--farbe-tinte-leise);
}

.article-teaser__title {
  margin-bottom: 0;
}

.category-teaser__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-2);
  margin-top: var(--abstand-3);
  margin-bottom: var(--abstand-3);
}

.product-card__name {
  display: -webkit-box;
  margin-top: var(--abstand-3);
  margin-bottom: var(--abstand-1);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.product-card__text {
  margin-bottom: var(--abstand-2);
  overflow: hidden;
  font-size: var(--groesse-klein);
  line-height: var(--zeile-klein);
  color: var(--farbe-tinte-leise);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card__price,
.price {
  font-family: var(--schrift-titel);
  font-size: var(--groesse-preis);
  font-weight: 600;
}

.product-card__price {
  margin-bottom: var(--abstand-2);
}

.product-card__variants {
  font-size: var(--groesse-klein);
  line-height: var(--zeile-klein);
  color: var(--farbe-tinte-leise);
}

/* --- Product page, §5 »Produktseite« --- */

.product {
  display: grid;
  gap: var(--abstand-6);
}

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

.product__info > * + * {
  margin-top: var(--abstand-4);
}

.product__image {
  border-radius: var(--radius-mittel);
}

/* The colours' thumbnails below the image, marked like the variant buttons
   (images D7). */
.thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  margin-top: var(--abstand-3);
}

.thumbnail {
  width: 72px;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid var(--farbe-linie);
  border-radius: var(--radius-mittel);
  background: var(--farbe-flaeche);
  cursor: pointer;
}

.thumbnail[aria-pressed="true"] {
  border-color: var(--farbe-wald);
}

.variants__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
}

.variant {
  min-height: var(--hoehe-ziel);
  padding: 0 var(--abstand-4);
  border: 1.5px solid var(--farbe-wald);
  border-radius: var(--radius-mittel);
  background: var(--farbe-flaeche);
  color: var(--farbe-wald);
  font: inherit;
  cursor: pointer;
}

.variant[aria-pressed="true"] {
  background: var(--farbe-wald-hell);
  color: var(--farbe-wald-dunkel);
  font-weight: 600;
}

.quantity__field {
  width: 96px;
}

.features {
  padding-left: var(--abstand-5);
}

/* --- Cart, §5 »Warenkorb« --- */

.cart__layout {
  display: grid;
  gap: var(--abstand-6);
  align-items: start;
}

@media (min-width: 960px) {
  .cart__layout {
    grid-template-columns: 2fr 1fr;
  }
}

/* The positions take at least the viewport's height, so that #dz-versandhinweis
   below them starts below the fold (specification, »Kennzeichnung für Trigger«;
   cart-checkout D11). */
.cart__positions {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.cart__list {
  flex: 1 0 auto;
  list-style: none;
  border-top: 1px solid var(--farbe-linie);
  margin-bottom: var(--abstand-5);
}

.cart-item__quantity {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  margin-top: var(--abstand-2);
}

.cart-item__field {
  width: 80px;
}

.cart-item__remove {
  color: var(--farbe-wald);
  font-size: var(--groesse-klein);
}

.coupon {
  margin-bottom: var(--abstand-5);
}

.coupon__row {
  display: flex;
  gap: var(--abstand-2);
}

.coupon__field {
  flex: 1 1 auto;
  min-width: 0;
}

.coupon__ok {
  margin: var(--abstand-2) 0 0;
  padding: var(--abstand-2) var(--abstand-3);
  border-radius: var(--radius-klein);
  background: var(--farbe-glut-hell);
  color: var(--farbe-tinte);
  font-size: var(--groesse-klein);
  line-height: var(--zeile-klein);
}

.sums__row--discount dd {
  color: var(--farbe-glut);
}

.cart-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: var(--abstand-4);
  align-items: start;
  padding: var(--abstand-4) 0;
  border-bottom: 1px solid var(--farbe-linie);
}

.cart-item__image {
  display: block;
  width: 100%;
  height: 100%;
}

.cart-item__name {
  font-weight: 600;
}

.cart-item__details p {
  margin-bottom: 0;
}

.cart-item__price {
  font-weight: 600;
}

.cart__summary {
  padding: var(--abstand-5);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-mittel);
  background: var(--farbe-flaeche);
}

.sums {
  margin: 0 0 var(--abstand-4);
}

.sums__row {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-4);
  padding: var(--abstand-2) 0;
}

.sums__row dd {
  margin: 0;
}

.sums__row--total {
  border-top: 1px solid var(--farbe-linie);
  font-weight: 600;
}

/* --- Checkout, §5 »Bestellvorgang 1–3« and »Bestätigung« --- */

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2) var(--abstand-5);
  margin: 0 0 var(--abstand-5);
  padding: 0;
  list-style: none;
  color: var(--farbe-tinte-leise);
}

.steps__item.is-current {
  color: var(--farbe-wald);
  font-weight: 600;
}

.checkout__layout {
  display: grid;
  gap: var(--abstand-6);
  align-items: start;
}

@media (min-width: 960px) {
  .checkout__layout {
    grid-template-columns: 2fr 1fr;
  }
}

.checkout__main > .info-box {
  margin-bottom: var(--abstand-5);
}

.checkout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
  margin-top: var(--abstand-5);
}

.summary {
  padding: var(--abstand-5);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-mittel);
  background: var(--farbe-flaeche);
}

.summary__list {
  margin-bottom: var(--abstand-4);
  list-style: none;
}

.summary__item {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-4);
  padding: var(--abstand-1) 0;
  font-size: var(--groesse-klein);
  line-height: var(--zeile-klein);
}

/* §5 »Bestätigung«: the order number large, but inside its sentence, which
   texte.json delivers as one. */
.order-number__id {
  font-family: var(--schrift-titel);
  font-size: var(--groesse-h3);
  white-space: nowrap;
}

/* --- Blog, newsletter, contact and legal pages, §5 --- */

.article-layout {
  display: grid;
  gap: var(--abstand-6);
  align-items: start;
}

@media (min-width: 960px) {
  .article-layout {
    grid-template-columns: minmax(0, var(--breite-text)) minmax(0, 1fr);
  }
}

.article__category,
.article__meta {
  margin-top: var(--abstand-4);
  font-size: var(--groesse-klein);
  line-height: var(--zeile-klein);
  color: var(--farbe-tinte-leise);
}

.article__text {
  max-width: var(--breite-text);
}

.article__text h2 {
  margin-top: var(--abstand-6);
}

.article__products {
  margin-top: var(--abstand-6);
  padding: var(--abstand-5);
  border-radius: var(--radius-mittel);
  background: var(--farbe-wald-hell);
}

/* The box sits beside a sidebar: at most two cards a row. */
@media (min-width: 600px) {
  .article__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.newsletter--sidebar {
  padding: var(--abstand-5);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-mittel);
  background: var(--farbe-flaeche);
}

.newsletter__title {
  font-size: var(--groesse-h3);
  line-height: var(--zeile-h3);
}

.newsletter .field {
  width: 100%;
}

.text-page {
  max-width: var(--breite-text);
}

.mail-card {
  margin-top: var(--abstand-5);
  padding: var(--abstand-5);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-mittel);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-karte);
}

.mail-card__subject {
  font-size: var(--groesse-h3);
  line-height: var(--zeile-h3);
}

.field--multiline {
  min-height: calc(var(--hoehe-ziel) * 3);
  padding-top: var(--abstand-2);
  padding-bottom: var(--abstand-2);
  resize: vertical;
}

.contact .field {
  width: 100%;
}

.contact .info-box {
  margin-top: var(--abstand-4);
}

/* The legal pages are drafts until the Academy's review (D6). */
.draft-note {
  padding: var(--abstand-3) var(--abstand-4);
  border-radius: var(--radius-mittel);
  background: var(--farbe-glut-hell);
  color: var(--farbe-tinte);
  font-weight: 600;
}

.outline {
  margin: 0 0 var(--abstand-4);
  padding-left: var(--abstand-5);
}

.outline li + li {
  margin-top: var(--abstand-2);
}

/* --- Footer, §4 »Fuß« --- */

.site-footer {
  padding: var(--abstand-7) 0 var(--abstand-5);
  background: var(--farbe-wald-dunkel);
  color: var(--farbe-grund);
}

.site-footer a,
.site-footer .text-button {
  color: var(--farbe-grund);
}

.site-footer__columns,
.site-footer__line {
  max-width: var(--breite-max);
  margin: 0 auto;
  padding-left: var(--abstand-4);
  padding-right: var(--abstand-4);
}

.site-footer__columns {
  display: grid;
  gap: var(--abstand-5);
}

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

/* Three columns of links, the newsletter form beside them (§4 »Fuß«). */
@media (min-width: 960px) {
  .site-footer__columns {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr);
  }
}

/* A primary button would hardly stand out from the dark footer. */
.site-footer .button--primary {
  background: var(--farbe-flaeche);
  color: var(--farbe-wald-dunkel);
}

.site-footer .button--primary:hover {
  background: var(--farbe-wald-hell);
  color: var(--farbe-wald-dunkel);
}

.site-footer .newsletter__title {
  font-size: var(--groesse-h3);
  line-height: var(--zeile-h3);
}

/* The error colour has too little contrast on the dark footer; on its own light
   ground it keeps the colour §4 asks for. */
.site-footer .field-error {
  display: inline-flex;
  padding: var(--abstand-1) var(--abstand-2);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
}

.site-footer__heading {
  font-size: var(--groesse-h3);
  line-height: var(--zeile-h3);
}

.site-footer__list {
  list-style: none;
}

.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hoehe-ziel);
}

.site-footer__line {
  padding-top: var(--abstand-5);
  font-size: var(--groesse-klein);
  line-height: var(--zeile-klein);
}

/* --- Consent banner, §4 »Consent-Banner« --- */

.consent {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--abstand-4);
  background: color-mix(in srgb, var(--farbe-tinte) 50%, transparent);
}

.consent__dialog {
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  overflow: auto;
  padding: var(--abstand-6);
  border-radius: var(--radius-gross);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-ebene);
}

.consent__title {
  font-size: var(--groesse-h3);
  line-height: var(--zeile-h3);
}

/* The three buttons equal in size and look (§4; Class 6.1 checks it). */
.consent__choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-3);
}

.consent__choices .button {
  padding: 0 var(--abstand-3);
}

.consent__settings {
  margin-top: var(--abstand-5);
  padding-top: var(--abstand-4);
  border-top: 1px solid var(--farbe-linie);
}

.consent__settings .button {
  margin-top: var(--abstand-3);
}

/* On a phone: a sheet at the bottom, at most 70 % of the height, buttons stacked. */
@media (max-width: 599px) {
  .consent {
    align-items: flex-end;
    padding: 0;
  }

  /* Room on the right for the practice-mode switch, which stays above it. */
  .consent__dialog {
    max-height: 70vh;
    border-radius: var(--radius-gross) var(--radius-gross) 0 0;
    padding: var(--abstand-5) calc(var(--hoehe-ziel) + var(--abstand-2)) var(--abstand-5)
      var(--abstand-5);
  }

  .consent__choices {
    grid-template-columns: 1fr;
  }
}

/* --- Practice mode, §4 »Übungsmodus« --- */

.practice__toggle {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 30;
  min-width: var(--hoehe-ziel);
  padding: var(--abstand-4) var(--abstand-2);
  border: 0;
  border-radius: var(--radius-mittel) 0 0 var(--radius-mittel);
  background: var(--farbe-uebung);
  color: var(--farbe-uebung-text);
  font-family: var(--schrift-text);
  font-size: var(--groesse-klein);
  font-weight: 600;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  cursor: pointer;
}

.practice__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: 360px;
  max-width: 100%;
  overflow: auto;
  padding: var(--abstand-5) var(--abstand-7) var(--abstand-5) var(--abstand-5);
  background: var(--farbe-uebung);
  color: var(--farbe-uebung-text);
  font-size: var(--groesse-klein);
  line-height: var(--zeile-klein);
}

.practice__panel :focus-visible {
  outline-color: var(--farbe-uebung-akzent);
}

@media (max-width: 599px) {
  .practice__panel {
    width: 100%;
  }
}

.practice__status {
  display: grid;
  gap: var(--abstand-1);
  padding: var(--abstand-3);
  border: 1px solid var(--farbe-uebung-text);
  border-radius: var(--radius-klein);
  font-family: var(--schrift-code);
  font-size: var(--groesse-klein);
}

.practice__status.is-active {
  border-color: var(--farbe-uebung-akzent);
  color: var(--farbe-uebung-akzent);
}

.practice__field {
  margin-bottom: var(--abstand-3);
}

.practice__field label {
  display: block;
  margin-bottom: var(--abstand-1);
  font-weight: 600;
}

.practice__input {
  width: 100%;
  min-height: var(--hoehe-ziel);
  padding: 0 var(--abstand-3);
  border: 1px solid var(--farbe-uebung-text);
  border-radius: var(--radius-klein);
  background: var(--farbe-uebung);
  color: var(--farbe-uebung-text);
  font-family: var(--schrift-code);
  font-size: var(--groesse-klein);
}

.practice .switch__input {
  accent-color: var(--farbe-uebung-akzent);
}

.practice__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-2);
  margin: var(--abstand-3) 0 var(--abstand-4);
}

.practice__button {
  min-height: var(--hoehe-ziel);
  padding: 0 var(--abstand-2);
  border: 1px solid var(--farbe-uebung-text);
  border-radius: var(--radius-mittel);
  background: none;
  color: var(--farbe-uebung-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.practice__faults summary {
  min-height: var(--hoehe-ziel);
  padding: var(--abstand-2) 0;
  font-weight: 600;
  cursor: pointer;
}

.practice .switch:has(:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}