/* ---- form.css: Kontaktformular und individuelle Spielanfrage ----
   Gilt für view/kontakt.html und view/individuelle-spielanfrage.html, zusätzlich
   zu global.css und content.css. Die Regeln folgen der Design-Vorlage
   und stehen in deren Reihenfolge (spätere Regeln überschreiben frühere,
   darum auch die vielen !important). Nicht übernommen: Turnstile (.ts-box);
   der Spam-Schutz läuft über Honeypot und Rate-Limit im Backend. */

.contact .section-tag {display:block;font-family:var(--font-heading);font-size:1.7rem;font-weight:700;text-transform:none;letter-spacing:0.01em;margin-bottom:36px}
.contact-form {text-align:left;display:flex;flex-direction:column}
.form-row {display:flex;flex-direction:column;gap:6px}
.form-row label {font-weight:600}
.form-row input,
.form-row textarea {font-family:inherit;transition:border-color 0.2s}
.form-row input:focus,
.form-row textarea:focus {outline:none}
.form-row textarea {resize:vertical;min-height:120px}
.contact-form .btn-primary {align-self:flex-start;border:none;cursor:pointer;font-family:inherit}
.contact-note {font-weight:600;font-size:0.9rem}
.contact {background:#4a0c12;color:var(--cream)}
.contact .section-inner {text-align:left;max-width:var(--max-width);padding:64px 24px 72px}
.contact-grid {display:grid;grid-template-columns:1fr;gap:32px}
.contact .section-tag {color:var(--cream);margin:0 0 16px;text-align:left}
.contact-intro p {line-height:1.65;color:var(--cream);max-width:440px;margin-bottom:18px}
.contact-form {max-width:none;margin:0;gap:16px}
.form-row label {color:var(--cream);font-size:0.8rem;letter-spacing:0.06em;text-transform:uppercase}
.form-row input,
.form-row textarea {background:rgba(255,255,255,0.06);border:1px solid rgba(212,175,55,0.45);border-radius:0;color:var(--cream);padding:14px 16px;font-size:1rem}
.form-row input:focus,
.form-row textarea:focus {border-color:var(--gold);background:rgba(255,255,255,0.1)}
.contact-form .btn-primary {background:var(--red);box-shadow:none;padding:14px 34px;transition:background 0.2s}
.contact-form .btn-primary:hover {background:var(--red-light);transform:none;box-shadow:none}
.contact-note {color:var(--gold)}
@media (min-width:900px) {
  .contact .section-inner {padding:96px 32px 104px}
}
@media (min-width:900px) {
  .contact-grid {grid-template-columns:1fr 1.2fr;gap:72px;align-items:start}
}
.contact .form-row input,
.contact .form-row textarea {border-radius:12px}
.contact-form .btn-primary {border-radius:999px}
.contact-form .btn-primary {border-radius:var(--btn-radius)}
.contact-form .btn-primary {transition:background 0.2s}
.contact-form .btn-primary:hover {background:var(--red-light);transform:none;box-shadow:none}
.contact-form .btn-primary:hover {box-shadow:none}
.contact-form .btn-primary,
.contact-form .btn-primary:hover {box-shadow:none}
.contact-reach {margin-top:24px}
.contact-reach h3 {font-family:var(--font-heading);font-size:1.2rem;color:var(--gold);margin-bottom:8px}
.contact-reach p {line-height:1.8;color:var(--cream)}
.contact-reach a {color:var(--cream);text-decoration:underline;text-underline-offset:3px}
.contact-reach a:hover {color:var(--gold)}
.contact .section-inner {max-width:var(--max-width);padding-left:32px;padding-right:32px}
.contact h2 {color:var(--gold) !important}
.contact h3 {color:var(--cream) !important}
.contact h2 {text-align:center}
.contact .section-inner h2 {text-align:left}
.form-row select,
.form-row input[type="number"],
.form-row input[type="tel"] {font-family:inherit;background:rgba(255,255,255,0.06);border:1px solid rgba(212,175,55,0.45);border-radius:0;color:var(--cream);padding:14px 16px;font-size:1rem;width:100%}
.form-row select:focus,
.form-row input:focus {outline:none;border-color:var(--gold);background:rgba(255,255,255,0.1)}
.form-row select option {color:#222;background:#fff}
.form-opt {font-weight:400;text-transform:none;letter-spacing:0;opacity:.7}
.form-hp {position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-note.is-error {color:#ffb3b3}
.contact-reach p + p {margin-top:10px}
.form-row-2 {display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:520px) {
  .form-row-2 {grid-template-columns:1fr 1fr}
}
.needs {border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.needs legend {color:var(--cream);font-size:0.8rem;letter-spacing:0.06em;text-transform:uppercase;font-weight:600;padding:0;margin-bottom:10px}
.need-item {border:1px solid rgba(212,175,55,0.45);background:rgba(255,255,255,0.04)}
.need-check {display:flex !important;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;text-transform:none !important;letter-spacing:0 !important;font-size:1rem !important;font-weight:500 !important}
.need-check input {width:20px;height:20px;accent-color:var(--gold);flex:none;margin:0;padding:0}
.need-item:has(input:checked) {border-color:var(--gold);background:rgba(255,255,255,0.08)}
.need-detail {padding:0 16px 16px}
.need-detail[hidden] {display:none}
.need-detail input,
.need-detail textarea {width:100%;font-family:inherit;background:rgba(255,255,255,0.06);border:1px solid rgba(212,175,55,0.45);border-radius:0;color:var(--cream);padding:12px 14px;font-size:1rem}
.need-detail input:focus,
.need-detail textarea:focus {outline:none;border-color:var(--gold)}
.contact-form {gap:14px}
@media (min-width:640px) {
  .contact-form {display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;align-items:start}
}
@media (min-width:640px) {
  .contact-form > .form-full,
  .contact-form > .form-row-2,
  .contact-form > .btn-primary,
  .contact-form > .contact-note,
  .contact-form > .needs {grid-column:1 / -1}
}
@media (min-width:640px) {
  .contact-form .btn-primary {justify-self:start}
}
.form-row {gap:5px}
.form-row label {font-size:0.7rem;letter-spacing:0.08em;opacity:.85}
.form-row input,
.form-row textarea,
.form-row select {padding:10px 13px !important;font-size:0.97rem !important;border-radius:8px !important;border:1px solid rgba(244,239,230,0.28) !important;background:rgba(255,255,255,0.05) !important}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {border-color:var(--gold) !important;box-shadow:0 0 0 3px rgba(201,164,58,0.18);background:rgba(255,255,255,0.09) !important}
.form-row textarea {min-height:96px}
.form-row-2 {gap:14px 16px}
.contact-form .btn-primary {padding:12px 30px;border-radius:var(--btn-radius)}
.needs {flex-direction:row !important;flex-wrap:wrap;gap:8px !important}
.needs legend {flex:0 0 100%;width:100%;margin-bottom:4px;font-size:0.7rem;letter-spacing:0.08em;opacity:.85;float:none}
.need-item {display:contents}
.need-check {display:inline-flex !important;padding:8px 16px !important;gap:8px !important;border:1px solid rgba(244,239,230,0.28);border-radius:999px;background:rgba(255,255,255,0.05);font-size:0.92rem !important;transition:background .15s,border-color .15s}
.need-check:hover {border-color:var(--gold)}
.need-check input {position:absolute;opacity:0;width:1px;height:1px}
.need-check:has(input:checked) {background:var(--gold);border-color:var(--gold);color:#3d0a10;font-weight:600 !important}
.need-check:has(input:checked)::before {content:"✓";font-weight:700}
.need-check:has(input:focus-visible) {box-shadow:0 0 0 3px rgba(201,164,58,0.35)}
.need-item:has(input:checked) {border:0;background:none}
.need-detail {flex:0 0 100%;padding:0 !important}
.need-detail input,
.need-detail textarea {padding:10px 13px;border-radius:8px;border-color:rgba(244,239,230,0.28)}
.contact-form input:not([type="checkbox"]),
.contact-form textarea,
.contact-form select,
.form-row input,
.form-row textarea,
.form-row select,
.need-detail input,
.need-detail textarea {border-radius:var(--btn-radius) !important}
.contact-form select {-webkit-appearance:none;appearance:none;padding-right:38px !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a43a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 14px center !important}
.needs {display:grid !important;grid-template-columns:1fr;gap:10px !important}
.needs legend {grid-column:1 / -1;display:block;width:100%;margin:0 0 2px}
@media (min-width:640px) {
  .needs {grid-template-columns:1fr 1fr}
}
.need-item {display:flex !important;flex-wrap:wrap;align-items:center;gap:0 14px;min-height:52px;padding:0 16px;border:1px solid rgba(244,239,230,0.28) !important;border-radius:var(--btn-radius);background:rgba(255,255,255,0.05) !important;transition:border-color .15s,background .15s}
.need-item:hover {border-color:rgba(201,164,58,0.7) !important}
.need-item:has(input:checked) {grid-column:1 / -1;border-color:var(--gold) !important;background:rgba(201,164,58,0.10) !important;padding-bottom:0}
.need-item:has(input:checked) .need-check {min-height:50px}
.need-check {flex:1 1 auto;min-width:150px;padding:0 !important;border:0 !important;background:none !important;border-radius:0 !important;min-height:50px;font-size:0.97rem !important;color:var(--cream) !important;font-weight:500 !important;gap:12px !important}
.need-check::before {content:"";flex:none;width:20px;height:20px;border:1.5px solid rgba(244,239,230,0.55);border-radius:6px;background:transparent center / 12px no-repeat;transition:background-color .15s,border-color .15s}
.need-check:has(input:checked) {background:none !important;color:var(--cream) !important;font-weight:600 !important}
.need-check:has(input:checked)::before {content:"";background-color:var(--gold);border-color:var(--gold);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.500l2.700 2.700L10 3.200' fill='none' stroke='%233d0a10' stroke-width='1.900' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");font-weight:400}
.need-check:has(input:focus-visible)::before {box-shadow:0 0 0 3px rgba(201,164,58,0.35)}
.need-check:has(input:focus-visible) {box-shadow:none}
.need-detail {flex:1 1 260px;padding:0 0 14px !important}
@media (min-width:640px) {
  .need-item:has(input:checked) {flex-wrap:nowrap}
}
@media (min-width:640px) {
  .need-item:has(input:checked) .need-check {flex:0 0 200px}
}
@media (min-width:640px) {
  .need-item:has(input:checked) .need-detail {flex:1;padding:8px 0 !important}
}
.need-detail input,
.need-detail textarea {padding:9px 13px !important}
.need-detail textarea {min-height:64px;resize:vertical}
.form-consent {display:flex !important;align-items:flex-start;gap:12px;cursor:pointer;color:var(--cream);font-size:0.88rem;line-height:1.5;text-transform:none;letter-spacing:0;font-weight:400}
.contact-form > .form-consent {grid-column:1 / -1}
.form-consent input {position:absolute;opacity:0;width:1px;height:1px}
.form-consent::before {content:"";flex:none;width:20px;height:20px;margin-top:1px;border:1.5px solid rgba(244,239,230,0.55);border-radius:6px;background:transparent center / 12px no-repeat;transition:background-color .15s,border-color .15s}
.form-consent:has(input:checked)::before {background-color:var(--gold);border-color:var(--gold);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.500l2.700 2.700L10 3.200' fill='none' stroke='%233d0a10' stroke-width='1.900' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.form-consent:has(input:focus-visible)::before {box-shadow:0 0 0 3px rgba(201,164,58,0.35)}
.form-consent:has(input:invalid):has(~ .btn-primary:active)::before {border-color:#ffb3b3}
.need-item:has(input:checked) {grid-column:auto !important;flex-wrap:nowrap !important;padding-bottom:0 !important}
.need-item:has(input:checked) .need-check {flex:1 1 auto !important;min-width:0}
.need-item:has(input:checked) .need-detail {flex:0 1 46% !important;min-width:0;padding:0 !important}
.need-detail input,
.need-detail textarea {width:100%;background:transparent !important;border:0 !important;border-bottom:1.5px solid var(--gold) !important;border-radius:0 !important;padding:6px 2px !important;font-size:0.95rem !important;box-shadow:none !important}
.need-detail input:focus,
.need-detail textarea:focus {background:transparent !important;border-bottom-color:var(--cream) !important;box-shadow:none !important}
.need-detail input::placeholder,
.need-detail textarea::placeholder {color:rgba(244,239,230,0.45);font-size:0.85rem}
.need-detail input[type="number"] {-moz-appearance:textfield;appearance:textfield;text-align:right;font-weight:600}
.need-detail textarea {min-height:0 !important;height:2.1em;resize:none;overflow:hidden;line-height:1.4}
.need-item:has(#need6:not(:disabled)) {flex-wrap:wrap !important;padding-bottom:12px !important}
.need-item:has(#need6:not(:disabled)) .need-detail {flex:1 1 100% !important}
.need-item:has(#need6:not(:disabled)) .need-check {flex:1 1 100% !important;min-height:46px}
.need-item:has(#need6:not(:disabled)) .need-detail textarea {height:auto;min-height:56px !important;overflow:auto;resize:vertical}
@media (max-width:420px) {
  .need-item:has(input:checked) .need-detail {flex-basis:50% !important}
}
.need-detail select {width:100%;background-color:transparent !important;border:0 !important;border-bottom:1.5px solid var(--gold) !important;border-radius:0 !important;padding:6px 22px 6px 2px !important;font-size:0.95rem !important;color:var(--cream);box-shadow:none !important;background-position:right 2px center !important;cursor:pointer;font-family:inherit}
.need-detail select:focus {outline:none;border-bottom-color:var(--cream) !important;box-shadow:none !important}
.need-detail select:invalid {color:rgba(244,239,230,0.55)}
.contact-form .need-detail input,
.contact-form .need-detail textarea,
.contact-form .need-detail select {border-radius:0 !important}
.need-hint {display:block;margin-top:4px;font-size:0.72rem;line-height:1.3;color:rgba(244,239,230,0.6);letter-spacing:0;text-transform:none;font-weight:400}
.map-section {width:100%;line-height:0;background:#4a0c12}
.map-embed {display:block;width:100%;height:34vh;min-height:280px;max-height:420px;border:0}
.upload-input {position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.upload-drop {display:flex !important;align-items:center;gap:14px;padding:14px 16px;border:1.5px dashed rgba(244,239,230,0.35);border-radius:var(--btn-radius);background:rgba(255,255,255,0.04);cursor:pointer;text-transform:none !important;letter-spacing:0 !important;font-weight:400 !important;font-size:0.97rem !important;opacity:1 !important;transition:border-color .15s,background .15s}
.upload-drop:hover,
.upload-drop:focus-within,
.form-upload:has(.upload-input:focus-visible) .upload-drop {border-color:var(--gold);background:rgba(201,164,58,0.08)}
.upload-drop svg {width:26px;height:26px;flex:none;color:var(--gold)}
.upload-drop b {display:block;font-weight:600}
.upload-drop small {display:block;font-size:0.74rem;line-height:1.35;color:rgba(244,239,230,0.65);margin-top:2px}
.upload-list {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.upload-list:empty {display:none}
.upload-list li {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 12px;border-radius:10px;background:rgba(255,255,255,0.07);font-size:0.86rem;color:var(--cream)}
.upload-list li.is-error {background:none;color:#ffb3b3;padding:0 2px}
.upload-list button {border:0;background:none;color:var(--cream);font-size:1.2rem;line-height:1;cursor:pointer;padding:0 4px;opacity:.8}
.upload-list button:hover {color:var(--gold);opacity:1}
.map-consent {display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3d0a10,#4a0c12 55%,#6e1219);color:var(--cream);line-height:1.5;padding:32px 24px;text-align:center}
.map-consent-inner {max-width:560px;display:flex;flex-direction:column;align-items:center;gap:10px}
.map-consent svg {width:36px;height:36px;color:var(--gold)}
.map-consent h2 {font-family:var(--font-heading);font-size:1.3rem;margin:0;color:var(--cream)}
.map-consent p {font-size:0.9rem;opacity:.85;margin:0}
.map-consent-buttons {display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.map-consent .btn-primary {border:0;cursor:pointer;font-family:inherit;padding:12px 28px}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible {outline:2px solid #fff !important;outline-offset:2px;box-shadow:0 0 0 5px rgba(201,164,58,.85) !important}
.need-detail input:focus-visible,
.need-detail textarea:focus-visible,
.need-detail select:focus-visible {box-shadow:none !important;outline-offset:3px}
.contact-form input[type="checkbox"]:focus-visible,
.upload-input:focus-visible {box-shadow:none}
.form-row input,
.form-row textarea,
.form-row select {border-color:rgba(244,239,230,0.6) !important}
.need-item,
.upload-drop {border-color:rgba(244,239,230,0.55) !important}
.contact-form ::placeholder {color:rgba(244,239,230,0.72);opacity:1}

/* ---- Anpassung an den Shop ---- */
/* Fehler- und Erfolgsmeldung unter dem Formular. */
.contact-note {
  grid-column: 1 / -1;
}

/* Pflichtfeld mit Fehler (wird von inquiry.js gesetzt). */
.contact-form [aria-invalid="true"] {
  border-color: #ffb3b3 !important;
}

.contact-form .btn-primary:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* global.css setzt label auf display:grid, dadurch stand «(optional)» in einer
   eigenen Zeile. Es soll direkt hinter der Beschriftung stehen. */
.contact-form .form-row > label {
  display: block;
}

/* Titel der Karten-Einwilligung: main h2 (content.css) macht Überschriften
   dunkel, auf dem roten Hintergrund braucht es helle Schrift. */
.map-consent h2 {
  color: var(--cream) !important;
  font-size: 1.3rem !important;
  margin: 0 !important;
}

/* Detailfelder im Bedarf (Zahl, Auswahl, Text): Der Fokusrahmen lag mit
   outline-offset ausserhalb und ragte über den Rand der Zeile hinaus. Jetzt
   liegt er innen, mit etwas Abstand zum Text. */
.contact-form .need-detail input:focus-visible,
.contact-form .need-detail textarea:focus-visible,
.contact-form .need-detail select:focus-visible {
  outline: 2px solid var(--cream) !important;
  outline-offset: -2px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.contact-form .need-detail select:focus-visible {
  padding-right: 26px !important;
}

/* Variablen aus content.css, die auf der Startseite (index.css) fehlen.
   Ohne --max-width wurde der Bereich dort über die ganze Breite gezogen, ohne
   --btn-radius waren Felder und Knopf eckig. Hier lokal gesetzt, damit andere
   Teile der Startseite unverändert bleiben. */
.contact {
  --max-width: 1200px;
  --btn-radius: var(--button-radius, 12px);
}

/* Textlinks im Kontaktbereich: Das Standard-Olivgrün (.text-link) ist auf
   dunkelrotem Grund kaum lesbar. Gold, Hover creme. */
.contact .text-link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact .text-link:hover {
  color: var(--cream);
}