@charset "UTF-8";
/* castoro-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Castoro";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/castoro/castoro-v20-latin-regular.woff2") format("woff2");
}
/* castoro-italic - latin */
@font-face {
  font-display: swap;
  font-family: "Castoro";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/castoro/castoro-v20-latin-italic.woff2") format("woff2");
}
/* oswald-200 - latin */
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/oswald/oswald-v57-latin-200.woff2") format("woff2");
}
/* oswald-300 - latin */
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/oswald/oswald-v57-latin-300.woff2") format("woff2");
}
/* oswald-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/oswald/oswald-v57-latin-regular.woff2") format("woff2");
}
/* oswald-500 - latin */
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/oswald/oswald-v57-latin-500.woff2") format("woff2");
}
/* oswald-600 - latin */
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/oswald/oswald-v57-latin-600.woff2") format("woff2");
}
/* oswald-700 - latin */
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/oswald/oswald-v57-latin-700.woff2") format("woff2");
}
.accordion {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.accordion-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  background: #fff;
}
.accordion-item:last-child {
  border-bottom: none;
}
.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem 1.8rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #302621;
  background: #fff;
  cursor: pointer;
  border: none;
  text-align: left;
  transition: background 200ms ease, color 200ms ease;
  gap: 1rem;
}
.accordion-header:hover {
  color: #01696f;
  background: #f0f7f7;
}
.accordion-header.is-active {
  color: #fff;
  background: #ba0c2f;
}
.accordion-header.is-active .accordion-icon {
  transform: rotate(0deg); /* zeigt nach unten = offen */
}
.accordion-header.is-active .accordion-number {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.accordion-header.not-active {
  color: #302621;
  background: #bbb;
}
.accordion-header.not-active:hover {
  cursor: default;
}
.accordion-header.selected {
  color: #efe9de;
  background: #01696f;
}
.accordion-header.selected .accordion-number {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Dreieck-Icon */
.accordion-icon {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid currentColor;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  transform: rotate(-90deg); /* zeigt nach rechts = geschlossen */
}

/* Number badge */
.accordion-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(1, 105, 111, 0.1);
  color: #01696f;
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms, color 200ms;
}

.accordion-body {
  display: none;
  overflow: hidden;
  background: #e8e8e8;
}
.accordion-body.is-active {
  display: block;
}

.accordion-body-inner {
  padding: 1rem 1.2rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #444;
  /* max-width: 80ch; */
}
.accordion-body-inner .content-left {
  width: 50%;
  display: inline-block;
  float: left;
}
.accordion-body-inner .content-right {
  width: 50%;
  display: inline-block;
  float: right;
}
.accordion-body-inner .divider {
  height: 20px;
}

.accordion-title {
  flex: 1;
  font-size: 28px;
  font-weight: 500;
  font-style: normal;
  font-family: "Oswald", serif;
  text-align: left;
  text-transform: none;
  line-height: 1.1;
  margin: 0;
}

.accordion-product-select-wrapper {
  position: relative;
  display: inline-block;
  border: 1px solid #aaa;
  border-radius: 7px;
  width: 97%;
  padding: 10px;
  margin-bottom: 10px;
  background: #fff;
  transition: transform 200ms ease, filter 200ms ease, background 200ms ease;
}
.accordion-product-select-wrapper:not(.disabled):hover {
  background: #f5f5ee;
  cursor: pointer;
  border: 1px solid #b91232;
  transform: scale(1.008);
  /* filter: brightness(0.92); */
}
.accordion-product-select-wrapper.disabled {
  filter: opacity(0.3);
}
.accordion-product-select-wrapper.selected {
  background: #dfd;
  cursor: default;
  border: 1px solid #b91232;
}
.accordion-product-select-wrapper img {
  display: block;
  float: left;
}
.accordion-product-select-wrapper .product-text {
  display: block;
  float: left;
  padding: 0 10px;
  width: 80%;
}
.accordion-product-select-wrapper .product-text h3 {
  padding: 0;
  line-height: 1;
  margin: 0 0 10px 0;
}
.accordion-product-select-wrapper .product-text p {
  font-size: 16px;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}
.accordion-product-select-wrapper .product-price {
  position: absolute;
  right: 10px;
  bottom: 0px;
  font-size: 20px;
  /* Castoro Regular (400) — bewusst nicht Oswald 700,
     damit der Preis sich in den Produktboxen typografisch ruhig
     einordnet und nicht so prominent wirkt wie z.B. die
     Gesamtsumme in der checkorder.php. */
  font-weight: 400;
}

/* HINWEIS: Alle font-weights in diesem File sind bewusst 400 (Castoro
   Regular). Castoro hat kein Bold-File — höhere Werte würden vom Browser
   als Faux-Bold synthetisiert, was in Edge/Windows unscharf wirkt. */
.cal-wrap {
  display: inline-block;
  float: left;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
  padding: 1.2rem 1.3rem 1.1rem;
  margin: 0 20px 20px 0;
}

.cal-title {
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #01696f;
  margin-bottom: 0.8rem;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 42px);
  gap: 5px;
}

.cal-wd {
  height: 24px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-wd.we {
  color: #d9534f;
}

.cal-day {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 400;
  color: #bbb;
  background: #f1f1ef;
  border: 2px solid transparent;
  transition: transform 130ms ease, filter 130ms ease, background 160ms ease;
  user-select: none;
  line-height: 1;
  gap: 2px;
  cursor: not-allowed;
}
.cal-day.free {
  background: #2e9e6b;
  color: #fff;
  border-color: #25865b;
  cursor: pointer;
}
.cal-day.free:hover {
  transform: scale(1.09);
  filter: brightness(0.92);
}
.cal-day.selected {
  background: #6edeab;
  color: #fff;
  border-color: #dfd;
}
.cal-day.we-day.free {
  color: #fff;
}
.cal-day.empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
  pointer-events: none;
  visibility: hidden;
}
.cal-day .wd-tiny {
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 1;
}

.cart {
  width: 100%;
  /* max-width: 720px; */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.09);
  overflow: hidden;
}

.cart-header {
  display: grid;
  grid-template-columns: 90px 1fr 90px 100px;
  padding: 0.6rem 1.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #aaa;
  border-bottom: 1px solid #eee;
}
.cart-header .col-price, .cart-header .col-total {
  text-align: right;
}

.cart-row {
  display: grid;
  grid-template-columns: 165px 1fr;
  align-items: center;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid #f0f0ee;
  gap: 0.5rem;
  transition: background 150ms;
}
.cart-row:last-child {
  border-bottom: none;
}
.cart-row:hover {
  background: #fafaf8;
}

.qty-ctrl {
  display: flex;
  align-items: center;
  gap: 5px;
  border: none;
  overflow: visible;
  width: fit-content;
}

.qty-btn {
  width: 40px;
  height: 40px;
  background: #ba0c2f;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms, transform 120ms;
  line-height: 1;
  flex-shrink: 0;
}
.qty-btn.disabled {
  cursor: not-allowed; /* "durchgestrichen" NUR wenn nicht klickbar (aktive Buttons: pointer) */
  opacity: 0.5;
}
.qty-btn:not(.disabled):hover {
  background: #da2c4f;
}
.qty-btn:not(.disabled):active {
  transform: scale(0.9);
}

.qty-val {
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  background: #f0f0ee;
  border: none;
  border-radius: 14px;
  line-height: 28px;
  -moz-appearance: textfield;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.qty-val::-webkit-outer-spin-button,
.qty-val::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.product-text {
  display: block;
  float: left;
  padding: 0 10px;
  width: 100%;
}
.product-text h3 {
  padding: 0;
  line-height: 1;
  margin: 0 0 10px 0;
}
.product-text p {
  font-size: 16px;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.col-price {
  display: inline-block;
  text-align: right;
  font-size: 16px;
  white-space: nowrap;
  margin-right: 50px;
}

.col-total {
  display: inline-block;
  text-align: right;
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
}

.cart-footer {
  background: #f9f9f7;
  border-top: 2px solid #eee;
  padding: 0.9rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.cart-subtotal,
.cart-tax,
.cart-grand {
  display: flex;
  gap: 2rem;
  font-size: 0.85rem;
  color: #666;
}

.cart-subtotal .val,
.cart-tax .val {
  font-weight: 600;
  color: #333;
}

.cart-grand {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  border-top: 1px solid #ddd;
  padding-top: 0.5rem;
  margin-top: 0.15rem;
}

.cart-grand .val {
  color: #01696f;
  font-size: 1.1rem;
}

.btn-clear {
  background: none;
  border: 1.5px solid #ddd;
  border-radius: 7px;
  padding: 0.65rem 1rem;
  font-size: 0.85rem;
  color: #aaa;
  cursor: pointer;
  transition: all 160ms;
}

.btn-clear:hover {
  border-color: #f5a0a0;
  color: #c0392b;
  background: #fff0f0;
}

.info-box {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 1rem 1.3rem;
  margin: 0 0 2rem;
  line-height: 1.5;
  font-size: 16px;
  color: #302621;
}

.check-row {
  display: grid;
  grid-template-columns: 40px 1fr 90px 100px;
  align-items: start;
  padding: 1rem 1.2rem;
  border-top: 1px solid #302621;
  border-bottom: 1px solid #302621;
  gap: 0.5rem;
  transition: background 150ms;
}
.check-row.total {
  border: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 1.5rem;
  padding: 1rem 1.2rem;
  line-height: 1.4;
}
.check-row.total .info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.check-row.total .info strong {
  font-weight: 700;
}
.check-row.total .summary {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 0.8rem;
  row-gap: 0.45rem;
  align-content: start;
}
.check-row.total .summary .label,
.check-row.total .summary .val {
  text-align: right;
  line-height: 1.2;
}
.check-row.total .summary .val {
  font-weight: 600;
}
.check-row.total .summary .big {
  font-size: 1.15em;
  font-weight: 700;
}
.check-row.address {
  grid-template-columns: 400px 1fr;
  align-items: start;
  padding: 1rem 1.2rem;
  line-height: 1;
}
.check-row.your-data {
  align-items: stretch;
  padding: 1rem 1.2rem 1.5rem;
  line-height: 1.5;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}
.check-row.your-data.single > div {
  grid-column: 2;
}
.check-row.your-data > div {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
}
.check-row.your-data .addr-label {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  line-height: 1.3;
  margin: 0 0 0.7rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.check-row.your-data address {
  font-style: normal;
  line-height: 1.35;
  margin: 0 0 0.7rem;
}
.check-row.your-data .contact {
  margin: 0;
  line-height: 1.35;
}
.check-row.agb {
  grid-template-columns: 1fr;
  align-items: start;
  padding: 1rem 1.2rem;
  line-height: 1;
}
.check-row.send {
  border: none;
  grid-template-columns: 200px 1fr;
  align-items: start;
  padding: 1rem 1.2rem;
  line-height: 1;
}
.check-row .small {
  font-size: 14px;
  font-weight: 300;
}
.check-row .qty {
  font-family: "Oswald", serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
}
.check-row .big {
  font-size: 20px;
  font-weight: 700;
}

/* Generische Lightbox/Modal — wiederverwendbar via Markup-Konvention:
   <a class="lightbox-trigger" data-lightbox="agb">AGB</a>
   <div id="lightbox-agb" class="lightbox-overlay">…</div>
   Klick auf den Trigger setzt .open auf den Overlay. JS-Handler in core.js.
   Schliessen: X-Button, Klick aufs Overlay (nicht auf Modal), ESC. */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.lightbox-overlay.open {
  display: flex;
}

.lightbox-modal {
  background: #f7f3eb;
  color: #302621;
  border-radius: 12px;
  max-width: 820px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.lightbox-header {
  display: flex;
  justify-content: flex-end;
  padding: 0.6rem 0.8rem 0;
  flex-shrink: 0;
}

.lightbox-close {
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: #888;
  padding: 0.3rem 0.7rem;
  font-family: inherit;
  transition: color 120ms;
}
.lightbox-close:hover {
  color: #302621;
}

.lightbox-body {
  overflow-y: auto;
  padding: 0 2rem 2rem;
  font-family: "Castoro", serif;
  font-weight: 400;
  color: #302621;
}
.lightbox-body > *:first-child {
  margin-top: 0;
}
.lightbox-body h1 {
  font-family: "Castoro", serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #01696f;
  margin: 0 0 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #d9c9a5;
}
.lightbox-body h2 {
  font-family: "Castoro", serif;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.3;
  color: #01696f;
  margin: 1.5rem 0 0.5rem;
}
.lightbox-body h3 {
  font-family: "Castoro", serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.3;
  color: #302621;
  margin: 1.2rem 0 0.3rem;
}
.lightbox-body p {
  font-family: "Castoro", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #302621;
  margin: 0 0 0.8rem;
}
.lightbox-body a {
  color: #01696f;
  text-decoration: underline;
}
.lightbox-body a:hover {
  color: #015a5f;
}

body.lightbox-open {
  overflow: hidden;
}

/* Responsive: auf Phone nahezu Vollbild, kleinere Paddings */
@media (max-width: 599px) {
  .lightbox-overlay {
    padding: 0.5rem;
  }
  .lightbox-modal {
    max-height: 95vh;
    border-radius: 8px;
  }
  .lightbox-body {
    padding: 0 1rem 1.2rem;
  }
  .lightbox-body h1 {
    font-size: 1.3rem;
  }
  .lightbox-body h2 {
    font-size: 1.05rem;
  }
}
body {
  color: #302621;
  background-color: #f4eee5;
  font: 18px normal arial, sans-serif;
  padding: 0;
  margin: 0;
}

header {
  display: block;
  text-align: center;
  background: #ba0c2f;
  margin: 0;
  padding: 0 14px;
  height: 60px;
}
header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
}
header .nav {
  display: inline-block;
  height: 60px;
}
header .nav img {
  float: left;
  height: 46px;
  margin-right: 35px;
  padding-top: 5px;
}
header .nav ul {
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-top: 15px;
}
header .nav ul li {
  display: inline;
  margin-right: 30px;
}
header .nav ul li i {
  color: #efe9de;
  vertical-align: middle;
}
header .nav ul li a {
  font-family: "Oswald", serif;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  color: #efe9de;
  text-decoration: none;
}
header .nav ul li a.cart-icon {
  font-size: 28px;
}
header .nav ul li a:hover {
  color: #aaa;
}
header .nav ul li a:hover i {
  color: #aaa;
}

.main {
  width: 900px;
  margin: 0 auto 0;
  padding: 0;
  padding-top: 60px;
  font-size: 18px;
  font-family: "Castoro", serif;
  color: #302621;
  line-height: 1.4;
  letter-spacing: 0;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
  font-weight: 400;
}

h1 {
  letter-spacing: -0.02em;
  color: #302621;
  font-size: 62px;
  text-align: center;
  font-family: "Oswald", serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1.1;
  margin: 60px 0 40px;
}

h2 {
  color: #302621;
  font-size: 40px;
  font-weight: 700;
  font-style: normal;
  font-family: "Oswald", serif;
  text-align: left;
  text-transform: none;
  line-height: 1.1;
  margin: 48px 0 25px;
}

/* Pre-Launch-Vorschaltseite (index.php bis 27.07.). Nutzt dieselbe
   typografische Stufe wie h2, ist aber zentriert und mit größerem
   margin-bottom für Atemraum zum Footer. */
.pre-launch-text {
  color: #302621;
  font-size: 40px;
  font-weight: 700;
  font-family: "Oswald", serif;
  text-align: center;
  line-height: 1.15;
  max-width: 900px;
  margin: 48px auto 106px;
}
.pre-launch-text .zeile {
  display: block;
}
.pre-launch-text .zeile + .zeile {
  margin-top: 1em;
}

/* Countdown auf der Vorschaltseite: die Restzeit im Marken-Rot und eine Stufe
   grösser als der umgebende Satz. Bewusst die BESTEHENDE h1-Stufe (62 / 44 / 32 px)
   — keine neue Schriftgrösse, die Oswald-Skala bleibt bei ihren vier Stufen.
   Der Span bleibt inline INNERHALB der .zeile: so behält der Block die Grösse des
   Absatzes und die em-Leerzeilen zwischen den drei Zeilen bleiben gleichmässig. */
.countdown {
  color: #ba0c2f;
  font-size: 62px;
}

/* Pre-Launch-CTA: prominenter Galerie-Vorab-Buchungslink (index.php) unter dem
   Ankündigungstext. Reuse derselben Oswald-Stufe wie .pre-launch-text/h2
   (40px → 32 → 24 responsiv, KEINE neue Stufe), zentriert, in Link-Rot; übernimmt
   den großen margin-bottom als Atemraum zum Footer. */
.pre-launch-cta {
  text-align: center;
  max-width: 900px;
  margin: 80px auto 80px;
}
.pre-launch-cta a {
  font-family: "Oswald", serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
}

h3 {
  color: #302621;
  font-size: 24px;
  font-weight: 500;
  font-style: normal;
  font-family: "Oswald", serif;
  text-align: left;
  line-height: 1.1;
  margin: 0 0 10px;
}

a, i {
  color: #ba0c2f;
}
a:hover, i:hover {
  cursor: pointer;
  color: #302621;
}

p {
  font-size: 18px;
  font-family: "Castoro", serif;
  color: #302621;
  line-height: 1.4;
  letter-spacing: 0;
  margin: 0 0 10px;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
  font-weight: 400;
}
p strong {
  font-size: 20px;
  /* Castoro 400 (per Inheritance) — Hervorhebung allein durch
     die größere font-size, kein Bold (Castoro hat kein Bold-File,
     sonst Faux-Bold + in Edge unscharf). */
  font-weight: 400;
}
p.small {
  font-size: 14px;
  font-weight: 400;
  margin: 0;
}

hr {
  margin: 12px 0;
  color: #302621;
}
hr.short {
  margin-bottom: 6px;
}

small {
  font-size: 14px;
  font-weight: 400;
  margin: 0;
}

.break {
  clear: both;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.a-left {
  text-align: left;
}

.a-center {
  text-align: center;
}

.a-right {
  text-align: right;
}

.big {
  font-size: 30px;
}

.grey {
  background-color: #404040;
}

.not-active {
  color: #aaa;
}

.res-box {
  display: block;
  width: 700px;
  border: 1px solid #302621;
  padding: 15px;
  margin: 0;
}

.hinweise li {
  margin-bottom: 15px;
}

.tage li {
  list-style-type: none;
  margin-bottom: 5px;
}

.reservierung {
  color: inherit;
}

form {
  background-color: inherit;
  font-size: 18px;
  font-family: "Castoro", serif;
  line-height: 1;
}
form input, form select, form textarea {
  color: #302621;
  background-color: #fff;
  cursor: pointer;
}
form input[type=text],
form input[type=email],
form input[type=tel],
form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* width: 100%; */
  padding: 0.5rem 0.7rem;
  font-size: 18px;
  font-family: "Castoro", serif;
  border: 1px solid #ddd;
  border-radius: 7px;
  transition: border-color 160ms;
  box-sizing: border-box;
}
form input[type=text]:hover,
form input[type=email]:hover,
form input[type=tel]:hover,
form select:hover {
  background: #f5f5ee;
  border-color: #b91232;
}
form input[type=text]:focus,
form input[type=email]:focus,
form input[type=tel]:focus,
form select:focus {
  outline: none;
  background: #f5f5ee;
  border-color: #b91232;
}
form input[type=checkbox] {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  flex-shrink: 0;
}
form input[type=radio] {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  flex-shrink: 0;
}
form input[type=submit] {
  margin-top: 15px;
  color: #fff;
  background-color: #b91232;
}
form select {
  /* Pfeil müsste in hover und focus kopiert werden */
  /*
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23aaa' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 10px;
  padding-right: 1.3rem;
  */
}
form .clickbox-group {
  display: flex;
  flex-direction: column; /* ← untereinander */
  gap: 0;
}
form .clickbox-group.is-rech {
  margin-bottom: 10px;
}
form .clickbox-group label {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.4rem;
  cursor: pointer;
  padding: 0.1rem 0.8rem 0.3rem 0.8rem;
  border-radius: 5px;
  user-select: none;
  transition: background 140ms;
  border: 1px solid transparent;
}
form .clickbox-group label:hover {
  background: #f5f5ee;
  border: 1px solid #b91232;
}
form .clickbox-group label span {
  margin-top: 0.3rem;
}
form .clickbox-group {
  /* Bewusst keine Sonder-Regel für :checked + span:
     Hervorhebung durch fettere Schrift entfällt — der ausgewählte
     Radio-Indikator davor reicht als visuelles Signal.
     (Vorher: font-weight 900 in Castoro → Faux-Bold; testweise
     Oswald 700 → wirkte typografisch fremd.) */
}
form .input-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}
form .input-group label {
  font-size: 14px;
  font-family: "Castoro", serif;
  /* Castoro hat nur 400 verfügbar — 300 würde der Browser
     sonst künstlich "verdünnen" (Faux-Light, unscharf). */
  font-weight: 400;
  color: #302621;
  letter-spacing: 0;
}

.row {
  display: flex;
  gap: 0.5rem;
  /* align-items: flex-end; */
  margin-bottom: 1rem;
}
.row .col {
  flex: 1;
}

table, tr, td {
  border: none;
}
table td.links, tr td.links, td td.links {
  width: 180px;
  font-size: 20px;
}
table td.rechts, tr td.rechts, td td.rechts {
  font-size: 26px;
  /* Castoro 400 — Hervorhebung allein durch font-size, kein Bold. */
  font-weight: 400;
}
table td.ganzklein, tr td.ganzklein, td td.ganzklein {
  font-size: 18px;
}
table td.klein, tr td.klein, td td.klein {
  font-size: 20px;
}
table td.gross, tr td.gross, td td.gross {
  font-size: 26px;
  /* Castoro 400 — Hervorhebung allein durch font-size, kein Bold. */
  font-weight: 400;
}

.btn-cta {
  padding: 1rem 1.2rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
  background: #f9f9f7;
  border-top: 1px solid #eee;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #fff;
  background: #01696f;
  border: none;
  border-radius: 7px;
  /* Padding asymmetrisch (oben mehr, unten weniger) — Castoro hat
     eine vergleichsweise hohe Cap-Height + wenig Descender-Glyphen
     in den Button-Texten ("Weiter zur Eingabe…"), dadurch wirkt der
     Text bei symmetrischem Padding leicht nach oben gerutscht.
     Mehr Top-Padding schiebt die zentrierte Content-Mitte nach unten. */
  padding: 0.75rem 1.4rem 0.55rem;
  /* Castoro Regular (400) — Oswald wirkte typografisch fremd in den
     sonst Castoro-geprägten Step-Boxen. Edge-Faux-Bold-Problem wird
     schon dadurch entschärft, dass wir bei 400 bleiben (kein Faux-Bold). */
  font-family: "Castoro", serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms, opacity 160ms;
}
.btn:hover {
  background: #015a5f;
  color: #fff;
  text-decoration: none;
}
.btn.disabled, .btn:disabled {
  background: #999;
  color: #fff;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.55;
}

.footer {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}
.footer .navigation {
  display: flex;
  align-items: center;
  gap: 0.3em;
  float: left;
  font-size: 14px;
  line-height: 1;
}
.footer .navigation a {
  font-size: 14px;
}
.footer .payment {
  display: flex;
  align-items: center;
  gap: 0.3em;
  float: right;
  font-size: 14px;
  line-height: 1;
}
.footer .payment .creditcard {
  width: 28px;
}

/*
button, .submitbutton {
	font: 16px normal arial, sans-serif;
	display: inline-block;
	margin: 0;
	padding: 12px 10px 12px 10px;
	color: #ccc;
	background-color: #66c;
	border: none;
	cursor: pointer;

	&:hover {
		color: #555;
		background-color: #fff;
	}

	&.delete-button {
		background-color: #c66;
		&:hover {
			color: #fff;
			background-color: #f00;
		}
	}

}
*/
/* R E S E R V A T I O N   B A N N E R */
.reservation-banner {
  position: fixed;
  top: 60px;
  left: 0;
  z-index: 199;
  width: 100%;
  box-sizing: border-box;
  background: #ffeec1;
  color: #302621;
  border-bottom: 1px solid #d4ad42;
  padding: 10px 14px;
  text-align: center;
  font-family: "Castoro", serif;
  font-size: 16px;
}
.reservation-banner strong {
  font-family: "Oswald", serif;
  font-size: 18px;
  font-weight: 700;
  color: #ba0c2f;
  margin: 0 4px;
}
.reservation-banner .banner-reset {
  display: inline-block;
  margin-left: 1.5em;
  font-size: 14px;
  color: #ba0c2f;
  text-decoration: underline;
  cursor: pointer;
}
.reservation-banner .banner-reset:hover {
  text-decoration: none;
  color: #302621;
}

body.has-reservation-banner .main {
  padding-top: 105px;
}

/* F O R M - V A L I D I E R U N G   (Fehler-Markierung) */
form input.has-error,
form select.has-error,
form textarea.has-error {
  border-color: #ba0c2f !important;
  background: #fdecec !important;
}

form .clickbox-group.has-error > label,
form .clickbox-group.has-error .abholung label,
form .clickbox-group.has-error .post label,
form .clickbox-group.has-error .print label {
  border-color: #ba0c2f;
  background: #fdecec;
}

.field-error {
  display: block;
  color: #ba0c2f;
  font-size: 13px;
  font-family: "Castoro", serif;
  font-weight: 400;
  margin-top: 4px;
  line-height: 1.2;
}

.error-banner {
  background: #fdecec;
  border: 1px solid #ba0c2f;
  border-radius: 7px;
  padding: 1rem 1.2rem;
  margin: 0 0 1.5rem;
  color: #302621;
  font-family: "Castoro", serif;
  font-size: 16px;
  line-height: 1.4;
}
.error-banner strong {
  display: block;
  font-family: "Oswald", serif;
  font-size: 20px;
  font-weight: 700;
  color: #ba0c2f;
  margin-bottom: 0.5rem;
}
.error-banner ul {
  margin: 0;
  padding: 0 0 0 1.4rem;
}
.error-banner ul li {
  margin-bottom: 0.2rem;
}

/* ── Zahlungs-Link-Seite (payment.php) ──────────────────────────────────
   Grauer Card-Grund wie die order.php-Accordion-Body (#e8e8e8), damit die
   weißen Formularfelder + die Zusammenfassung + Checkboxen + Button gut
   lesbar sind. Nutzt bestehende Schriftgrößen (Castoro 16 / Oswald 20). */
.pay-card {
  background: #e8e8e8;
  border-radius: 7px;
  padding: 1.2rem 1.4rem;
  margin: 0 0 1.5rem;
}

.pay-summary {
  background: #fff;
  border: 1px solid #ba0c2f;
  border-radius: 7px;
  padding: 1rem 1.2rem;
  margin: 0 0 1.3rem;
  color: #302621;
  font-family: "Castoro", serif;
  font-size: 16px;
  line-height: 1.4;
}

.pay-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.pay-summary-name strong {
  font-family: "Oswald", serif;
  font-size: 20px;
  font-weight: 700;
  color: #ba0c2f;
}

.pay-summary-total {
  font-family: "Oswald", serif;
  font-size: 20px;
  white-space: nowrap;
  color: #ba0c2f;
}

.pay-actions {
  text-align: right; /* KEIN float — das kollidierte vorher mit dem Footer */
  margin-top: 1rem;
}

.pay-open {
  text-align: center;
  margin: 0.5rem 0;
  font-family: "Castoro", serif;
  font-size: 16px;
}
.pay-open .btn {
  margin-top: 0.5rem;
}

/* payment.php – PLZ/Ort/Land auf dem Desktop über die volle Breite verteilen:
   PLZ behält seine schmale Content-Breite (80px-Inline), Ort (breit) + Land
   (mittel) füllen den Rest. Ohne das reserviert die flex:1-.col fürs 80px-PLZ
   ein volles Drittel → große Lücke. NUR Desktop (Mobile bricht sauber über die
   bestehende :has()-Regel um) und NUR .payment-page (order.php bleibt unberührt). */
@media (min-width: 600px) {
  body.payment-page form .row:has(> .col > .input-group > input[name$=plz]) {
    /* PLZ schmal (Content-Breite), Ort breit, Land mittel → volle Breite ohne Lücke */
  }
  body.payment-page form .row:has(> .col > .input-group > input[name$=plz]) > .col:nth-child(1) {
    flex: 0 0 auto;
  }
  body.payment-page form .row:has(> .col > .input-group > input[name$=plz]) > .col:nth-child(2) {
    flex: 2;
  }
  body.payment-page form .row:has(> .col > .input-group > input[name$=plz]) > .col:nth-child(3) {
    flex: 1;
  }
}
/* Hinweis-Box in STEP 4 bei Quick-Reservierung (Quick-Link-Modus).
   Bewusst zurückhaltender Stil als .error-banner — informierend, nicht warnend. */
.quick-notice {
  background: #eef6ee;
  border: 1px solid #4a8a4a;
  border-radius: 7px;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.2rem;
  color: #302621;
  font-family: "Castoro", serif;
  font-size: 15px;
  line-height: 1.45;
}
.quick-notice strong {
  font-family: "Oswald", serif;
  font-weight: 700;
  color: #2e6b2e;
  margin-right: 0.3rem;
}

/* Quick-Mode: Steps 1+2 (Tag, Schicht/Produkt) sind gelocked — die Headers
   reagieren nicht auf Klick (kein Aufklappen). Visuell als "done" über die
   bestehende .selected-Klasse (vom Restore-Pfad). Cursor und Hover-Effekte
   deaktivieren, damit es nicht so wirkt als wäre es klickbar.
   STEP 3 (Anzahl) ist dagegen BEDIENBAR (Kunde darf verringern) — Header
   und +/−-Buttons behalten ihr normales Verhalten; not-allowed zeigen die
   Buttons nur noch über den regulären .disabled-State (_cart.scss). */
body.quick-mode .accordion-item:nth-child(-n+2) .accordion-header,
body.quick-mode .cal-day,
body.quick-mode .cal-day.free,
body.quick-mode .accordion-product-select-wrapper {
  cursor: not-allowed;
}
body.quick-mode .cal-day.free:hover,
body.quick-mode .accordion-product-select-wrapper:hover {
  /* keine Hover-Effekte */
  filter: none;
}

/* Eigene Fehler-Seite für ungültige/abgelaufene Quick-Links. */
body.quick-expired .main {
  padding-top: 2rem;
}
body.quick-expired h1 {
  font-family: "Oswald", serif;
  color: #ba0c2f;
  margin-bottom: 1rem;
}

/* Erzwungener Zeilenumbruch nur auf Phone. Markup-seitig als
   <br class="phone-br"> eingestreut, wenn der natürliche Wrap an einer
   ungünstigen Stelle sitzt. Auf Desktop/Tablet versteckt. */
.phone-br {
  display: none;
}

/* =========================================================================
 *  R E S P O N S I V E
 *  Breakpoints: Phone < 600px, Tablet 600–959px, Desktop ≥ 960px
 *
 *  Desktop ist die Default-Variante (alles oben). Tablet-Regeln greifen
 *  bis 959px (also auch auf Phone), die Phone-Regeln darunter ergänzen
 *  nur das, was sich vom Tablet unterscheidet.
 * =======================================================================*/
/* ---------- T A B L E T   &   P H O N E   (≤ 959px) ---------- */
@media (max-width: 959px) {
  .main {
    width: auto;
    max-width: 720px;
    padding: 60px 16px 0;
  }
  h1 {
    font-size: 44px;
    margin: 40px 0 28px;
  }
  h2 {
    font-size: 32px;
    margin: 36px 0 18px;
  }
  .pre-launch-text {
    font-size: 32px;
    margin: 36px auto 97px;
  }
  .countdown {
    font-size: 44px;
  }
  .pre-launch-cta {
    margin: 60px auto 60px;
  }
  .pre-launch-cta a {
    font-size: 22px;
  }
  h3 {
    font-size: 22px;
  }
  .res-box {
    width: auto;
  }
  /* Header: weniger Padding, Logo-Abstand kleiner */
  header {
    padding: 0 10px;
  }
  header .nav img {
    margin-right: 16px;
  }
  header .nav ul li {
    margin-right: 14px;
  }
  header .nav ul li a {
    font-size: 16px;
  }
  /* Reservation-Banner: kleinere Schrift, Reset-Link bricht um */
  .reservation-banner {
    font-size: 14px;
    padding: 8px 14px;
  }
  .reservation-banner strong {
    font-size: 16px;
  }
  .reservation-banner .banner-reset {
    margin-left: 0.8em;
  }
  /* Accordion: kompakter */
  .accordion-header {
    padding: 1rem 1.2rem;
    gap: 0.7rem;
  }
  .accordion-title {
    font-size: 22px;
  }
  .accordion-number {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }
  .accordion-body-inner {
    padding: 0.8rem 1rem;
  }
  .accordion-body-inner .content-left,
  .accordion-body-inner .content-right {
    width: 100%;
    float: none;
  }
  /* Produkt-Auswahl: volle Breite. .product-text-Breite reserviert Platz
     für Bild (links, ~100px) UND den absolut positionierten Preis (rechts,
     ~110px inkl. Sicherheitsabstand), damit der Beschreibungstext sauber
     davor umbricht statt darunter zu laufen. */
  .accordion-product-select-wrapper {
    width: 100%;
    box-sizing: border-box;
  }
  .accordion-product-select-wrapper .product-text {
    width: calc(100% - 230px);
  }
  /* Kalender: zentriert, kein Float — darunter die Erklärtexte */
  .cal-wrap {
    display: block;
    float: none;
    margin: 0 auto 20px;
    width: fit-content;
  }
  /* STEP 4: Äußere zwei-Spalten-Zeile (Versand+Platzwunsch | Bestelldaten)
     stacken — innere .row (vname/nname etc.) bleiben in der Form.
     Inline-gap: 1rem auf der äußeren Row sorgt für vertikalen Abstand. */
  form > .row {
    flex-direction: column;
  }
  /* Cart-Header (Spaltenüberschriften) ausblenden — Reihen sind eh
     selbsterklärend mit Labels. */
  .cart-header {
    display: none;
  }
  .cart-row {
    grid-template-columns: 140px 1fr;
    padding: 0.8rem 1rem;
  }
  /* checkorder.php — Artikelzeile und Totals: kompaktere Spaltenbreiten,
     gleiche Spalten-Logik wie Desktop, nur enger. */
  .check-row {
    grid-template-columns: 36px 1fr 80px 90px;
    padding: 0.8rem 1rem;
    gap: 0.4rem;
  }
  .check-row.total {
    gap: 1rem;
    padding: 0.8rem 1rem;
  }
  .check-row.address {
    grid-template-columns: 1fr;
  }
  .check-row.send {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }
  .check-row.send .a-right {
    text-align: right;
  }
  /* Footer: kleinere Schrift, Logos kompakter */
  .footer .payment .creditcard {
    width: 24px;
  }
  body.has-reservation-banner .main {
    padding-top: 95px;
  }
}
/* ---------- P H O N E   (≤ 599px) ---------- */
@media (max-width: 599px) {
  .phone-br {
    display: inline;
  }
  .main {
    padding: 60px 12px 0;
  }
  h1 {
    font-size: 32px;
    margin: 24px 0 20px;
    line-height: 1.15;
  }
  /* return.php: die zwei einleitenden <p>-Zeilen direkt nach <h1>
     („Zahlung verbucht" + „Bestellnummer: …") auf Phone zentriert
     unter die Headline setzen. Greift nur dort, wo direkt h1 → p (→ p)
     folgt — order.php / checkorder.php haben dort eine .info-box bzw.
     .error-banner DIV dazwischen und sind nicht betroffen. */
  h1 + p,
  h1 + p + p {
    text-align: center;
  }
  h2 {
    font-size: 24px;
    margin: 28px 0 14px;
  }
  .pre-launch-text {
    font-size: 24px;
    margin: 28px auto 91px;
  }
  .countdown {
    font-size: 32px;
  }
  .pre-launch-cta {
    margin: 44px auto 44px;
  }
  .pre-launch-cta a {
    font-size: 22px;
  }
  h3 {
    font-size: 20px;
  }
  body, p {
    font-size: 16px;
  }
  /* Header: nur Logo + 1 sehr knappe Menü-Zeile */
  header .nav img {
    margin-right: 10px;
    height: 40px;
    padding-top: 8px;
  }
  header .nav ul {
    padding-top: 19px;
  }
  header .nav ul li {
    margin-right: 0;
  }
  header .nav ul li a {
    font-size: 15px;
  }
  /* Reservation-Banner: Reset-Link unter den Text */
  .reservation-banner {
    font-size: 13px;
    line-height: 1.3;
    padding: 8px 10px;
  }
  .reservation-banner strong {
    font-size: 15px;
  }
  .reservation-banner .banner-reset {
    display: block;
    margin-left: 0;
    margin-top: 2px;
    font-size: 13px;
  }
  body.has-reservation-banner .main {
    padding-top: 115px;
  }
  /* Accordion noch enger */
  .accordion-header {
    padding: 0.85rem 0.9rem;
    gap: 0.55rem;
    font-size: 1rem;
  }
  .accordion-title {
    font-size: 18px;
  }
  .accordion-number {
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
  }
  .accordion-body-inner {
    padding: 0.7rem 0.8rem;
  }
  /* Kalender: minimal kleiner, damit auch 320px-Screens passen */
  .cal-wrap {
    padding: 0.9rem 0.9rem 0.8rem;
  }
  .cal-grid {
    grid-template-columns: repeat(7, 36px);
    gap: 4px;
  }
  .cal-day {
    width: 36px;
    height: 36px;
    font-size: 0.82rem;
  }
  .cal-wd {
    font-size: 0.82rem;
  }
  /* Produkt-Auswahl: Bild ausgeblendet (Platz für Text), Preis darunter.
     <br> in der Beschreibung werden durch einen Mittelpunkt-Trenner
     ersetzt, damit der Text auf schmalen Screens nicht in 3-4 sehr
     kurzen Zeilen steht. CSS3 `content`-Replacement auf einem normalen
     Element rendert das <br> komplett neu — keine Zeilenumbruch-
     Semantik mehr. */
  .accordion-product-select-wrapper {
    padding: 8px;
  }
  .accordion-product-select-wrapper img {
    display: none;
  }
  .accordion-product-select-wrapper .product-text {
    width: 100%;
    padding: 0;
  }
  .accordion-product-select-wrapper .product-text h3 {
    font-size: 17px;
  }
  .accordion-product-select-wrapper .product-text p {
    font-size: 14px;
    /* Zeilenumbrüche in der Produktbeschreibung durch einen
       Mittelpunkt-Trenner ersetzen, damit der Text auf
       schmalen Screens nicht in 3-4 sehr kurzen Zeilen
       steht. Funktioniert per CSS3 content-Replacement auf
       einem normalen Element. Hinweis: Chrome (Desktop)
       honoriert das nicht zuverlässig — iOS Safari /
       andere Engines schon. Bewusst akzeptiert. */
  }
  .accordion-product-select-wrapper .product-text p br {
    content: " · ";
  }
  .accordion-product-select-wrapper .product-price {
    position: static;
    display: block;
    clear: both;
    text-align: right;
    padding-top: 6px;
    font-size: 18px;
  }
  /* Alle Form-Rows (auch inner) stacken. Kleiner vertikaler Abstand
     zwischen den gestackten .col-Elementen. Inline-Gap auf der
     äußeren Row (1rem) überschreibt das automatisch via Specificity. */
  form .row {
    flex-direction: column;
    gap: 0.6rem;
  }
  /* Ausnahme: die PLZ/Ort/Land-Zeile (sowohl für Liefer- als auch
     Rechnungsadresse via input[name$="plz"]). PLZ behält seine
     80px-Inline-Breite, Ort nimmt den Rest neben PLZ, Land bricht
     auf eine eigene Zeile um.
     WICHTIG: Direkt-Kind-Pfad (`> .col > .input-group > input`) — der
     :has()-Selector matched sonst JEDE Ancestor-Row, in der irgendwo
     tiefer ein PLZ-Input liegt (also auch die äußere Step-4-Row, die
     den ganzen Form-Block umschließt). Dann gewinnt diese Regel über
     das `form > .row { flex-direction: column; }`-Stacking weiter
     oben, und der ganze Form-Block bleibt zwei-spaltig → Overflow. */
  form .row:has(> .col > .input-group > input[name$=plz]) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  form .row:has(> .col > .input-group > input[name$=plz]) > .col:nth-child(1) {
    flex: 0 0 auto;
  }
  form .row:has(> .col > .input-group > input[name$=plz]) { /* PLZ — Content-Breite */ }
  form .row:has(> .col > .input-group > input[name$=plz]) > .col:nth-child(2) {
    flex: 1;
  }
  form .row:has(> .col > .input-group > input[name$=plz]) { /* Ort — füllt Rest */ }
  form .row:has(> .col > .input-group > input[name$=plz]) > .col:nth-child(3) {
    flex: 0 0 100%;
  }
  form .row:has(> .col > .input-group > input[name$=plz]) { /* Land — neue Zeile */ }
  form input[type=text],
  form input[type=email],
  form input[type=tel],
  form select {
    font-size: 16px;
    padding: 0.55rem 0.65rem;
  }
  /* Cart-Row: Qty-Ctrl + Text untereinander, Preise als eine Zeile
     über die volle Breite (Einzelpreis links, Gesamtpreis rechts). */
  .cart-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    /* Leerer Spacer-Div (3. Kind) auf Phone überflüssig */
  }
  .cart-row > div:nth-child(3) {
    display: none;
  }
  .cart-row {
    /* Preis-Wrapper (4. Kind, hat inline text-align:right) flexen:
       Einzelpreis links, Gesamtpreis rechts, gleiche Baseline. */
  }
  .cart-row > div:nth-child(4) {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .cart-row .product-text h3 {
    line-height: 1.25;
  }
  .cart-row .col-price {
    margin-right: 0;
    font-size: 14px;
  }
  .cart-row .col-total {
    font-size: 22px;
  }
  .qty-btn {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }
  .qty-val {
    width: 44px;
    height: 36px;
    font-size: 1.05rem;
  }
  /* Cart-Footer: Button + Totals untereinander zentriert */
  .btn-cta {
    flex-direction: column;
    align-items: stretch;
    padding: 0.9rem 1rem;
  }
  .btn-cta .btn {
    width: 100%;
  }
  /* checkorder.php Artikel-Zeilen — und NUR die. Die Total/Your-Data/
     Agb/Send/Address-Varianten haben eigene Layouts und sollen meine
     Article-Regeln NICHT erben (sonst landet z.B. "Einzelpreis: " auch
     vor "Versandkosten:" und überlagert das Label).
     Article-Row Layout: 3-Spalten-Grid mit Grid-Areas, oben Anzahl +
     Artikel-Beschreibung, unten Einzelpreis (mit Label) + Gesamtpreis.
     Die Header-Label-Zellen (.small) werden auf Phone ausgeblendet. */
  .check-row {
    gap: 0.4rem 0.6rem;
    padding: 0.8rem 0.9rem;
  }
  .check-row > .small {
    display: none;
  }
  .check-row:not(.total):not(.your-data):not(.agb):not(.send):not(.address) {
    grid-template-columns: 36px 1fr auto;
    grid-template-areas: "qty    article article" "price1 price1  price2";
  }
  .check-row:not(.total):not(.your-data):not(.agb):not(.send):not(.address) > .qty {
    grid-area: qty;
    font-size: 20px;
  }
  .check-row:not(.total):not(.your-data):not(.agb):not(.send):not(.address) {
    /* Artikel-Zelle (die mit dem <h3>): kleinere Schrift + engere
       line-height für die Beschreibung. Das <h3> behält seine
       eigene Größe und line-height (global definiert). */
  }
  .check-row:not(.total):not(.your-data):not(.agb):not(.send):not(.address) > div:has(h3) {
    grid-area: article;
    font-size: 13px;
    line-height: 1.25;
  }
  .check-row:not(.total):not(.your-data):not(.agb):not(.send):not(.address) {
    /* Einzelpreis-Zelle: links, mit "Einzelpreis: "-Label. */
  }
  .check-row:not(.total):not(.your-data):not(.agb):not(.send):not(.address) > .a-right:not(.small):not(.big) {
    grid-area: price1;
    text-align: left;
  }
  .check-row:not(.total):not(.your-data):not(.agb):not(.send):not(.address) > .a-right:not(.small):not(.big)::before {
    content: "Einzelpreis: ";
    color: #666;
    font-size: 13px;
    font-weight: 400;
  }
  .check-row:not(.total):not(.your-data):not(.agb):not(.send):not(.address) > .big.a-right {
    grid-area: price2;
    font-size: 20px;
  }
  .check-row {
    /* .total auf Phone: weiterhin side-by-side (.info links, .summary
       rechts), nur mit reduzierten Schriftgrößen damit's in die enge
       Phone-Breite passt. */
  }
  .check-row.total {
    grid-template-columns: 1fr auto;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
  }
  .check-row.total .info {
    font-size: 13px;
    line-height: 1.25;
    gap: 0.2rem;
  }
  .check-row.total .summary {
    column-gap: 0.4rem;
    row-gap: 0.2rem; /* gleicher Abstand wie .info-Block links */
  }
  .check-row.total .summary .label,
  .check-row.total .summary .val {
    font-size: 13px;
    line-height: 1.25; /* gleicher Rhythmus wie .info */
  }
  .check-row.total .summary .big {
    font-size: 15px;
    margin-top: 0.35rem; /* Gesamtpreis dezent abgesetzt */
  }
  .check-row.your-data {
    gap: 1rem;
    padding: 0.8rem 0.5rem 1.2rem;
  }
  .check-row.your-data.double {
    grid-template-columns: 1fr;
  }
  .check-row.your-data {
    /* Single-Adresse: Default-CSS schiebt die Card via
       `grid-column: 2` in die rechte Hälfte (Doppel-Slot leer
       links). Auf Phone macht das keinen Sinn → volle Breite. */
  }
  .check-row.your-data.single {
    grid-template-columns: 1fr;
  }
  .check-row.your-data.single > div {
    grid-column: 1;
  }
  .check-row.your-data > div {
    padding: 1rem 1.1rem;
  }
  .check-row.send {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .check-row.send .a-right {
    text-align: center;
  }
  .check-row.send .btn {
    width: 100%;
    box-sizing: border-box;
  }
  .check-row.agb {
    padding: 0.8rem 0.9rem;
  }
  /* Buttons generell ein bisschen größer-griffig auf Touch */
  .btn {
    padding: 0.75rem 1.2rem;
  }
  /* Footer: gestapelt + zentriert */
  .footer .navigation,
  .footer .payment {
    float: none;
    justify-content: center;
    flex-wrap: wrap;
    margin: 6px 0;
  }
  .footer .payment .creditcard {
    width: 22px;
  }
  .info-box {
    padding: 0.8rem 1rem;
    font-size: 15px;
  }
}

/*# sourceMappingURL=styles.css.map */