/* KreativBüro · Loop-Generator. Baut auf site.css, schriftzug.css und buchstabe.css auf. */

/* Auswahl des Rahmens: vier Kacheln mit Bildchen, die gewählte bekommt den Limetten-Rahmen */
.lp-formen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.lp-formen label { position: relative; cursor: pointer; }
.lp-formen input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lp-formen span { display: grid; justify-items: center; align-content: start; gap: .2rem; height: 100%; padding: .75rem .5rem .8rem; text-align: center; border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px #c3ccd5; transition: box-shadow .15s, background .15s; }
.lp-formen svg { width: 2.3rem; height: 2.3rem; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; margin-bottom: .2rem; }
.lp-formen strong { font-size: .98rem; color: var(--ink); }
.lp-formen small { font-size: .76rem; line-height: 1.3; color: var(--ink-muted); }
.lp-formen label:hover span { box-shadow: inset 0 0 0 1.5px var(--ink); }
.lp-formen input:checked + span { background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--lime-on-paper); }
.lp-formen input:checked + span svg { stroke: var(--lime-on-paper); stroke-width: 2.2; }
.lp-formen input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 3px; }
@media (max-width: 639px) { .lp-formen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.lp .lp-hinweis { grid-column: span 6; margin: 0; }
.lp .lp-oese { align-self: end; padding-bottom: .6rem; }
.lp #text1, .lp #text2 { width: 100%; font: inherit; font-size: 1.1rem; }