@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

.la-konf{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
@media(max-width:860px){.la-konf{grid-template-columns:1fr;gap:32px}}

.la-rahmen{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:1;background:#fff;box-shadow:0 18px 44px rgba(120,108,94,.16);display:flex;align-items:center;justify-content:center}
.la-rahmen::before{content:"";position:absolute;inset:0;border:clamp(9px,1.8vw,20px) solid #fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),inset 3px 3px 14px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04);pointer-events:none;z-index:2}
.la-flaeche{position:relative;z-index:1;width:62%;aspect-ratio:1;background:var(--la-farbe,#DDD3C0);box-shadow:3px 4px 12px rgba(0,0,0,.11);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.06em;padding:7%;overflow:hidden;container-type:inline-size;transition:background .25s ease}
.la-zeile{font-family:"Patrick Hand","Comic Sans MS",cursive;font-size:clamp(16px,3.6vw,34px);line-height:1.16;letter-spacing:.05em;text-transform:uppercase;text-align:left;white-space:pre;
  color:color-mix(in srgb, var(--la-farbe,#DDD3C0) 70%, #000);
  -webkit-text-stroke:.035em color-mix(in srgb, var(--la-farbe,#DDD3C0) 70%, #000);
  paint-order:stroke fill;
  text-shadow:0 1px 0 rgba(255,255,255,.5),0 -1px 0 rgba(0,0,0,.09);
}
.la-zeile:empty{display:none}
@supports (container-type: inline-size){
  .la-zeile{font-size:26cqi}
}

.la-felder{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.la-feld{display:flex;align-items:center;gap:12px}
.la-feld label{font-size:13px;color:var(--mute);width:58px;flex-shrink:0}
.la-feld input{flex:1;min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:0;background:#fff;color:var(--ink);font-family:inherit;font-size:16px;text-transform:uppercase;letter-spacing:.08em}
.la-feld input:focus{outline:none;border-color:var(--ink)}
.la-feld input.la-feld--fehler{border-color:#A3552D}
.la-feld input::placeholder{color:#D6CFC6;letter-spacing:.04em}

.la-farbwahl{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.la-farbe{width:44px;height:44px;border:1px solid var(--line);padding:0;cursor:pointer}
.la-farbe[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:3px}
.la-farbname{font-size:13px;color:var(--mute);margin-top:10px;min-height:1.4em}
.la-fehler{font-size:13px;color:#A3552D;margin-top:10px;min-height:1.2em}
.la-zeichen{font-size:12px;color:var(--mute);margin-top:8px}