/* Sonderanfrage (2026-10-11): Formular /sonderanfrage mit Fotos und Skizzen, Fehler und Bestätigung. Eigene Datei, im
   Inhalt der Textseite eingebunden (link im body ist erlaubt). Farben aus farben.css (--wt-…) und shop.css/stil-*.css
   (--ink, --line, --muted, --papier …). Mobil zuerst; .sa-js setzt public/static/shop/js/sonderanfrage.js. */

.sa-einleitung { font-size: 17px; }

/* ---------- So läuft's ---------- */
.rechtstext .sa-ablauf { list-style: none; display: grid; gap: 8px; margin: 18px 0 26px; padding: 0; counter-reset: sa; }
.rechtstext .sa-ablauf li {
  position: relative; margin: 0; padding: 12px 14px 12px 54px; border-radius: 14px; background: var(--wt-akzent-xl, #eef2f5);
  line-height: 1.45; counter-increment: sa;
}
.sa-ablauf li::before {
  content: counter(sa); position: absolute; left: 14px; top: 12px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--wt-holz, #a8734e); color: #fff; font: 800 14px/28px var(--titel); text-align: center;
}
.sa-ablauf b { display: block; font: 700 15px/1.3 var(--titel); color: var(--ink); }
.sa-ablauf span { font-size: 14.5px; color: var(--ink-2); }
@media (min-width: 760px) { .rechtstext .sa-ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Formular ---------- */
.sa-form { margin: 8px 0; }
@media (min-width: 641px) {
  .sa-form { padding: 4px 28px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--papier, #fff); }
}
.rechtstext .sa-schritt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 30px 0 14px; font-size: 19px; }
.sa-schritt > span[aria-hidden] {
  flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--wt-akzent); color: #fff; font: 800 15px/1 var(--titel);
}
.sa-feld { display: grid; gap: 6px; min-width: 0; margin: 0 0 18px; }
.sa-feld > label, .sa-arten legend { font: 700 15px/1.35 var(--titel); color: var(--ink); }
.sa-frei { font: 400 14px/1.35 "Open Sans", system-ui, sans-serif; color: var(--muted); }
.rechtstext .sa-hilfe { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.sa-feld input[type="text"], .sa-feld input[type="email"], .sa-feld input[type="tel"], .sa-feld textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--wt-linie-2, #c8d0d5); border-radius: 12px;
  background: #fff; color: var(--ink); font: 16px/1.4 "Open Sans", system-ui, sans-serif;   /* 16 px: kein Zoom beim Antippen (iOS) */
}
.sa-feld textarea { min-height: 120px; resize: vertical; }
.sa-feld #sa-masse { min-height: 72px; }
.sa-feld input:focus, .sa-feld textarea:focus {
  border-color: var(--wt-akzent); outline: 3px solid color-mix(in srgb, var(--wt-akzent) 25%, transparent); outline-offset: 0;
}
.sa-ungueltig input[type="text"], .sa-ungueltig input[type="email"], .sa-ungueltig input[type="tel"], .sa-ungueltig textarea { border-color: var(--wt-fehler, #a83a2a); }
.rechtstext .sa-fehler-text { margin: 0; font-size: 14px; font-weight: 600; color: var(--wt-fehler, #a83a2a); }
.sa-fehler-text::before { content: "! "; }
.sa-reihe { display: grid; gap: 0 16px; }
@media (min-width: 641px) { .sa-reihe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Worum geht es? – Auswahl als Knöpfe */
.sa-arten { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.sa-arten legend { margin: 0 0 8px; padding: 0; }
.sa-art-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-art { position: relative; display: inline-flex; max-width: 100%; cursor: pointer; }
.sa-art input { position: absolute; left: 16px; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; }
.sa-art span {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 16px 9px 13px; border: 1.5px solid var(--wt-linie-2, #c8d0d5);
  border-radius: 999px; background: #fff; color: var(--ink); font: 600 15px/1.25 "Open Sans", system-ui, sans-serif;
  transition: background-color .15s, border-color .15s, color .15s;
}
.sa-art span::before {
  content: ""; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--wt-linie-2, #c8d0d5); border-radius: 50%; background: #fff;
  transition: border-width .12s, border-color .12s;
}
.sa-art:hover span { border-color: var(--wt-akzent); }
.sa-art input:checked + span { background: var(--wt-akzent-l); border-color: var(--wt-akzent); color: var(--wt-akzent-d); }
.sa-art input:checked + span::before { border: 5.5px solid var(--wt-akzent); }
.sa-art input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--wt-akzent) 35%, transparent); outline-offset: 2px; }
.sa-ungueltig .sa-art span { border-color: color-mix(in srgb, var(--wt-fehler, #a83a2a) 55%, var(--wt-linie-2, #c8d0d5)); }

/* ---------- Fotos und Skizzen ---------- */
.sa-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 124px; padding: 18px 16px;
  border: 2px dashed color-mix(in srgb, var(--wt-akzent) 45%, var(--wt-linie-2, #c8d0d5)); border-radius: 16px;
  background: var(--wt-akzent-xl, #eef2f5); color: var(--wt-akzent-d); text-align: center; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.sa-zone:hover, .sa-zone.sa-drueber { background: var(--wt-akzent-l); border-color: var(--wt-akzent); }
.sa-zone.sa-drueber { border-style: solid; }
.sa-zone svg { color: var(--wt-akzent); }
.sa-zone-titel { font: 700 16px/1.3 var(--titel); }
.sa-zone-text { display: none; font-size: 14px; color: var(--muted); }
.sa-js .sa-zone-text { display: block; }   /* „hierher ziehen“ geht nur mit Skript */
.sa-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .sa-touch { display: inline; }
  .sa-maus, .sa-js .sa-zone-text.sa-maus { display: none; }
}
.sa-dateien:focus-within .sa-zone { outline: 3px solid color-mix(in srgb, var(--wt-akzent) 35%, transparent); outline-offset: 2px; }
.sa-dateien input[type="file"] { max-width: 100%; font-size: 15px; }
/* mit Skript: Kacheln statt des Dateifelds (es bleibt per Tastatur erreichbar und schickt die Dateien) */
.sa-js .sa-dateien input[type="file"] { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.sa-dateien { position: relative; }
.sa-ungueltig .sa-zone { border-color: var(--wt-fehler, #a83a2a); }

.rechtstext .sa-kacheln { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 0; padding: 0; }
.rechtstext .sa-kacheln[hidden] { display: none; }
@media (min-width: 560px) { .rechtstext .sa-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rechtstext .sa-kachel {
  display: flex; flex-direction: column; min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: #fff;
}
.sa-kachel-bild { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2, #f1f3f4); }
.sa-kachel-bild img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }   /* Hochformat dehnt die Kachel nicht */
.sa-kachel-bild svg { width: 42px; height: 42px; color: var(--wt-holz, #a8734e); }
.sa-kachel-text { min-width: 0; padding: 8px 10px 2px; line-height: 1.35; }
.sa-kachel-name { display: block; overflow: hidden; color: var(--ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.sa-kachel-info { display: block; color: var(--muted); font-size: 12.5px; }
.rechtstext .sa-kachel-fehler { border-color: var(--wt-fehler, #a83a2a); }
.sa-kachel-fehler .sa-kachel-bild { background: var(--wt-fehler-bg, #fbeae5); }
.sa-kachel-fehler .sa-kachel-info { color: var(--wt-fehler, #a83a2a); font-weight: 600; }
.sa-entfernen {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 40px; margin: 4px 8px 8px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font: 600 13.5px/1 "Open Sans", system-ui, sans-serif; cursor: pointer;
}
.sa-entfernen svg { width: 14px; height: 14px; }
.sa-entfernen:hover, .sa-entfernen:focus-visible { border-color: var(--wt-fehler, #a83a2a); color: var(--wt-fehler, #a83a2a); }
@media (hover: none) and (pointer: coarse) { .sa-entfernen { min-height: 44px; } }
.rechtstext .sa-meldung { margin: 2px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--wt-fehler-bg, #fbeae5); color: var(--wt-fehler, #a83a2a); font-size: 14px; font-weight: 600; }
.rechtstext .sa-meldung[hidden] { display: none; }

/* ---------- Absenden ---------- */
.sa-senden { width: 100%; margin-top: 8px; font-size: 16px; }
@media (min-width: 641px) { .sa-senden { width: auto; min-width: 280px; } }
.rechtstext .sa-klein { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
/* Feld nur für Programme – für Menschen unsichtbar, auch für Vorleseprogramme */
.sa-honig { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.sa-fehlerbox {
  margin: 20px 0; padding: 14px 18px; border-left: 4px solid var(--wt-fehler, #a83a2a); border-radius: 12px;
  background: var(--wt-fehler-bg, #fbeae5); color: #5f1410;
}
.rechtstext .sa-fehlerbox p { margin: 0 0 6px; }
.rechtstext .sa-fehlerbox p:last-child { margin: 0; }
.rechtstext .sa-fehlerbox ul { margin: 6px 0 0; }
.rechtstext .sa-fehlerbox a { color: #5f1410; font-weight: 600; }

/* ---------- Bestätigung ---------- */
.sa-ok { margin: 0 0 18px; padding: 16px 20px; border-left: 4px solid var(--wt-gut, #2f7a3a); border-radius: 12px; background: #e8f5ec; color: #173b26; }
.rechtstext .sa-ok p { margin: 0; }
.rechtstext .sa-ok-titel { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font: 800 19px/1.3 var(--titel); color: #173b26; }
.sa-ok-titel svg { flex: none; color: var(--wt-gut, #2f7a3a); }
.rechtstext .sa-vorgang { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.sa-vorgang strong {
  padding: 4px 12px; border-radius: 10px; background: var(--wt-holz-l, #f2e4d9); color: var(--wt-holz-dd, #7a5135);
  font: 800 18px/1.3 var(--titel); letter-spacing: .04em;
}
.sa-daten { display: grid; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--papier, #fff); }
.sa-daten div { display: grid; grid-template-columns: 1fr; gap: 2px 16px; padding: 10px 16px; border-top: 1px solid var(--line); }
.sa-daten div:first-child { border-top: 0; }
.sa-daten dt { font-weight: 700; color: var(--ink); }
.sa-daten dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 560px) { .sa-daten div { grid-template-columns: minmax(150px, 30%) 1fr; } }
.rechtstext .sa-dateiliste { margin: 0; padding-left: 18px; }
.rechtstext .sa-dateiliste li { margin: 0; }
.sa-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.rechtstext a.btn-hell, .rechtstext a.btn-hell:hover { color: var(--ink); text-decoration: none; }

/* ---------- Leistungen (2026-10-24, privat/lib/leistungen.php): Sprungleiste, Abschnitt „Was ich sonst noch mache“, Hinweis ---------- */
.lst-zeichen { display: block; aspect-ratio: 360 / 210; border-radius: 10px; overflow: hidden; }
.lst-zeichen.karte-kupfer { background: linear-gradient(155deg, #b5835c 0%, var(--wt-holz-dd, #7a5135) 100%); }
.lst-zeichen.karte-schiefer { background: linear-gradient(155deg, #5d7b92 0%, #2c3f4d 100%); }
.lst-zeichen img { display: block; width: 100%; height: 100%; padding: 6px; box-sizing: border-box; object-fit: contain; opacity: .82; }
.rechtstext .lst-sprung { margin: 16px 0 6px; }
.rechtstext .lst-sprung-titel { margin: 0 0 8px; font: 700 12px/1.3 var(--titel); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lst-sprung ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
@media (min-width: 641px) { .lst-sprung ul { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.rechtstext .lst-sprung li { margin: 0; }
.rechtstext .lst-sprung a { display: grid; gap: 6px; height: 100%; padding: 6px 6px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--papier, #fff);
  color: var(--ink); font: 700 13.5px/1.25 var(--titel); text-decoration: none; transition: border-color .15s, transform .15s; }
.rechtstext .lst-sprung a:hover { border-color: var(--wt-akzent); transform: translateY(-2px); }

.lst { margin-top: 48px; scroll-margin-top: calc(var(--kopf-h, 72px) + 16px); }
.lst-karten { display: grid; gap: 18px; margin-top: 18px; }
.lst-karte { display: grid; border: 1px solid var(--line); border-radius: 18px; background: var(--papier, #fff); overflow: hidden;
  scroll-margin-top: calc(var(--kopf-h, 72px) + 16px); }
.lst-karte.lst-gewaehlt, .lst-karte:target { border-color: var(--wt-akzent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--wt-akzent) 30%, transparent); }
@media (min-width: 700px) { .lst-karte { grid-template-columns: 290px minmax(0, 1fr); } }
.lst-bild figure, .lst-details figure { margin: 0; }
.lst-bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--foto, #ececec); }
@media (min-width: 700px) { .lst-bild { padding: 14px 0 14px 14px; } .lst-bild img { border-radius: 12px; } }
.rechtstext .lst-bild figcaption, .rechtstext .lst-details figcaption { margin-top: 6px; padding: 0 12px; font-size: 13px; line-height: 1.4; color: var(--muted); }
@media (min-width: 700px) { .rechtstext .lst-bild figcaption { padding: 0; } }
.lst-txt { min-width: 0; padding: 16px 18px 18px; }
.rechtstext .lst-zeile { margin: 0 0 2px; font: 700 12px/1.3 var(--titel); letter-spacing: .08em; text-transform: uppercase; color: var(--wt-akzent-d, #3d5668); }
.rechtstext .lst-karte h3 { margin: 0 0 8px; font-size: 20px; }
.rechtstext .lst-txt p { margin: 0 0 10px; }
.rechtstext .lst-txt ul { margin: 0 0 10px; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.rechtstext .lst-txt li { margin: 0 0 3px; }
.lst-mehr { margin: 4px 0 0; }
.lst-mehr summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font: 700 15px/1.3 var(--titel); color: var(--wt-akzent-d, #3d5668); }
.lst-mehr summary::-webkit-details-marker { display: none; }
.lst-mehr summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.lst-mehr[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.lst-mehr[open] summary { margin-bottom: 6px; }
.lst-details { display: grid; gap: 12px; margin: 10px 0 4px; }
@media (min-width: 560px) { .lst-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lst-details img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; }
.rechtstext .lst-details figcaption { padding: 0; }
.rechtstext .lst-knopf { margin: 12px 0 0; }
.rechtstext .lst-hinweis { margin: 0 0 16px; }

@media print {
  .kopfzeile, .fuss, .wa-knopf, .toast-bereich, .sa-knoepfe, .skip { display: none !important; }
  .lst-sprung, .lst-knopf { display: none !important; }
}