@font-face {
font-family: nummernschild;
src: url(//www.zulassung.de/wp-content/plugins/kennzeichen/GlNummernschildMtl.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@media (max-height: 90px) {
.numberplate {
font-size: 1vw;
}
}
.btn-check {
background-color: #29aa5d;
border-radius: 3px;
box-shadow: 0 1px 5px 0 rgb(0 0 0 / 25%);
color: #fff;
cursor: pointer;
display: block;
letter-spacing: 2px;
padding: 12px 30px;
text-align: center;
text-transform: uppercase;
width: fit-content;
height: fit-content;
margin-top: 1rem;
margin-left: auto;
margin-right: auto;
font-weight: 600;
}
.numberplate .numberplate-wrapper .numberplate-field .inputGreen {
color: #007800;
}
.numberplate .numberplate-wrapper.borderGreen {
border: 0.4em solid #007800;
}
*,
*::before,
*::after {
border: none;
box-sizing: border-box;
margin: 0;
padding: 0;
}
*:focus {
outline: 0;
}
* {
transition:
margin 0.25s ease,
padding 0.25s ease;
}
body {
text-rendering: optimizeSpeed;
}
ol,
ul {
list-style: none;
}
input,
textarea,
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-moz-outline: none;
outline: none;
} .numberplate .numberplate-wrapper .numberplate-sticker {
display: flex;
flex-direction: column;
align-items: center;
}
.numberplate
.numberplate-wrapper
.numberplate-sticker.sticker-preview
.sticker-1,
.numberplate
.numberplate-wrapper
.numberplate-sticker.sticker-preview
.sticker-2 {
filter: grayscale(1) opacity(0.7);
}
.numberplate .numberplate-wrapper .numberplate-sticker .sticker-1 {
display: block;
background: #ffffff;
width: 2.3em;
height: 2.3em;
border: 0.2em solid #a3a3a3;
border-radius: 50%;
transition:
background-image 0.2s,
filter 0.2s;
}
.numberplate .numberplate-wrapper .numberplate-sticker .sticker-1.plakette {
border: none;
background: #e8e8e8 no-repeat 0 0 / contain;
}
.numberplate .numberplate-wrapper .numberplate-sticker .sticker-2 {
display: block;
background: #e8e8e8;
width: 3em;
height: 3em;
border: 0.2em solid #a3a3a3;
border-radius: 50%;
margin: 0.75em 0 0 0;
transition:
background-image 0.2s,
filter 0.2s;
}
.numberplate .numberplate-wrapper .numberplate-sticker .sticker-2 {
border: none;
background: #e8e8e8 no-repeat 0 0 / contain;
}
.numberplate .numberplate-wrapper .numberplate-text {
color: #000;
flex: 0 0 auto;
font: 8em "nummernschild";
text-align: center;
text-transform: uppercase;
transition: font 0.25s ease;
margin: 0 0.1em 0 0;
}
.numberplate .numberplate-wrapper .numberplate-text .numberplate-type {
float: left;
}
.numberplate .numberplate-wrapper .numberplate-text .numberplate-type-seasonal {
float: right;
}
.numberplate .numberplate-wrapper .numberplate-text span {
display: block;
font: 0.4em/0.6em "nummernschild";
margin: 0 0.15em;
padding: 0.3em 0;
}
.numberplate .numberplate-wrapper .numberplate-text span:first-child {
border-bottom: 0.1em solid #000;
margin-bottom: 0.05em;
}
.numberplate.numberplate-lines-2 {
background-size: auto 9.6em;
}
.numberplate.numberplate-lines-2 .numberplate-wrapper {
flex-wrap: wrap;
padding: 0.3em;
}
.numberplate.numberplate-lines-2 .numberplate-wrapper .line {
display: flex;
flex-flow: row nowrap;
flex-basis: 100%;
align-items: center;
}
.numberplate.numberplate-lines-2 .numberplate-wrapper .line.line-1 {
align-self: flex-start;
margin-left: 5em;
justify-content: center;
}
.numberplate.numberplate-lines-2
.numberplate-wrapper
.line.line-1
.numberplate-sticker {
margin-left: 1.5em;
}
.numberplate.numberplate-lines-2 .numberplate-wrapper .line:last-child {
justify-content: space-around;
align-self: flex-end;
}
.numberplate.numberplate-lines-2 .numberplate-field input:focus + label,
.numberplate.numberplate-lines-2 .numberplate-field .empty + label {
display: none;
}
.numberplate.numberplate-lines-2.numberplate-h-200.numberplate-type-season
.numberplate-wrapper
.line-1
.numberplate-text {
margin-left: auto;
}
.numberplate.numberplate-lines-2.numberplate-h-130 {
background-size: auto 6em;
}
.numberplate.numberplate-lines-2.numberplate-h-130 .numberplate-wrapper {
padding: 0.4em;
}
.numberplate.numberplate-lines-2.numberplate-h-130
.numberplate-wrapper
.line-1 {
margin-left: 3em;
}
.numberplate.numberplate-lines-2.numberplate-h-130
.numberplate-wrapper
.line-1
.numberplate-sticker {
flex-flow: row-reverse;
}
.numberplate.numberplate-lines-2.numberplate-h-130
.numberplate-wrapper
.line-1
.numberplate-sticker
.sticker-1 {
margin-left: 0.75em;
}
.numberplate.numberplate-lines-2.numberplate-h-130
.numberplate-wrapper
.line-1
.numberplate-sticker
.sticker-2 {
margin: 0;
}
.numberplate.numberplate-lines-2.numberplate-h-130
.numberplate-wrapper
.numberplate-field {
height: 5em;
}
.numberplate.numberplate-lines-2.numberplate-h-130
.numberplate-wrapper
.numberplate-field.w1 {
width: 3.8em;
}
.numberplate.numberplate-lines-2.numberplate-h-130
.numberplate-wrapper
.numberplate-field.w2 {
width: 6.5em;
}
.numberplate.numberplate-lines-2.numberplate-h-130
.numberplate-wrapper
.numberplate-field.w3 {
width: 9em;
}
.numberplate.numberplate-lines-2.numberplate-h-130
.numberplate-wrapper
.numberplate-field.w4 {
width: 11.6em;
}
.numberplate.numberplate-lines-2.numberplate-h-130
.numberplate-wrapper
.numberplate-text {
font-size: 5.6em;
}
.numberplate.numberplate-lines-2.numberplate-h-130 .numberplate-wrapper input {
font: 5.3em/0.8em "nummernschild";
height: 100%;
}
.numberplate.numberplate-lines-2.numberplate-h-130 .numberplate-wrapper span {
padding: 0.25em 0;
} .numberplate {
font-size: 11px;
background-size: auto 10.4em;
background: #fff
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ny41IDk5LjQiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuYSB7DQogICAgICAgIGZpbGw6ICMwNTVjYzY7DQogICAgICB9DQoNCiAgICAgIC5iIHsNCiAgICAgICAgZmlsbDogI2ZjMDsNCiAgICAgIH0NCg0KICAgICAgLmMgew0KICAgICAgICBmaWxsOiAjZmZmOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPGc+DQogICAgPHBhdGggY2xhc3M9ImEiIGQ9Ik00Ny41LjFjLS4zLDAtLjctLjEtMS0uMUg4LjRDMCwwLDAsMCwwLDcuNlY5MS44YzAsNy42LDAsNy42LDguMyw3LjZINDYuNWEzLjM3LDMuMzcsMCwwLDAsMS0uMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIi8+DQogICAgPHJlY3QgY2xhc3M9ImEiIHdpZHRoPSI0Ny41IiBoZWlnaHQ9Ijk5LjQiLz4NCiAgICA8Zz4NCiAgICAgIDxwYXRoIGNsYXNzPSJiIiBkPSJNMjMuMDUsMTcuMmwuNi0xLjguNiwxLjhoMS45Yy0uNS40LTEsLjctMS41LDEuMWwuNiwxLjhjLS41LS40LTEtLjctMS41LTEuMS0uNS40LTEsLjctMS41LDEuMWwuNi0xLjhjLS41LS40LTEtLjctMS41LTEuMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIi8+DQogICAgICA8cGF0aCBjbGFzcz0iYiIgZD0iTTE2LDE3LjVsLjYsMS44aDEuOWMtLjUuNC0xLC43LTEuNSwxLjFsLjYsMS44Yy0uNS0uNC0xLS43LTEuNS0xLjEtLjUuNC0xLC43LTEuNSwxLjFsLjYtMS44Yy0uNS0uNC0xLS43LTEuNS0xLjFoMS45QTUuODcsNS44NywwLDAsMSwxNiwxNy41WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCkiLz4NCiAgICAgIDxwYXRoIGNsYXNzPSJiIiBkPSJNMzEuMzUsMTcuNWwuNiwxLjhoMS45Yy0uNS40LTEsLjctMS41LDEuMWwuNiwxLjhjLS41LS40LTEtLjctMS41LTEuMS0uNS40LTEsLjctMS41LDEuMWwuNi0xLjhjLS41LS40LTEtLjctMS41LTEuMWgxLjhBMTIuNjUsMTIuNjUsMCwwLDEsMzEuMzUsMTcuNVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIi8+DQogICAgICA8cGF0aCBjbGFzcz0iYiIgZD0iTTkuNzUsMjQuOWwuNi0xLjguNiwxLjhoMS45Yy0uNS40LTEsLjctMS41LDEuMWwuNiwxLjhhMTQuNDEsMTQuNDEsMCwwLDAtMS41LTEuMWMtLjUuNC0xLC43LTEuNSwxLjFsLjYtMS44Yy0uNS0uNC0xLS43LTEuNS0xLjFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSIvPg0KICAgICAgPHBhdGggY2xhc3M9ImIiIGQ9Ik0zNywyMy4xbC42LDEuOGgxLjljLS41LjQtMSwuNy0xLjUsMS4xbC42LDEuOGMtLjUtLjQtMS0uNy0xLjUtMS4xLS41LjQtMSwuNy0xLjUsMS4xbC42LTEuOGMtLjUtLjQtMS0uNy0xLjUtMS4xaDEuOUMzNi42NSwyNC4zLDM2Ljg1LDIzLjcsMzcsMjMuMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIi8+DQogICAgICA8cGF0aCBjbGFzcz0iYiIgZD0iTTcuNjUsMzIuNmwuNi0xLjguNiwxLjhoMS45Yy0uNS40LTEsLjctMS41LDEuMWwuNiwxLjhjLS41LS40LTEtLjctMS41LTEuMS0uNS40LTEsLjctMS41LDEuMWwuNi0xLjhjLS41LS40LTEtLjctMS41LTEuMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIi8+DQogICAgICA8cGF0aCBjbGFzcz0iYiIgZD0iTTM4LjQ1LDMyLjZsLjYtMS44LjYsMS44aDEuOWMtLjUuNC0xLC43LTEuNSwxLjFsLjYsMS44Yy0uNS0uNC0xLS43LTEuNS0xLjEtLjUuNC0xLC43LTEuNSwxLjFsLjYtMS44Yy0uNS0uNC0xLS43LTEuNS0xLjFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSIvPg0KICAgICAgPHBhdGggY2xhc3M9ImIiIGQ9Ik05Ljc1LDQwLjNsLjYtMS44LjYsMS44aDEuOWMtLjUuNC0xLC43LTEuNSwxLjFsLjYsMS44YTE0LjQxLDE0LjQxLDAsMCwwLTEuNS0xLjFjLS41LjQtMSwuNy0xLjUsMS4xbC42LTEuOGMtLjUtLjQtMS0uNy0xLjUtMS4xWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCkiLz4NCiAgICAgIDxwYXRoIGNsYXNzPSJiIiBkPSJNMzcsMzguNWwuNiwxLjhoMS45Yy0uNS40LTEsLjctMS41LDEuMWExMi42NywxMi42NywwLDAsMCwuNiwxLjhjLS41LS40LTEtLjctMS41LTEuMS0uNS40LTEsLjctMS41LDEuMWwuNi0xLjhjLS41LS40LTEtLjctMS41LTEuMWgxLjlDMzYuNjUsMzkuNywzNi44NSwzOS4xLDM3LDM4LjVaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSIvPg0KICAgICAgPHBhdGggY2xhc3M9ImIiIGQ9Ik0xNiw0NC4xbC42LDEuOGgxLjljLS41LjQtMSwuNy0xLjUsMS4xbC42LDEuOGMtLjUtLjQtMS0uNy0xLjUtMS4xLS41LjQtMSwuNy0xLjUsMS4xbC42LTEuOGMtLjUtLjQtMS0uNy0xLjUtMS4xaDEuOUE1Ljg3LDUuODcsMCwwLDEsMTYsNDQuMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIi8+DQogICAgICA8cGF0aCBjbGFzcz0iYiIgZD0iTTMwLjc1LDQ1LjlsLjYtMS44LjYsMS44aDEuOWMtLjUuNC0xLC43LTEuNSwxLjFsLjYsMS44Yy0uNS0uNC0xLS43LTEuNS0xLjEtLjUuNC0xLC43LTEuNSwxLjFsLjYtMS44Yy0uNS0uNC0xLS43LTEuNS0xLjFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSIvPg0KICAgICAgPHBhdGggY2xhc3M9ImIiIGQ9Ik0yMy42NSw0Ni4ybC42LDEuOGgxLjljLS41LjQtMSwuNy0xLjUsMS4xbC42LDEuOGMtLjUtLjQtMS0uNy0xLjUtMS4xLS41LjQtMSwuNy0xLjUsMS4xbC42LTEuOGMtLjUtLjQtMS0uNy0xLjUtMS4xaDEuOUE1Ljg3LDUuODcsMCwwLDEsMjMuNjUsNDYuMloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDApIi8+DQogICAgPC9nPg0KICAgIDxwYXRoIGNsYXNzPSJjIiBkPSJNMTYuNCw2NC4yYTI1LjYyLDI1LjYyLDAsMCwxLDUuMS0uNGMzLjEsMCw1LjIuNyw2LjgsMi4xczIuOCwzLjksMi44LDcuNGMwLDMuOC0xLjIsNi4zLTIuOCw3LjktMS44LDEuNy00LjQsMi41LTcuNiwyLjVhMzIuODIsMzIuODIsMCwwLDEtNC4yLS4zVjY0LjJabTMuOCwxNi4xYTUuMTUsNS4xNSwwLDAsMCwxLjMuMWMzLjQsMCw1LjYtMi4yLDUuNi02LjksMC00LjEtMi02LjItNS4yLTYuMmE1Ljc0LDUuNzQsMCwwLDAtMS43LjJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSIvPg0KICA8L2c+DQo8L3N2Zz4NCg==")
no-repeat 0.3em 0;
border: 0.3em solid #ffffff;
border-radius: 1.25em;
box-shadow: 0 0.15em 0.6em 0 rgba(0, 0, 0, 0.5);
height: 11em;
width: 52em;
margin: 0 auto;
transition:
background 0.2s ease,
box-shadow 0.2s ease,
border 0.2s ease,
height 0.2s ease,
width 0.2s ease;
}
.numberplate:hover {
box-shadow: 0 0.3em 1.2em 0 rgba(0, 0, 0, 0.5);
}
.numberplate .numberplate-wrapper {
padding: 0 0.6em 0 5.6em;
height: 100%;
align-items: center;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
position: relative;
border: 0.4em solid #000000;
border-radius: 1em;
}
.numberplate .numberplate-wrapper.field-transition {
overflow: hidden;
}
.numberplate .numberplate-wrapper.field-transition .numberplate-field {
transition:
border 0.2s ease,
box-shadow 0.2s ease,
width 0.2s ease;
}
.numberplate .numberplate-wrapper .numberplate-field {
flex: 0 0 auto;
height: 8.2em;
position: relative;
}
.numberplate .numberplate-wrapper .numberplate-field input {
border: 1px solid #ccc;
border-radius: 0.07em;
color: #000;
display: block;
box-sizing: border-box;
font: 7.5em/1em "nummernschild";
height: 100%;
text-align: center;
text-transform: uppercase;
transition:
border 0.2s ease,
box-shadow 0.2s ease,
font 0.2s ease;
width: 100%;
-moz-appearance: textfield;
background: #eee;
padding: 3px !important;
}
.numberplate .numberplate-wrapper .numberplate-field input::placeholder {
color: #c1c1c1;
opacity: 1;
}
.numberplate .numberplate-wrapper .numberplate-field input:focus {
color: #000;
outline: 0;
}
.numberplate .numberplate-wrapper .numberplate-field input.active {
background: #fdf2d0;
box-shadow: 0 0 0.05em 0.05em #fc0;
animation: numberplateBlurPulse 1s infinite; color: #000;
opacity: 1;
}
@keyframes numberplateBlurPulse {
0% {
box-shadow: 0 0 0em 0em #fc0;
}
50% {
box-shadow: 0 0 0.05em 0.05em #fc0;
}
100% {
box-shadow: 0 0 0em 0em #fc0;
}
}
.numberplate
.numberplate-wrapper
.numberplate-field
input::-webkit-outer-spin-button,
.numberplate
.numberplate-wrapper
.numberplate-field
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.numberplate .numberplate-wrapper .numberplate-field .pointer {
content: "";
display: none;
height: 1.75em;
position: absolute;
margin-left: -1.5em;
top: -1.5em;
left: 50%;
width: 3.5em;
animation: numberplatePointerPulse 1s infinite;
overflow: hidden;
z-index: 10;
}
.numberplate .numberplate-wrapper .numberplate-field .pointer::before {
background: #ffcc00;
box-shadow: 0 0 0.4em 0 rgba(0, 0, 0, 0.5);
content: "";
display: block;
height: 2.5em;
left: 50%;
position: absolute;
top: -0.25em;
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
width: 2.5em;
}
.numberplate .numberplate-wrapper .numberplate-field .pointer svg {
height: 2em;
width: 2em;
}
.numberplate .numberplate-wrapper .numberplate-field .pointer svg polygon {
fill: #ffcc00;
}
@keyframes numberplatePointerPulse {
0% {
top: -1.5em;
}
50% {
top: -2.5em;
}
100% {
top: -1.5em;
}
}
.numberplate-field input.active + .pointer {
display: block !important;
}
@media (max-width: 1000px) {
.numberplate {
font-size: 1vw;
}
}
@media (max-width: 767px) {
.numberplate {
font-size: 1.6vw;
}
.numberplate .numberplate-wrapper .numberplate-field input {
font: 7.5em/1em "nummernschild";
}
}