/*
 * Kontakt — mirrors design repo src/page-kontakt.jsx: dark phone-as-poster hero,
 * two address cards (CH with contact people), contact form + schematic two-location
 * map. Rendered by [sisa_kontakt] through page.php's bare branch.
 */

.sisa-kontakt { background: var(--sisa-bg-archive, #eeeded); font-family: var(--sisa-body, "IBM Plex Sans", sans-serif); color: var(--sisa-ink, #1a1a1a); padding: 28px 0 80px; }
.sisa-kontakt__in { max-width: var(--sisa-container, 1360px); margin-inline: auto; padding-inline: var(--sisa-pad, 32px); box-sizing: border-box; }
.sisa-kontakt section { margin-bottom: 24px; }
.sisa-kontakt-eyebrow { margin: 0 0 10px; font-family: var(--sisa-mono, monospace); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--sisa-text-2, #676562); }
.sisa-kontakt-eyebrow--y { color: var(--sisa-yellow, #f4d435); }

/* breadcrumb */
.sisa-kontakt-bc { margin-bottom: 24px; font-family: var(--sisa-mono, monospace); font-size: 12px; letter-spacing: .4px; color: var(--sisa-text-2, #676562); }
.sisa-kontakt-bc a { color: var(--sisa-text-2, #676562); text-decoration: none; }
.sisa-kontakt-bc a:hover { color: var(--sisa-ink, #1a1a1a); }
.sisa-kontakt-bc span[aria-hidden] { margin: 0 8px; }
.sisa-kontakt-bc > span:last-child { color: var(--sisa-ink, #1a1a1a); }

/* hero */
.sisa-kontakt-hero { position: relative; overflow: hidden; background: var(--sisa-emphasis, #1a1a1a); color: #fff; padding: 72px 60px 64px; }
.sisa-kontakt-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: .3; }
.sisa-kontakt-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, #1a1a1a 0%, rgba(26,26,26,.78) 50%, rgba(26,26,26,.45) 100%); }
.sisa-kontakt-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.sisa-kontakt-hero__txt { max-width: 720px; }
.sisa-kontakt-hero__h { margin: 0; font-family: var(--sisa-display, "Brauer LL", serif); font-weight: 700; font-size: clamp(36px, 4.8vw, 56px); line-height: 1; letter-spacing: -1px; color: #fff; }
.sisa-kontakt-hero__p { margin: 16px 0 0; max-width: 540px; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; color: var(--sisa-on-emphasis-muted, #a8a6a0); }
.sisa-kontakt-hero__tel { display: inline-flex; flex-direction: column; align-items: flex-end; text-decoration: none; color: #fff; border-left: 1px solid var(--sisa-emphasis-line, #2d2d2d); padding-left: 32px; }
.sisa-kontakt-hero__telk { font-family: var(--sisa-mono, monospace); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--sisa-yellow, #f4d435); margin-bottom: 8px; }
.sisa-kontakt-hero__telnum { font-family: var(--sisa-display, "Brauer LL", serif); font-weight: 700; font-size: clamp(36px, 4.4vw, 52px); line-height: 1; letter-spacing: -1px; color: #fff; }
.sisa-kontakt-hero__telhrs { margin-top: 10px; font-family: var(--sisa-mono, monospace); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sisa-on-emphasis-muted, #a8a6a0); }

/* address cards */
.sisa-kontakt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sisa-kontakt-card { background: var(--sisa-panel, #fff); padding: 32px; display: flex; flex-direction: column; }
.sisa-kontakt-card__title { font-family: var(--sisa-display, "Brauer LL", serif); font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--sisa-ink, #1a1a1a); margin-bottom: 14px; }
.sisa-kontakt-card__addr { font-size: 14px; line-height: 1.6; color: var(--sisa-text-1, #3f3d3a); }
.sisa-kontakt-card__contact { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sisa-hairline, #eceae3); display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.sisa-kontakt-card__contact a { display: flex; align-items: center; gap: 10px; color: var(--sisa-ink, #1a1a1a); text-decoration: none; }
.sisa-kontakt-card__contact a:hover { color: var(--sisa-text-1, #3f3d3a); }
.sisa-kontakt-glyph { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; background: var(--sisa-yellow, #f4d435); color: var(--sisa-ink, #1a1a1a); }
.sisa-kontakt-card__people { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--sisa-hairline, #eceae3); }
.sisa-kontakt-card__peoplek { margin-bottom: 16px; font-family: var(--sisa-mono, monospace); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--sisa-text-3, #a8a6a0); }
.sisa-kontakt-card__peoplegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sisa-kontakt-person { background: var(--sisa-panel-2, #fafaf7); border: 1px solid var(--sisa-hairline, #eceae3); display: flex; flex-direction: column; }
.sisa-kontakt-person__media { aspect-ratio: 1/1; background: var(--sisa-bg-card, #dfdfdf); overflow: hidden; position: relative; }
.sisa-kontakt-person__img { width: 100%; height: 100%; object-fit: cover; object-position: center 5%; display: block; }
.sisa-kontakt-person__ph { position: absolute; inset: 0; display: grid; place-items: center; background: var(--sisa-emphasis, #1a1a1a); color: var(--sisa-yellow, #f4d435); font-family: var(--sisa-display, "Brauer LL", serif); font-weight: 700; font-size: 36px; letter-spacing: 1px; }
.sisa-kontakt-person__body { padding: 12px 14px 14px; }
.sisa-kontakt-person__name { font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--sisa-ink, #1a1a1a); }
.sisa-kontakt-person__role { margin-top: 4px; font-family: var(--sisa-mono, monospace); font-size: 10px; letter-spacing: .6px; line-height: 1.3; color: var(--sisa-text-2, #676562); }
.sisa-kontakt-card__foot { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--sisa-hairline, #eceae3); font-family: var(--sisa-mono, monospace); font-size: 11px; line-height: 1.55; color: var(--sisa-text-2, #676562); }

/* form + map */
.sisa-kontakt-fm { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.sisa-kontakt-form { background: var(--sisa-panel, #fff); padding: 40px 44px; }
.sisa-kontakt-form__h { margin: 0; font-family: var(--sisa-display, "Brauer LL", serif); font-weight: 700; font-size: clamp(24px, 2.4vw, 28px); line-height: 1.05; color: var(--sisa-ink, #1a1a1a); }
.sisa-kontakt-form__fields { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.sisa-kontakt-field { display: flex; flex-direction: column; gap: 6px; }
.sisa-kontakt-field > span { font-family: var(--sisa-mono, monospace); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sisa-text-2, #676562); }
.sisa-kontakt-field input, .sisa-kontakt-field select, .sisa-kontakt-field textarea,
.sisa-kontakt-field input:is([type=text],[type=email],[type=tel]) { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--sisa-hairline, #eceae3); border-radius: 0; background: var(--sisa-panel, #fff); font-size: 14px; color: var(--sisa-ink, #1a1a1a); font-family: inherit; outline: none; box-sizing: border-box; }
.sisa-kontakt-field input:focus, .sisa-kontakt-field select:focus, .sisa-kontakt-field textarea:focus { border-color: var(--sisa-ink, #1a1a1a); }
.sisa-kontakt-field textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.sisa-kontakt-field select.sisa-kontakt-select { /* beat the same-file background shorthand */ appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23676562' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }
.sisa-kontakt-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
button.sisa-kontakt-submit, .sisa-kontakt-submit { border: 0; border-radius: 0; min-height: 0; margin-top: 6px; align-self: flex-start; padding: 16px 28px; border: 0; background: var(--sisa-yellow, #f4d435); color: var(--sisa-yellow-ink, #1a1a1a); font-family: var(--sisa-body, "IBM Plex Sans", sans-serif); font-weight: 600; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer; }
button.sisa-kontakt-submit:hover, .sisa-kontakt-submit:hover { filter: brightness(.96); }
.sisa-kontakt-form__foot { margin: 20px 0 0; font-family: var(--sisa-mono, monospace); font-size: 11px; line-height: 1.55; color: var(--sisa-text-3, #a8a6a0); }
.sisa-kontakt-sent { margin-top: 22px; padding: 18px 20px; background: var(--sisa-panel-2, #fafaf7); border-left: 3px solid var(--sisa-yellow, #f4d435); font-size: 15px; line-height: 1.55; color: var(--sisa-ink, #1a1a1a); }
/* Failure notice — same panel as the success box, ink rule instead of yellow. */
.sisa-kontakt-error { margin-top: 22px; padding: 18px 20px; background: var(--sisa-panel-2, #fafaf7); border-left: 3px solid var(--sisa-ink, #1a1a1a); font-size: 15px; line-height: 1.55; color: var(--sisa-ink, #1a1a1a); }
.sisa-kontakt-error a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--sisa-yellow, #f4d435); }
.sisa-kontakt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* GDPR consent — fine print under the fields, sharp box, no new visual language. */
.sisa-kontakt .sisa-consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-top: 2px; cursor: pointer; }
.sisa-kontakt .sisa-consent input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 2px 0 0; border: 1px solid var(--sisa-text-2, #676562); border-radius: 0; background: var(--sisa-panel, #fff); display: grid; place-content: center; cursor: pointer; flex: none; }
.sisa-kontakt .sisa-consent input[type="checkbox"]::before { content: ""; width: 8px; height: 8px; transform: scale(0); background: var(--sisa-ink, #1a1a1a); }
.sisa-kontakt .sisa-consent input[type="checkbox"]:checked { border-color: var(--sisa-ink, #1a1a1a); }
.sisa-kontakt .sisa-consent input[type="checkbox"]:checked::before { transform: scale(1); }
.sisa-kontakt .sisa-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--sisa-yellow, #f4d435); outline-offset: 2px; }
.sisa-kontakt .sisa-consent__txt { font-family: var(--sisa-mono, monospace); font-size: 11px; line-height: 1.55; color: var(--sisa-text-2, #676562); }
.sisa-kontakt .sisa-consent__txt a { color: var(--sisa-ink, #1a1a1a); text-decoration: none; border-bottom: 1px solid var(--sisa-yellow, #f4d435); }

.sisa-kontakt-maps { background: var(--sisa-panel, #fff); padding: 32px 36px; display: flex; flex-direction: column; gap: 20px; }
.sisa-kontakt-loc { display: flex; flex-direction: column; gap: 10px; }
.sisa-kontakt-loc__kicker { margin-bottom: 4px; font-family: var(--sisa-mono, monospace); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--sisa-text-3, #a8a6a0); }
.sisa-kontakt-loc__h { margin: 0; font-family: var(--sisa-display, "Brauer LL", serif); font-weight: 700; font-size: clamp(22px, 2vw, 26px); line-height: 1.05; color: var(--sisa-ink, #1a1a1a); }
.sisa-kontakt-map { position: relative; aspect-ratio: 2/1; background: var(--sisa-bg-archive, #eeeded); border: 1px solid var(--sisa-hairline, #eceae3); overflow: hidden; }
.sisa-kontakt-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sisa-kontakt-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; }
.sisa-kontakt-pin__label { background: var(--sisa-emphasis, #1a1a1a); color: #fff; padding: 6px 12px; font-family: var(--sisa-mono, monospace); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.sisa-kontakt-pin__tip { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--sisa-emphasis, #1a1a1a); }
.sisa-kontakt-pin__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--sisa-yellow, #f4d435); border: 3px solid var(--sisa-yellow-ink, #1a1a1a); margin-top: 2px; }
.sisa-kontakt-loc__link { align-self: flex-start; font-weight: 500; font-size: 13px; letter-spacing: .4px; color: var(--sisa-ink, #1a1a1a); text-decoration: none; border-bottom: 2px solid var(--sisa-yellow, #f4d435); padding-bottom: 4px; }
.sisa-kontakt-maps__foot { margin: 0; font-family: var(--sisa-mono, monospace); font-size: 11px; line-height: 1.55; color: var(--sisa-text-2, #676562); }

/* tablet / mobile */
@media (max-width: 1023px) {
	.sisa-kontakt-fm { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.sisa-kontakt { padding: 20px 0 60px; }
	.sisa-kontakt section { margin-bottom: 16px; }
	.sisa-kontakt-hero { padding: 40px 22px 36px; }
	.sisa-kontakt-hero__grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }
	.sisa-kontakt-hero__tel { align-items: flex-start; border-left: 0; padding-left: 0; }
	.sisa-kontakt-cards { grid-template-columns: 1fr; gap: 16px; }
	.sisa-kontakt-card { padding: 26px 22px; }
	.sisa-kontakt-card__peoplegrid { grid-template-columns: 1fr; }
	.sisa-kontakt-form { padding: 28px 22px; }
	.sisa-kontakt-row2 { grid-template-columns: 1fr; }
	.sisa-kontakt-maps { padding: 28px 22px; }
}