/* Entwurf 4 · Lieferschein: Papier, Formularlinien, Stempel. Die Seite ist die Offerte. */
:root{
  --tisch:#d7d2c8; --papier:#fbf9f3; --ink:#1b2440; --leise:#56607a; --linie:#9fb1d0; --haar:rgb(27 36 64 / .16); --rot:#c2331d; --marker:#ffe680;
  --serif:"Spectral",Georgia,"Times New Roman",serif; --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --rand:clamp(1.1rem,4.5vw,4rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem;background:var(--tisch)}
body{margin:0;padding:0 clamp(0rem,2vw,2rem) clamp(1rem,4vw,4rem);color:var(--ink);background:var(--tisch);font:400 clamp(1.05rem,1rem + .2vw,1.2rem)/1.5 var(--serif);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset,legend,address{margin:0;padding:0;font-style:normal}
fieldset{border:0;min-width:0}
ul,ol{list-style:none}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:.125rem solid var(--rot);outline-offset:.1875rem}
.skip{position:absolute;left:-999px;top:0;z-index:40;background:var(--ink);color:#fff;padding:.75rem 1rem;font:500 .8rem var(--mono)}
.skip:focus{left:1rem;top:1rem}
.ph{background:linear-gradient(transparent 55%,var(--marker) 55%)}
.klein{font:400 .76rem/1.5 var(--mono);color:var(--leise)}
.muster{margin-left:.4rem;padding:.05rem .4rem;border:1px solid var(--rot);color:var(--rot);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.6rem 1.3rem;border:.125rem solid var(--ink);border-radius:.125rem;background:var(--ink);color:var(--papier);font:500 .8rem/1.1 var(--mono);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .15s linear,color .15s linear}
.btn:hover{background:var(--rot);border-color:var(--rot)}
.btn-rand{background:transparent;color:var(--ink)}
.btn-rand:hover{background:var(--ink);border-color:var(--ink);color:var(--papier)}
.link{padding:.4rem 0;border:0;border-bottom:1px solid currentColor;background:transparent;font:500 .76rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
html:not(.js) .link{display:none}

.hdr{position:sticky;top:0;z-index:30;margin-inline:calc(-1 * clamp(0rem,2vw,2rem));background:var(--tisch);border-bottom:1px solid var(--haar)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:66rem;min-height:3.75rem;margin-inline:auto;padding-inline:var(--rand)}
.logo{display:inline-flex;align-items:baseline;gap:.8rem;min-height:2.75rem;text-decoration:none}
.logo b{font:600 1.35rem/1 var(--serif);letter-spacing:-.01em}
.logo small{font:500 .68rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--leise)}
.nav{display:flex;gap:.2rem 1.5rem}
.nav a{display:inline-flex;align-items:center;min-height:2.75rem;font:500 .74rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--leise)}
.nav a:hover{color:var(--ink)}

/* Das Blatt mit Lochrand */
.blatt{position:relative;max-width:66rem;margin:clamp(1rem,3vw,2.4rem) auto 0;padding:clamp(1.6rem,4vw,3.4rem) var(--rand) clamp(1.4rem,3vw,2.4rem);background:var(--papier);box-shadow:0 .1rem .2rem rgb(27 36 64 / .12),0 2.4rem 4rem -2rem rgb(27 36 64 / .45)}
.blatt::before{content:"";position:absolute;left:.55rem;top:0;bottom:0;width:.7rem;background:radial-gradient(circle,var(--tisch) 0 .3rem,transparent .32rem) 50% 1.1rem/100% 1.9rem repeat-y}
.kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.6rem 3rem;padding-bottom:1.8rem;border-bottom:.1875rem double var(--ink)}
address{font:400 .88rem/1.6 var(--mono)}
address b{font:600 1.3rem/1.4 var(--serif)}
.belegkopf{display:grid;font:400 .86rem/1.4 var(--mono)}
.belegkopf div{display:grid;grid-template-columns:6.5rem auto;gap:1rem;padding:.3rem 0;border-bottom:1px solid var(--linie)}
.belegkopf dt{letter-spacing:.07em;text-transform:uppercase;color:var(--leise);font-size:.72rem;line-height:1.9}
.belegkopf dd{font-weight:500}
.titel{display:grid;grid-template-columns:minmax(0,1fr) minmax(11rem,17rem);gap:2rem clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(2rem,5vw,3.6rem) 0}
h1{font:500 clamp(2.5rem,6vw,4.8rem)/1.02 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.lead{max-width:36rem;margin-top:1.4rem;font-size:clamp(1.12rem,1rem + .5vw,1.35rem);line-height:1.45;color:var(--leise)}
.artikel{display:grid;gap:.5rem;padding:.6rem;border:1px solid var(--linie)}
.buehne{aspect-ratio:1/1.12;color:var(--ink);--k-flaeche:#fbf9f3;--k-linie:#1b2440;--k-akzent:#c2331d}
.kabine-ersatz{padding:8%}
.artikel figcaption{padding-top:.5rem;border-top:1px solid var(--linie);font:400 .74rem/1.6 var(--mono);color:var(--leise)}

.teil{padding-bottom:clamp(1.6rem,4vw,2.8rem)}
h2{display:flex;align-items:baseline;gap:.9rem;margin:clamp(1.8rem,4vw,2.8rem) 0 1.2rem;padding-bottom:.5rem;border-bottom:1px solid var(--ink);font:600 clamp(1.4rem,2.6vw,1.9rem)/1.15 var(--serif);letter-spacing:-.015em}
h2 span{font:500 .82rem/1 var(--mono);color:var(--rot)}
h2 small{font:400 .76rem/1.4 var(--mono);color:var(--leise)}
h3{font:600 1.3rem/1.2 var(--serif)}

/* Formularlinien */
.angaben{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem clamp(1rem,3vw,2.5rem);align-items:end}
.linie{display:grid;gap:.2rem}
.linie span{font:400 .72rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.linie input{width:100%;min-height:2.9rem;padding:.2rem 0;border:0;border-bottom:.125rem solid var(--ink);border-radius:0;background:transparent;font:500 1.5rem/1.2 var(--mono)}
.linie input:focus{outline:0;border-bottom-color:var(--rot);background:linear-gradient(transparent 60%,rgb(255 230 128 / .55) 60%)}
.linie input:user-invalid{border-bottom-color:var(--rot)}
.linie input::placeholder{color:#b9bfcc}
.linie.ergebnis b{min-height:2.9rem;border-bottom:.125rem solid var(--ink);font:600 2rem/1.35 var(--mono);color:var(--rot)}
.plz-antwort{grid-column:1/-1;font:500 .86rem/1.5 var(--mono)}
.plz-antwort:empty{display:none}
.plz-antwort.ist-ja{color:#0b6b41}
.kreuze{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem clamp(1rem,3vw,2.5rem);margin-top:1.8rem}
.kreuze legend{margin-bottom:.5rem;font:400 .72rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.kreuze label{display:flex;align-items:center;gap:.8rem;min-height:2.75rem;border-bottom:1px solid var(--linie);cursor:pointer}
.kreuze input{flex:none;appearance:none;-webkit-appearance:none;width:1.3rem;height:1.3rem;margin:0;border:.125rem solid var(--ink);border-radius:.1rem;background:var(--papier);cursor:pointer}
.kreuze input[type=radio]{border-radius:50%}
.kreuze input:checked{background:linear-gradient(45deg,transparent 44%,var(--rot) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--rot) 44% 56%,transparent 56%)}
.kreuze input[type=radio]:checked{background:radial-gradient(circle,var(--rot) 0 42%,transparent 46%)}

.rollen{overflow-x:auto}
.pos{width:100%;min-width:36rem;border-collapse:collapse;font:400 .9rem/1.4 var(--mono);font-variant-numeric:tabular-nums}
.pos th,.pos td{padding:.65rem .5rem;border-bottom:1px solid var(--linie);text-align:left}
.pos th:first-child,.pos td:first-child{padding-left:0}.pos th:last-child,.pos td:last-child{padding-right:0}
.pos thead th{border-bottom:.125rem solid var(--ink);font-weight:500;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--leise)}
.pos .r{text-align:right;white-space:nowrap}
.pos tbody td:nth-child(2){font:400 1.05rem/1.35 var(--serif)}
.pos tfoot td{color:var(--leise)}
.pos tfoot .total td{border-top:.125rem solid var(--ink);border-bottom:.25rem double var(--ink);color:var(--ink);font-weight:600;font-size:1.25rem}
.knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;margin-top:1.6rem}
.knoepfe .klein{flex-basis:100%}
.enthalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1rem,3vw,2.5rem)}
.enthalten li{position:relative;padding:.6rem 0 .6rem 2rem;border-bottom:1px solid var(--linie)}
.enthalten li::before{content:"";position:absolute;left:.1rem;top:.95rem;width:1rem;height:1rem;border:.1rem solid var(--ink)}
.enthalten li::after{content:"";position:absolute;left:.3rem;top:.95rem;width:.9rem;height:.45rem;border-left:.16rem solid var(--rot);border-bottom:.16rem solid var(--rot);transform:rotate(-48deg)}
.bedarf-text{margin:1.2rem 0 .8rem;font-weight:500;font-size:1.2rem}

/* Stempel */
.stempel{display:inline-block;padding:.3rem .8rem;border:.15rem solid var(--rot);border-radius:.2rem;color:var(--rot);font:600 .82rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-5deg);mix-blend-mode:multiply}
.stempel.gross{font-size:1.2rem;padding:.5rem 1.2rem;animation:stempeln .35s cubic-bezier(.22,1.5,.36,1) both}
@keyframes stempeln{from{transform:rotate(-5deg) scale(2);opacity:0}}
.stempelreihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--ink)}
.stempelreihe li{display:grid;gap:1.1rem;align-content:start;padding:1.3rem 1.1rem 1.4rem;border-right:1px solid var(--ink);font-size:1rem;line-height:1.4}
.stempelreihe li:last-child{border-right:0}
.stempelreihe li:nth-child(even) .stempel{transform:rotate(3deg)}
.stempelreihe .stempel{justify-self:start}

/* Meldezettel */
.zettel-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,2vw,1.4rem)}
.zettel{position:relative;padding:1.3rem 1.1rem;border:.1rem dashed var(--ink);background:linear-gradient(#fffdf6,#fffdf6)}
.zettel::before{content:"✂";position:absolute;left:.8rem;top:-.85rem;padding:0 .3rem;background:var(--papier);font-size:1rem;line-height:1.5}
.zettel form{display:grid;gap:.9rem}
.zettel p{font-size:.98rem;line-height:1.35;color:var(--leise)}
.zettel label{display:grid;gap:.15rem;font:400 .7rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}
.zettel input{width:100%;min-height:2.75rem;padding:.2rem 0;border:0;border-bottom:.1rem solid var(--ink);border-radius:0;background:transparent;font:500 1.05rem/1.2 var(--mono);letter-spacing:0;text-transform:none;color:var(--ink)}
.zettel input:focus{outline:0;border-bottom-color:var(--rot);background:linear-gradient(transparent 60%,rgb(255 230 128 / .55) 60%)}
.zettel input:user-invalid{border-bottom-color:var(--rot)}
.quittung{display:grid;gap:1rem;justify-items:start;color:var(--ink)!important}

/* Auftrag */
.auftrag-box{padding:clamp(1.2rem,3vw,2.2rem);border:.125rem solid var(--ink)}
.auftrag{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem clamp(1rem,3vw,2.5rem)}
.auftrag .auswahl,.auftrag .btn,.auftrag .klein{grid-column:1/-1}
.auftrag .btn{justify-self:start}
.auswahl{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--linie)}
.auswahl b{font-size:1.25rem}
.auswahl>span{font:500 .92rem/1.8 var(--mono)}
.linie input[type=text],.linie input[type=tel],.linie input[type=email],.linie input[type=date]{font-size:1.15rem}
.eingang{display:grid;gap:1.1rem;justify-items:start}
.eingang h3{font-size:clamp(1.5rem,3vw,2rem)}

.fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;margin-top:clamp(1rem,3vw,2rem);padding-top:1.1rem;border-top:.1875rem double var(--ink);font:400 .74rem/1.6 var(--mono);color:var(--leise)}
.fuss nav{display:flex;flex-wrap:wrap;gap:.2rem 1.3rem}
.fuss a{display:inline-flex;align-items:center;min-height:2rem}
.mock-tag{position:fixed;right:1rem;bottom:1rem;z-index:35;padding:.6rem .9rem;background:var(--ink);color:var(--papier);font:500 .7rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}

@media (max-width:56rem){
  .titel{grid-template-columns:minmax(0,1fr)}
  .artikel{max-width:16rem}
  .stempelreihe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stempelreihe li:nth-child(2){border-right:0}
  .stempelreihe li:nth-child(-n+2){border-bottom:1px solid var(--ink)}
  .zettel-reihe{grid-template-columns:minmax(0,1fr);gap:1.4rem}
}
@media (max-width:40rem){
  .kopf,.angaben,.kreuze,.enthalten,.auftrag{grid-template-columns:minmax(0,1fr)}
  .nav{display:none}
  .blatt::before{display:none}
  .mock-tag{right:.6rem;bottom:.6rem;font-size:.62rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
@media print{
  html,body{background:#fff;padding:0}
  .hdr,.mock-tag,.knoepfe,#meldezettel,#auftrag,.artikel,.fuss nav,.blatt::before,.link{display:none!important}
  .blatt{max-width:none;margin:0;padding:0;box-shadow:none;background:#fff}
  .titel{grid-template-columns:1fr;padding:1.2rem 0}
  h1{font-size:22pt}
  body{font-size:10.5pt}
  .teil,.pos tr,.stempelreihe{break-inside:avoid}
  .ph{background:none}
}