/* Foto-Schilder: Gestalter in der Anfrage und Vorschau im Team-Bereich */
@font-face { font-family: 'KK Pacifico'; src: url(Pacifico.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'KK Lilita'; src: url(LilitaOne.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'KK Abril'; src: url(AbrilFatface.ttf) format('truetype'); font-display: swap; }

.schild-ed { display: grid; gap: 10px; margin-top: 10px; }
.schild-ed-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; align-items: start; padding: 14px; border: 1.5px solid var(--orange, #ee7518); border-radius: 16px; background: var(--card, #fff); }
.schild-vorschau-box { position: sticky; top: 90px; display: grid; gap: 8px; }
.schild-vorschau-box .fhint { margin: 0; font-size: .82rem; }
.schild-vorschau { aspect-ratio: 4 / 3; touch-action: none; display: grid; place-items: center; padding: 12px; border-radius: 12px; background: repeating-conic-gradient(rgba(0, 0, 0, .035) 0 25%, transparent 0 50%) 0 0 / 22px 22px; }
.schild-vorschau svg { width: 100%; height: 100%; }
.schild-felder { display: grid; gap: 8px; min-width: 0; }
.schild-felder .fgrid { margin: 6px 0 0; }
.schild-felder .radio small { display: block; margin-top: 2px; }
.schild-lbl { margin: 8px 0 0; font-weight: 700; font-size: .9rem; }
.schild-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.schild-wahl label { position: relative; display: inline-flex !important; flex-direction: column; align-items: center; gap: 3px; min-width: 58px; padding: 6px 6px 5px; border: 1.5px solid var(--line, #ddd); border-radius: 10px; background: var(--card, #fff); cursor: pointer; font: 600 .78rem/1.1 var(--body, system-ui) !important; text-align: center; }
.schild-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.schild-wahl label:has(input:checked) { border-color: var(--orange, #ee7518); background: rgba(238, 117, 24, .1); }
.schild-wahl label:has(input:focus-visible) { outline: 2px solid var(--orange, #ee7518); outline-offset: 2px; }
.schild-wahl svg { width: 38px; height: 28px; color: var(--ink, #222); }
.schild-wahl small { font-size: .72rem; font-weight: 600; opacity: .8; }
.schild-wahl .schrift span { font-size: 1.3rem; line-height: 1.2; }
.schild-wahl.farben { gap: 4px; }
.schild-wahl.farben label { min-width: 0; padding: 3px; border-radius: 50%; }
.schild-wahl .farbe span { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(128, 128, 128, .6); }
.schild-farbe[hidden] { display: none; }
.schild-lbl [data-farbname] { font-weight: 600; opacity: .8; }
/* Ziehen in der Vorschau */
.schild-vorschau [data-teil] { cursor: grab; }
.schild-vorschau.zieht [data-teil] { cursor: grabbing; }
.schild-griff { fill: none; stroke: var(--orange, #ee7518); stroke-width: .8; stroke-dasharray: 3 2; opacity: 0; }
.schild-vorschau:hover .schild-griff, .schild-vorschau.zieht .schild-griff { opacity: .9; }
@media (hover: none) { .schild-griff { opacity: .6; } }
.schild-regler { display: grid !important; grid-template-columns: 110px 1fr 52px; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; }
.schild-regler input { width: 100%; accent-color: var(--orange, #ee7518); padding: 0; }
.schild-strecken { display: grid; gap: 6px; margin: 4px 0 2px; }
.schild-regler output { font-variant-numeric: tabular-nums; text-align: right; opacity: .8; }
.schild-mitte { justify-self: start; border: 0; background: none; padding: 2px 0; color: inherit; text-decoration: underline; font: 600 .85rem var(--body, system-ui); cursor: pointer; }
.schild-wahl .ohne { font-size: 1.2rem; line-height: 28px; }
.schild-ideen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.schild-ideen .fhint { margin: 0; }
.schild-ideen button { padding: 5px 10px; border: 1px dashed var(--line, #ccc); border-radius: 999px; background: none; font: 600 .8rem var(--body, system-ui); color: inherit; cursor: pointer; }
.schild-ideen button:hover { border-color: var(--orange, #ee7518); }
.schild-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.schild-zeile { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1.5px solid var(--line, #ddd); border-radius: 14px; background: var(--card, #fff); }
.schild-zeile .btn { padding: 8px 14px; }
.schild-mini svg { width: 76px; height: 56px; display: block; }
.schild-txt { display: grid; gap: 2px; min-width: 0; }
.schild-txt small { font-size: .82rem; opacity: .75; }
.schild-x { border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: inherit; padding: 6px; }
.schild-plus { justify-self: start; }

/* Team-Bereich */
.schild-team { display: grid; gap: 10px; }
.schild-team .schild-zeile { grid-template-columns: 110px minmax(0, 1fr); }
.schild-team .schild-mini svg { width: 110px; height: 82px; }
.schild-team .stl-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.schild-team .stl-row input { width: 90px; }
.schild-team [data-schild-msg] { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.schild-team [data-schild-msg] > span { grid-column: 1 / -1; }
.schild-team [data-schild-msg] .btn { padding: 7px 12px; }

@media (max-width: 700px) {
  .schild-ed-panel { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  .schild-vorschau-box { display: contents; }
  .schild-vorschau { position: sticky; top: 64px; z-index: 2; aspect-ratio: auto; height: 170px; background-color: var(--card, #fff); box-shadow: 0 6px 12px -10px rgba(0, 0, 0, .4); }
  .schild-regler { grid-template-columns: 96px 1fr 48px; }
  .schild-zeile { grid-template-columns: 60px minmax(0, 1fr) auto; }
  .schild-zeile .schild-x { grid-column: 3; grid-row: 1; }
  .schild-zeile [data-bearbeiten] { grid-column: 1 / -1; justify-self: start; }
  .schild-mini svg { width: 60px; height: 46px; }
}

/* Bild in der Auswahl-Kachel der Anfrage */
.choice-head .schild-thumb { width: 64px; height: 64px; flex: none; border-radius: 12px; background: #fbefe2; display: grid; place-items: center; }
.choice-head .schild-thumb svg { width: 50px; height: 38px; }

/* Schilder-Shop (/foto-schilder/, /widerruf/, /shop-agb/) */
.shop-h { font: 600 1.35rem/1.2 var(--display, serif); margin: 28px 0 12px; }
#shop-bestellen > .shop-h:first-child { margin-top: 0; }
#shop-form { display: grid; gap: 14px; }
#shop-form .shop-h { margin-bottom: 0; }
.shop-zahl { display: grid; gap: 10px; }
.shop-zahl .radio span { display: grid; gap: 2px; }
.shop-zahl small { color: var(--muted, #777); font-weight: 500; }
.shop-kaufen { justify-self: start; font-size: 1.05rem; }
.shop-frei { margin: 0; font-size: .9rem; font-weight: 600; color: var(--orange-ink, #b85a12); }
.shop-frei:empty { display: none; }
.shop-frei.ok { color: #2e8b57; }
.shop-text { max-width: 760px; padding-bottom: clamp(36px, 6vw, 72px); }
.shop-text h2 { font: 600 1.15rem/1.3 var(--body, system-ui); margin: 26px 0 8px; }
.shop-text p { margin: 0 0 10px; }
.shop-infos details { border: 1px solid var(--line, #ddd); border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; }
.shop-infos summary { cursor: pointer; font-weight: 700; }
.shop-wr { display: grid; gap: 14px; margin-top: 16px; }
#wr-danke { margin-top: 16px; }
/* Vorlagen mit Stab zum Hochhalten */
.schild-vorlagen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.schild-vorlagen button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 6px; border: 1.5px solid var(--line, #ddd); border-radius: 12px; background: var(--card, #fff); color: inherit; cursor: pointer; font: 600 .76rem/1.15 var(--body, system-ui); text-align: center; }
.schild-vorlagen button:hover, .schild-vorlagen button:focus-visible { border-color: var(--orange, #ee7518); outline: none; }
.schild-vorlagen span { display: block; width: 100%; height: 76px; }
.schild-vorlagen svg { width: 100%; height: 100%; }
@media (max-width: 520px) { .schild-vorlagen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }