/* makertools.info · Generatoren
   Das Bedienfeld ist eine große, weich erhabene Fläche (Soft-UI wie der Rest der Seite).
   Die Regeln ab „Übernommen“ stammen aus KreativBüro (schriftzug.css, bild.css, bubble.css,
   buchstabe.css, loop.css, tuerschild.css) und laufen hier über die Variablen von .rechner. */

.rechner{
  --ink:#3a312c; --ink-muted:#6f6358; --paper:#f6f2ed; --paper-2:#ece5dc; --paper-line:#d5cbbf;
  --lime:#2b8578; --lime-bright:#2f9284; --lime-on-paper:#1f7368; --on-lime:#ffffff;
  --feld:#fdfbf8; --rand-feld:#c9bdae; --f-mono:var(--schrift-mono); --f-display:var(--schrift-titel); --f-body:var(--schrift-text);
  color-scheme:light; background:var(--paper); color:var(--ink); border-radius:var(--r-gross);
  box-shadow:var(--soft-hoch);
  display:grid; gap:clamp(1.75rem,1rem + 3vw,3.5rem); padding:clamp(1.1rem,1rem + 2.5vw,2.75rem);
  margin:0 0 clamp(2.5rem,2rem + 2vw,3.5rem);
}
@media (min-width:980px){.rechner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}}
.rechner ::selection{background:var(--lime);color:var(--on-lime)}
.rechner a{color:var(--ink);text-decoration-color:var(--lime-on-paper)}
.rechner :focus-visible{outline:3px solid var(--lime-on-paper);outline-offset:2px}
.rechner fieldset{border:0;padding:0;margin:0 0 1.8rem;min-width:0}
.rechner fieldset:last-of-type{margin-bottom:1rem}
.rechner legend{font-family:var(--f-display);font-weight:800;font-size:1.55rem;line-height:1.1;color:var(--ink);padding:0;margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
.rechner legend .mono{display:inline-grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:8px;background:var(--ink);color:var(--paper);font-size:.82rem;font-family:var(--f-mono);font-weight:500}
.rechner .mono{font-family:var(--f-mono);font-size:.8rem;font-variant-numeric:tabular-nums}

/* Felder */
.form-grid{display:grid;gap:1.1rem 1.25rem;grid-template-columns:repeat(6,minmax(0,1fr))}
.form-grid .field{grid-column:span 6}
@media (min-width:640px){.form-grid .half{grid-column:span 3}.form-grid .two-third{grid-column:span 4}.form-grid .third{grid-column:span 2}}
@media (max-width:639px){.rechner .form-grid .half{grid-column:span 3}.rechner .form-grid .voll-mobil{grid-column:span 6}}
.field label,.field .label{display:block;font-weight:600;color:var(--ink);margin-bottom:.4rem;font-size:.96rem}
.field .opt{font-weight:400;color:var(--ink-muted);font-size:.88rem}
.field input[type="text"],.field input[type="email"],.field input[type="number"],.field input:not([type]),.field select,.field textarea{width:100%;font:inherit;color:var(--ink);background:var(--feld);border:1.5px solid var(--rand-feld);border-radius:var(--radius);padding:.7rem .85rem;transition:border-color .2s}
.field input::placeholder{color:#7d6e5e}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-muted)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--lime-on-paper);outline-offset:1px;border-color:var(--lime-on-paper)}
.field .hint,.rechner .hint{font-size:.86rem;color:var(--ink-muted);margin:.35rem 0 0}
.field-error{display:none;color:#a3261b;font-size:.88rem;font-weight:600;margin:.4rem 0 0}
.field.has-error .field-error{display:block}
.field.has-error input{border-color:#b4362a}
.check{grid-column:span 6}
.check label{display:flex;gap:.75rem;align-items:flex-start;font-weight:400;cursor:pointer;color:var(--ink);line-height:1.5}
.check input{width:20px;height:20px;margin:.15rem 0 0;accent-color:var(--lime-on-paper);flex:none}
.rechner .check{padding:.2rem 0 .3rem}
.unit-input{position:relative}
.unit-input input{padding-right:3.6rem !important;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.unit-input span{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:.8rem;color:var(--ink-muted);pointer-events:none}
.form-status{margin-top:1rem;font-weight:600;color:#a3261b}
.form-status:empty{display:none}
.form-status.is-info{color:var(--ink);background:var(--feld);border:1px dashed var(--rand-feld);padding:.8rem 1rem;border-radius:3px;font-weight:400}
.rechner .fine{font-family:var(--f-mono);font-size:.78rem;color:var(--ink-muted);margin-top:1rem;line-height:1.7}

/* Knöpfe im Werkblatt */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:600 1rem/1.2 var(--f-body);padding:.9em 1.35em;border-radius:var(--radius);border:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .2s,box-shadow .2s,background-color .2s}
.btn-buy{background:var(--lime);color:var(--on-lime);box-shadow:0 2px 0 var(--lime-on-paper)}
.btn-buy:hover{background:var(--lime-bright);transform:translateY(-1px)}
.btn-buy:active{transform:translateY(1px);box-shadow:none}
.btn-small{padding:.65em 1.05em;font-size:.92rem}
.btn-plain{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rand-feld)}
.btn-plain:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn[disabled],.btn[aria-busy="true"]{opacity:.55;cursor:not-allowed;transform:none}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn-buy:hover{transform:none}}

.form-grid [data-ganz]{grid-column:span 6}

/* Kopf der Generator-Seite: Text links, Beispielbild rechts */
.gen-kopf .innen{display:grid;gap:24px;align-items:end}
@media (min-width:960px){.gen-kopf .innen{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:48px}}
.gen-marken{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.gen-marken .etikett{margin:0}
.gen-marken .etikett span{padding:9px 15px;font-size:.92rem}
.gen-marken .mono{font:500 .85rem var(--schrift-mono);color:var(--akzent-text);letter-spacing:.04em}
.gen-bild{margin:0;max-width:400px;background:var(--flaeche);padding:10px;border-radius:var(--r-gross);box-shadow:var(--soft-hoch)}
.gen-bild img{width:100%;border-radius:16px}
.gen-werkbank{margin-top:28px}

/* Texte unter dem Werkblatt */
.gen-text{padding-top:24px}
.gen-text .prosa{max-width:46rem}
.gen-text .sz-schriften{list-style:none;padding:0;margin:0;display:grid;gap:0}
.gen-text .sz-schriften li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed var(--linie);padding:.45rem 0}
.gen-text .sz-schriften li+li{margin-top:0}
.gen-text .sz-schriften .mono{font:500 .8rem var(--schrift-mono);color:var(--leise);text-align:right}
.gen-fragen .fragen .antwort{padding:0 0 18px;color:var(--leise);max-width:46rem}
.gen-fragen .fragen .antwort p{padding:0}
.gen-fragen .fragen .antwort p+p{margin-top:.8em}
.gen-hinweis{margin-top:20px;font:500 .82rem/1.6 var(--schrift-mono);color:var(--leise);max-width:46rem}
.gen-hilfe{margin-top:24px}
@media (min-width:1000px){.gen-hilfe{grid-template-columns:repeat(3,1fr)}}
.gen-idee{justify-content:flex-start}
.gen-idee .gross{font:800 1.9rem/1 var(--schrift-titel);margin-top:8px}
.gen-idee p{margin-top:12px}

/* ---------- Übernommen ---------- */
/* schriftzug */
.sz textarea { width: 100%; font: inherit; font-size: 1.15rem; line-height: 1.4; min-height: 0; resize: vertical; }
.sz .field input[type="range"] { width: 100%; accent-color: var(--lime-on-paper); margin: .35rem 0 0; }
.sz .field input[type="file"] { width: 100%; font: inherit; font-size: .9rem; color: var(--ink-muted); }
.sz .field input[type="file"]::file-selector-button { font: inherit; font-weight: 700; color: var(--ink); background: transparent; border: 0; box-shadow: inset 0 0 0 1.5px var(--rand-feld); border-radius: var(--radius); padding: .55em .9em; margin-right: .8em; cursor: pointer; }
.sz .field input[type="file"]::file-selector-button:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.sz .regler-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.sz .regler-kopf output { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sz [hidden] { display: none !important; }

.sz-ausgabe { position: relative; }
@media (min-width: 980px) { .sz-ausgabe { position: sticky; top: 24px; } }
.sz-buehne { position: relative; border-radius: 2px; overflow: hidden; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--paper-line); }
.sz-buehne canvas { display: block; width: 100%; aspect-ratio: 4 / 3; cursor: grab; touch-action: none; }
.sz-buehne canvas:active { cursor: grabbing; }
.sz-buehne .ohne-3d { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 1.5rem; text-align: center; color: var(--ink-muted); margin: 0; }
.sz-buehne .sz-tipp { position: absolute; left: .7rem; bottom: .55rem; margin: 0; font-family: var(--f-mono); font-size: .72rem; color: var(--ink-muted); pointer-events: none; }
.sz-buehne::after { content: "rechnet …"; position: absolute; top: .6rem; right: .7rem; font-family: var(--f-mono); font-size: .75rem; color: var(--ink-muted); opacity: 0; transition: opacity .2s; }
.sz.rechnet .sz-buehne::after { opacity: 1; }

.sz-werte { margin: 1.1rem 0 0; display: grid; gap: .55rem; }
.sz-werte div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .75rem; align-items: baseline; border-bottom: 1px dashed var(--paper-line); padding-bottom: .5rem; }
.sz-werte dt { font-size: .9rem; color: var(--ink-muted); }
.sz-werte dd { margin: 0; font-family: var(--f-mono); font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.sz-werte .ergebnis dd { font-family: var(--f-body); font-weight: 700; font-size: 1rem; }
.sz-werte .ergebnis.gut dd { display: inline-flex; align-items: center; gap: .45rem; }
.sz-werte .ergebnis.gut dd::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px rgba(19, 120, 107, .25); flex: none; }
.sz-meldung { margin: .9rem 0 0; font-size: .88rem; color: var(--ink-muted); border-left: 2px solid var(--lime-on-paper); padding-left: .8rem; }
.sz-meldung.fehler { color: #a3261b; border-left-color: #b4362a; font-weight: 600; }
.sz-knoepfe { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .7rem; }
.sz-knoepfe .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
@media (max-width: 639px) { .sz-werte div { grid-template-columns: 1fr; gap: .1rem; } }

.sz-schriften { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .35rem; }
.sz-schriften li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--paper-line); padding: .3rem 0; }
.sz-schriften .mono { color: var(--ink-muted); }

/* Schmale Bildschirme: Vorschau und Downloads zuerst, darunter die Einstellungen */
@media (max-width: 979px) { .sz-ausgabe { order: -1; } }

/* Auswahl oben: Schriftzug, Schlüsselanhänger oder Klötzchen */
.sz-arten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.sz-arten label { position: relative; cursor: pointer; }
.sz-arten input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sz-arten span { display: grid; gap: .2rem; height: 100%; padding: .75rem .85rem; border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px var(--rand-feld); transition: box-shadow .15s, background .15s; }
.sz-arten strong { font-size: .98rem; color: var(--ink); }
.sz-arten small { font-size: .8rem; line-height: 1.35; color: var(--ink-muted); }
.sz-arten label:hover span { box-shadow: inset 0 0 0 1.5px var(--ink); }
.sz-arten input:checked + span { background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--lime-on-paper); }
.sz-arten input:checked + span strong::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--lime); margin-right: .45rem; vertical-align: .1em; }
.sz-arten input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 3px; }
.sz-unterfelder { margin-top: 1rem; }
@media (max-width: 639px) { .sz-arten { grid-template-columns: 1fr; } }

/* Icon-Auswahl: kleine Kacheln, die gewählte bekommt den Limetten-Rahmen */
.sz-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: .4rem; }
.sz-icons label { position: relative; cursor: pointer; }
.sz-icons input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sz-icons span { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px var(--rand-feld); color: var(--ink); transition: box-shadow .15s, background .15s; }
.sz-icons svg { width: 62%; height: 62%; fill: currentColor; }
.sz-icon-kein span { font-size: .78rem; color: var(--ink-muted); }
.sz-icons label:hover span { box-shadow: inset 0 0 0 1.5px var(--ink); }
.sz-icons input:checked + span { background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--lime-on-paper); }
.sz-icons input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
/* Viele Icons: nach Gruppen mit Überschrift über die ganze Breite, die Liste scrollt ab einer Höhe */
.sz-icons-lang { max-height: 19rem; overflow-y: auto; padding: 2px 4px 4px 2px; overscroll-behavior: contain; }
.sz-icon-gruppe { grid-column: 1 / -1; margin: .5rem 0 0; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.sz-icons-lang .sz-icon-kein { grid-column: 1 / span 2; }
.sz-icons-lang .sz-icon-kein span { aspect-ratio: auto; height: 100%; min-height: 2.75rem; }

/* Schriftauswahl mit Vorschau (assets/js/schriftwahl.js): „Abc“ in der jeweiligen Schrift rechts neben dem Namen */
.sw { position: relative; }
.sw-knopf { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--feld); border: 1.5px solid var(--rand-feld); border-radius: var(--radius); padding: .55rem 2.4rem .55rem .9rem; min-height: 3.1rem; cursor: pointer; position: relative; }
.sw-knopf::after { content: ""; position: absolute; right: 1rem; top: 50%; width: .5rem; height: .5rem; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); }
.sw-knopf:hover { border-color: var(--ink); }
.sw-knopf:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.sw-wert, .sw-eintrag { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.sw-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sw-abc { font-size: 1.55rem; line-height: 1.1; color: var(--ink); white-space: nowrap; }
.sw-liste { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 21rem; overflow-y: auto; background: var(--feld); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--rand-feld), 0 12px 28px rgba(42, 36, 33, .2); padding: .3rem 0; }
.sw-gruppe { padding: .55rem .9rem .25rem; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.sw-eintrag { width: 100%; font: inherit; color: var(--ink); background: none; border: 0; padding: .35rem .9rem; cursor: pointer; text-align: left; min-height: 2.6rem; }
.sw-eintrag:hover, .sw-eintrag:focus { background: var(--paper-2); outline: none; }
.sw-eintrag[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--lime-on-paper); background: var(--paper-2); font-weight: 600; }
.sw-eintrag:disabled { color: var(--ink-muted); cursor: default; background: none; font-size: .88rem; }
/* bild */

/* Ablage für die Datei: ganze Fläche klickbar, Datei kann hineingezogen werden */
.bz-ablage { position: relative; display: grid; gap: .3rem; justify-items: center; text-align: center; padding: 1.4rem 1rem; border-radius: var(--radius); border: 2px dashed var(--rand-feld); background: var(--feld); cursor: pointer; transition: border-color .15s, background .15s; }
.bz-ablage:hover, .bz-ablage.drueber { border-color: var(--lime-on-paper); background: var(--paper-2); }
.bz-ablage input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.bz-ablage:focus-within { outline: 2px solid var(--lime); outline-offset: 3px; }
.bz-ablage-text { color: var(--ink); font-size: 1rem; }
.bz-ablage-text strong { text-decoration: underline; text-decoration-color: var(--lime-on-paper); text-underline-offset: 3px; }
.bz-ablage-name { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-muted); overflow-wrap: anywhere; }
.bz #datei-hint { margin-top: .55rem; }
.bz-raster { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--paper-line); }

/* Auswahl "Lose Teile": vier Karten, zwei je Zeile */
.bz-lose { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bz .bz-lose label { margin: 0; font-weight: inherit; font-size: inherit; display: block; }
@media (max-width: 639px) { .bz-lose { grid-template-columns: 1fr; } }

/* Hinweis bei losen Teilen über der 3D-Vorschau */
.bz-lose-box { margin: 0 0 1rem; padding: 1rem 1.1rem 1.1rem; border-radius: var(--radius); background: #fff6f4; box-shadow: inset 0 0 0 1.5px #e3a49b; }
.bz-lose-box.erledigt { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--paper-line); }
.bz-lose-titel { font-size: 1.05rem; margin: 0 0 .35rem; color: #8f2318; }
.bz-lose-box.erledigt .bz-lose-titel { color: var(--ink); }
.bz-lose-text { margin: 0 0 .75rem; font-size: .9rem; color: var(--ink); }
.bz-draufsicht { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--feld); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--paper-line); }
.bz-lose-frage { margin: .85rem 0 .5rem; font-weight: 700; font-size: .92rem; }
.bz-lose-box.erledigt .bz-lose-frage { display: none; }
.bz-lose-box.erledigt .bz-wahl { margin-top: .75rem; }
.bz-wahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.bz-wahl .btn[aria-pressed="true"] { background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--lime-on-paper); }

/* Auf dem Handy steht die Vorschau oben, darum dort ein eigener Knopf zum Hochladen */
.bz-mobil-hoch { display: none; }
@media (max-width: 979px) { .bz-mobil-hoch { display: flex; justify-content: center; width: 100%; margin-bottom: 1rem; } }
/* bubble */
.bb #text { width: 100%; font: inherit; font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase; }
.bb .bb-groessen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bb .bb-groessen span { text-align: center; }
.bb .bb-groessen strong { font-variant-numeric: tabular-nums; }
@media (max-width: 639px) { .bb .bb-groessen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bb .bb-groessen small { white-space: nowrap; }
/* buchstabe */
.bn #name { width: 100%; font: inherit; font-size: 1.2rem; }
.bn #zeichen { width: 4.5rem; text-align: center; font-family: var(--f-display); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; }

/* Umschalter über der Vorschau: zusammengesetzt oder als Druckteile nebeneinander */
.bn-ansicht { display: inline-flex; margin: 0 0 .7rem; border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px var(--rand-feld); padding: 3px; gap: 3px; }
.bn-ansicht label { position: relative; cursor: pointer; }
.bn-ansicht input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bn-ansicht span { display: block; padding: .4rem .85rem; font-size: .88rem; font-weight: 600; color: var(--ink-muted); border-radius: calc(var(--radius) - 1px); }
.bn-ansicht input:checked + span { background: var(--paper-2); color: var(--ink); box-shadow: inset 0 0 0 2px var(--lime-on-paper); }
.bn-ansicht input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }

/* Kaufbereich unter den Werten */
.bn-kauf { margin-top: 1.3rem; padding: 1.1rem 1.15rem 1.2rem; border-radius: 3px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--paper-line); }
.bn-kauf .sz-knoepfe { margin-top: .9rem; }
.bn-kauf .fine { color: var(--ink-muted); margin-top: .8rem; font-size: .78rem; }
.bn-kauf .fine a { color: var(--ink); }
.bn-kauf .form-grid { margin-top: .9rem; }
.bn-kauf .check label { font-size: .9rem; }
.bn-preis { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; }
.bn-preis strong { font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.bn-preis span { font-size: .88rem; color: var(--ink-muted); }
.bn-paypal { margin-top: 1rem; max-width: 26rem; }
.bn-frei { margin: 0; font-weight: 600; color: var(--ink); display: flex; gap: .55rem; align-items: baseline; }
.bn-frei::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px rgba(19, 120, 107, .25); flex: none; transform: translateY(.05rem); }
.bn .sz-ausgabe > .sz-knoepfe { margin-top: .9rem; }
.bn .bn-passung { grid-column: span 6; margin: 0; padding: .7rem .9rem; background: var(--paper-2); border-left: 2px solid var(--lime-on-paper); }
.bn .bn-passung a { color: var(--ink); }
/* loop */

/* 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 var(--rand-feld); 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; }
/* tuerschild */
.ts #o_text, .ts #l_text { width: 100%; font: inherit; font-size: 1.1rem; }
.ts .ts-gross { align-self: end; padding-bottom: .6rem; }
.ts .ts-icon-kopf { margin-bottom: -.6rem; }
.ts .ts-label { font-weight: 600; color: var(--ink); }

/* Icons nach Zimmern: die Überschrift einer Gruppe geht über die ganze Breite, die Liste scrollt ab einer Höhe */
.ts-icons { max-height: 19rem; overflow-y: auto; padding: 2px 4px 4px 2px; overscroll-behavior: contain; }
.ts-icons .ts-gruppe { grid-column: 1 / -1; margin: .5rem 0 0; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.ts-icons .sz-icon-kein { grid-column: 1 / span 2; }
.ts-icons .sz-icon-kein span { aspect-ratio: auto; height: 100%; min-height: 2.75rem; }

/* Gekaufte Schilder auf diesem Gerät */
.ts-meine { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--paper-line); }
.ts-meine-titel { margin: 0 0 .4rem; font-weight: 700; color: var(--ink); }
.ts-meine ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .25rem; }
.ts-meine li { font-size: .9rem; }
.ts-meine .ts-leer { color: var(--ink-muted); }
.ts-laden { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; }
.ts-laden[aria-current] { font-weight: 700; text-decoration-color: var(--lime-on-paper); }
.ts-laden:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }