/* SCHMIDTWIRKUNG · Kontakt V7 · „Anforderungsschein“ (setzt css/v7.css voraus) */


/* Ausnahme: heller Fotokopf. Die rote Figur, vom Stift festgehalten.
   Desktop: Text links, Figur rechts im Bild. Handy: Text oben, eigener Ausschnitt darunter. */
.hero--photo { background: #BEC0C1; color: var(--ink); height: clamp(36rem, 76vh, 46rem); min-height: 0; display: flex; align-items: center; }
.hero--photo .hero__ground { inset: -4% -4% -4% 0; }
.hero--photo .hero__ground img { filter: none; object-position: 45% 50%; }
.hero--photo .hero__copy { padding-left: var(--gutter); max-width: min(46%, 36rem); }
.hero--photo .hero__title { margin-top: 0 !important; }
.v7 .hero--photo .hero__title { color: var(--red-ink) !important; }
.hero--photo .hero__sub { color: var(--ink); max-width: 36ch; }
@media (min-width: 1200px) { .hero--photo .hero__copy { padding-left: var(--gutter); margin-left: max(0px, calc((100vw - 76rem) / 2 - var(--gutter))); } }
@media (max-width: 760px) {
  .hero--photo { flex-direction: column; align-items: stretch; height: auto; padding-bottom: 0; }
  .hero--photo .hero__copy { max-width: none; padding-right: var(--gutter); }
  .hero--photo .hero__ground { order: 2; position: relative; inset: auto; margin-top: 1.5rem; aspect-ratio: 1300 / 864; transform: none !important; }
  .hero--photo .hero__ground img { object-position: 50% 50%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%); mask-image: linear-gradient(to bottom, transparent, #000 18%); }
}

/* Kopfleiste ganz oben durchsichtig wie auf den Projektseiten, beim Scrollen mit Grund */
.page-kontakt .bar[data-tone="paper"]:not(.is-scrolled) { background: transparent; box-shadow: none; }
.page-kontakt .bar[data-tone="paper"]:not(.is-scrolled) .bar__word { display: inline; } /* am Handy oben wie überall mit Schriftzug */

.ask { border-top: 0; }
.ask__wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; max-width: 76rem; }

/* ------------------------------------------------------------ Formular */
.form { min-width: 0; }
.form__part { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.25rem; min-width: 0; }
.form__part + .form__part { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--rule); }
.form__part legend { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 0.6rem; padding: 0; margin-bottom: 1.1rem; font-weight: 700; color: var(--ink); font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem); letter-spacing: -0.01em; }
.form__part legend span { font-family: var(--sc-font-display); text-transform: uppercase; color: var(--red-ink); font-size: 1.15em; }
.field { grid-column: 1 / -1; display: grid; gap: 0.4rem; min-width: 0; }
.field--half { grid-column: span 1; }
.field label { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.field .opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea, .select select {
  width: 100%; font: 400 1.02rem/1.45 var(--sc-font-text); color: var(--ink);
  background: var(--paper-hi);
  border: 1px solid var(--rule-strong); border-radius: 0.45rem;
  padding: 0.8rem 0.95rem;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease);
}
.field textarea { resize: vertical; min-height: 8.5rem; }
.field ::placeholder { color: #8C867F; opacity: 1; }
.field input:focus, .field textarea:focus, .select select:focus { outline: none; border-color: var(--red-ink); box-shadow: 0 0 0 3px rgba(218, 0, 9, 0.16); background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .field input:hover:not(:focus), .field textarea:hover:not(:focus), .select select:hover:not(:focus) { border-color: var(--ink-soft); }
}
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer; }
.select::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); translate: 0 -70%; rotate: 45deg; pointer-events: none; }
.field__hint { font-size: 0.8rem; color: var(--ink-soft); text-align: right; }

.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 0.8rem; margin-top: 0.4rem; }
.field--check input { appearance: none; -webkit-appearance: none; width: 1.35rem; height: 1.35rem; margin: 0.1rem 0 0; border: 2px solid var(--ink-soft); border-radius: 0.25rem; background: #fff; display: grid; place-items: center; cursor: pointer; }
.field--check input::after { content: ""; width: 0.72rem; height: 0.4rem; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; rotate: -45deg; translate: 0 -0.08rem; opacity: 0; }
.field--check input:checked { background: var(--red-ink); border-color: var(--red-ink); }
.field--check input:checked::after { opacity: 1; }
.field--check input:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.field--check label { font-size: 0.95rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-body); line-height: 1.5; cursor: pointer; }
.field--check a { color: var(--red-ink); }

/* Fehler */
.field.is-bad input, .field.is-bad textarea, .field.is-bad select { border-color: var(--red-ink); background: #FFF6F5; }
.field.is-bad.field--check input { border-color: var(--red-ink); }
.field__err { font-size: 0.85rem; font-weight: 600; color: var(--red-ink); }

.form__send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.8rem; }
.form__send .btn { min-width: 14rem; border: 0; cursor: pointer; }
.form__send .btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.form__status { font-weight: 600; color: var(--ink); }
.form__status.is-error { color: var(--red-ink); }

/* Danke: der Schein wird abgestempelt */
.form.is-sent .form__part { display: none; }
.thanks { display: none; }
.form.is-sent .thanks { display: block; }
.thanks { position: relative; padding: clamp(1.8rem, 4vw, 2.6rem); background: var(--paper-hi); border: 1px solid var(--rule-strong); border-radius: 0.5rem; }
.thanks__stamp { position: absolute; right: 1.4rem; top: 1.2rem; rotate: -10deg; padding: 0.35rem 0.9rem; border: 3px solid var(--red-ink); border-radius: 0.4rem; font-family: var(--sc-font-display); text-transform: uppercase; color: var(--red-ink); font-size: 1.4rem; letter-spacing: 0.04em; opacity: 0.88; }
.thanks h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.1; padding-right: 7rem; }
.thanks p { margin-top: 0.9rem !important; color: var(--ink-body); max-width: 46ch; }
@media (prefers-reduced-motion: no-preference) {
  .form.is-sent .thanks__stamp { animation: stamp 520ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
}
@keyframes stamp { 0% { scale: 1.6; opacity: 0; } 100% { scale: 1; opacity: 0.88; } }

/* ------------------------------------------------------------- Seite */
.ask__side { position: sticky; top: calc(var(--bar-h) + 2rem); }
.ask__photo { margin: 0 0 2rem; }
.ask__photo img { width: min(100%, 17rem); height: auto; rotate: 2deg; filter: drop-shadow(0 3px 3px rgba(40, 10, 0, 0.14)) drop-shadow(0 18px 22px rgba(40, 10, 0, 0.22)); }
.ask__photo figcaption { margin-top: 0.9rem; font-size: 0.9rem; color: var(--ink-soft); font-style: italic; }
.ask__side .ch__sub + * { margin-top: 0.8rem; }
.ask__side .ch__sub ~ .ch__sub { margin-top: 2.2rem; }
.next { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.next li { display: grid; grid-template-columns: 1.8rem 1fr; gap: 0.6rem; padding: 0.7rem 0; border-top: 1px solid var(--rule); }
.next li:last-child { border-bottom: 1px solid var(--rule); }
.next span { font-family: var(--sc-font-display); color: var(--red-ink); font-size: 1.3rem; line-height: 1.2; }
.next p { color: var(--ink-body); font-size: 0.97rem; }
.direct { margin: 0; }
.direct > div { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: 0.6rem 0; border-top: 1px solid var(--rule); }
.direct > div:last-child { border-bottom: 1px solid var(--rule); }
.direct dt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); padding-top: 0.15rem; }
.direct dd { margin: 0; color: var(--ink); font-weight: 600; }
.direct a { padding-block: 0.15rem; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease); }
.direct a:is(:hover, :focus-visible) { color: var(--red-ink); text-decoration-color: currentColor; text-decoration-thickness: 2px; }

@media (max-width: 900px) {
  .ask__wrap { grid-template-columns: 1fr; }
  .ask__side { position: static; }
  .ask__photo img { width: 13rem; }
}
@media (max-width: 560px) {
  .form__part { grid-template-columns: 1fr; }
  .field--half { grid-column: 1 / -1; }
  .form__send .btn { width: 100%; }
}

/* Honeypot: für Menschen unsichtbar, für Bots ein ganz normales Feld */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }