/* DOSIGNY — Seitentyp Landingpage: Suchbegriff im Kopf, Text neben dem druckenden Projektzettel
 * Der Bon bewegt sich nur per transform: keine Layout-Verschiebung. Erstellt durch Dominik Baurhenn - DOSIGNY — https://www.dosigny.com */
.dz-lpsuche { display: inline-flex; align-items: center; gap: var(--a-3); max-width: 100%; margin: var(--a-2) 0 var(--a-5); padding: .55rem 1.1rem; border: 1px solid rgba(var(--c-weiss-rgb),.22); border-radius: 99px; background: rgba(var(--c-weiss-rgb),.05); font: 500 var(--fs-klein)/1.3 var(--f-mono); color: var(--c-hell); }
.dz-lpsuche svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: var(--c-tuerkis); stroke-width: 2.4; stroke-linecap: round; }
.dz-lpsuche span { border-right: 2px solid var(--c-tuerkis); padding-right: 2px; animation: dz-lp-tippen 1.3s .25s steps(26) both, dz-lp-strich .9s 1.5s 3 step-end forwards; }
@keyframes dz-lp-tippen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dz-lp-strich { 50% { border-right-color: transparent; } 100% { border-right-color: transparent; } }
.dz-lpkopf .dz-fallkopf__media { -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.dz-lpkopf .dz-fallkopf__titel { max-width: 22ch; text-wrap: balance; hyphens: none; }
.dz-lpkopf .dz-fallkopf__lead { max-width: 58ch; }
@media (max-width: 480px) { .dz-lpkopf .dz-fallkopf__media { -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.dz-lpkopf .dz-fallkopf__titel { font-size: clamp(1.75rem, 8.4vw, 2.5rem); max-width: none; } }

.dz-lp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--a-fluss-l); align-items: start; padding-block: var(--a-fluss-m) var(--raum); }
.dz-lpblock { padding-block: calc(var(--raum) * .42); }
.dz-lpblock:first-child { padding-top: 0; }
.dz-lpblock .k-h2 { margin-bottom: var(--a-fluss-s); font-size: clamp(1.5rem, 5.6vw, min(var(--fs-h2), 2.7rem)); text-wrap: balance; hyphens: none; overflow-wrap: normal; }
.dz-lp .dz-l-karte { display: flex; flex-direction: column; }
.dz-lp .dz-l-karte .k-btn { display: flex; justify-content: center; width: 100%; margin-top: auto; padding-inline: var(--a-3); font-size: var(--fs-klein); text-align: center; white-space: normal; }
.dz-lp .dz-l-raster--karte { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1300px) {
  .dz-lp .dz-l-karte { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--a-5); align-items: center; }
  .dz-lp .dz-l-karte > :not(.k-btn) { grid-column: 1; }
  .dz-lp .dz-l-karte .k-btn { grid-column: 2; grid-row: 1 / span 3; width: auto; margin: 0; white-space: nowrap; }
}
@media (max-width: 400px) { .dz-lp .dz-l-karte .k-btn { font-size: .78rem; letter-spacing: .02em; } }
.dz-lp .dz-l-tabelle strong { white-space: nowrap; }
.dz-lphinweis { padding: var(--a-4) var(--a-5); border-left: 3px solid var(--c-tuerkis); background: rgba(var(--c-tuerkis-rgb),.07); }

/* Der Bon */
.dz-bon { position: sticky; top: clamp(5rem, 11svh, 6.5rem); min-width: 0; }
.dz-bon__koerper { display: flex; flex-direction: column; max-height: calc(100svh - clamp(5rem, 11svh, 6.5rem) - 6.5rem); }
.dz-bon__drucker { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--a-2); padding: var(--a-3) var(--a-4); border-radius: 12px 12px 0 0; background: var(--c-flaeche-hover); box-shadow: 0 10px 16px -8px rgba(var(--c-schwarz-rgb),.9); font: 600 var(--fs-mini)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--c-hell-rgb),.85); }
.dz-bon__drucker i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--c-online); }
.dz-bon.is-druckt .dz-bon__drucker i { animation: dz-bon-led .25s steps(2) 3; }
@keyframes dz-bon-led { 50% { background: var(--c-tuerkis); opacity: .35; } }
.dz-bon__schlitz { position: relative; flex: 1 1 auto; min-height: 7rem; overflow: hidden; margin-inline: var(--a-2); background: linear-gradient(rgba(var(--c-weiss-rgb),.05), rgba(var(--c-weiss-rgb),.02)); box-shadow: inset 1px 0 rgba(var(--c-weiss-rgb),.08), inset -1px 0 rgba(var(--c-weiss-rgb),.08); }
.dz-bon__papier { position: relative; display: flex; flex-direction: column-reverse; margin: 0; padding: 0 var(--a-4) var(--a-3); list-style: none; background: #f5f1e6; color: #1c1826; font: 500 .8rem/1.35 var(--f-mono); will-change: transform; }
.dz-bon__papier::before { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 7px; background: linear-gradient(135deg, #f5f1e6 50%, transparent 50%) 0 0 / 12px 7px repeat-x, linear-gradient(225deg, #f5f1e6 50%, transparent 50%) 0 0 / 12px 7px repeat-x; }
.dz-bon.is-bereit .dz-bon__papier { transition: transform .55s steps(14); }
.dz-bon__zeile { display: flex; gap: var(--a-2); padding: var(--a-2) 0; border-top: 1px dashed rgba(28,24,38,.28); }
.dz-bon__haken { flex: none; font-weight: 800; color: #0d7f68; }
.dz-bon__zeile--kopf { display: grid; gap: var(--a-1); padding-top: var(--a-3); border-top: 0; }
.dz-bon__zeile--kopf strong { font-size: .95rem; letter-spacing: .14em; }
.dz-bon__fuss { position: relative; z-index: 2; padding: var(--a-3) var(--a-4) var(--a-4); border-radius: 0 0 12px 12px; background: var(--c-flaeche); box-shadow: 0 -10px 16px -8px rgba(var(--c-schwarz-rgb),.8), 0 0 0 1px rgba(var(--c-weiss-rgb),.08); }
.dz-bon__summe { display: flex; justify-content: space-between; align-items: baseline; gap: var(--a-3); margin: 0 0 var(--a-3); font: 600 var(--fs-mini)/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(var(--c-hell-rgb),.8); }
.dz-bon__summe b { font: var(--fw-h) var(--fs-gross)/1 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--c-tuerkis); font-variant-numeric: lining-nums; white-space: nowrap; }
.dz-bon__knopf { display: flex; justify-content: center; width: 100%; padding-inline: var(--a-3); text-align: center; white-space: normal; font-size: var(--fs-klein); }
.dz-bon__klein { margin: var(--a-2) 0 0; font-size: var(--fs-mini); line-height: 1.35; color: rgba(var(--c-hell-rgb),.65); }
.dz-bon__griff { display: none; }

/* Handy und Tablet: kleiner Griff links, Zettel klappt darüber auf */
@media (max-width: 960px) {
  .dz-lp { grid-template-columns: minmax(0, 1fr); }
  .dz-bon { position: static; }
  .dz-bon__koerper { max-height: none; }
  /* Unter dem Kontakt-Widget (55), damit es nie verdeckt wird */
  .ps-js .dz-bon { position: fixed; top: auto; left: 12px; bottom: 16px; z-index: 54; width: min(21rem, calc(100vw - 6.75rem)); transition: opacity .3s, visibility .3s; }
  .ps-js .dz-bon.is-weg, .ps-js .dz-bon.is-vor, .ps-js .dz-bon:not(.is-bereit) { opacity: 0; visibility: hidden; }
  .ps-js .dz-bon .dz-bon__griff { display: inline-flex; align-items: center; gap: var(--a-2); min-height: 48px; padding: 0 var(--a-4); border: 1px solid rgba(var(--c-tuerkis-rgb),.55); border-radius: 99px; background: var(--c-flaeche); color: var(--c-weiss); font: 600 var(--fs-klein)/1 var(--f-text); box-shadow: 0 14px 30px -12px rgba(var(--c-schwarz-rgb),.9); cursor: pointer; }
  .dz-bon__griff svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--c-tuerkis); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .dz-bon.is-voll .dz-bon__griff { border-color: var(--c-tuerkis); background: var(--c-tuerkis); color: var(--c-nacht); }
  .dz-bon.is-voll .dz-bon__griff svg { stroke: currentColor; }
  .dz-bon.is-voll .dz-bon__griff b { color: inherit; }
  .dz-bon__griff b { color: var(--c-tuerkis); font-variant-numeric: lining-nums; }
  .ps-js .dz-bon .dz-bon__schlitz { margin-inline: 0; padding-inline: var(--a-2); background: var(--c-flaeche); }
  .ps-js .dz-bon .dz-bon__koerper { position: absolute; left: 0; bottom: calc(100% + 8px); width: 100%; height: min(62svh, 26rem); visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s, visibility .25s; }
  .ps-js .dz-bon.is-offen .dz-bon__koerper { visibility: visible; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dz-lpsuche span { animation: none; border-right: 0; }
  .dz-bon.is-bereit .dz-bon__papier { transition: none; }
  .dz-bon.is-druckt .dz-bon__drucker i { animation: none; }
}