/* =====================================================================
   Contact Business — page 88585 skin (loaded only on that page).
   Mirrors the "GMG Kontakt" mockup while keeping Uncode header/footer.
   Everything is scoped under .page-id-88585 to avoid leaking site-wide.
   ===================================================================== */

body.page-id-88585 {
	--gmg-red: #E30613;
	--gmg-ink: #0B0B0C;
	--gmg-dark-card: #141417;
	--gmg-dark-border: #26262A;
	--gmg-light-card: #F4F3F1;
	--gmg-light-border: #E6E4E0;
	--gmg-input-border: #DAD8D4;
	--gmg-muted: #8A8A8E;
	--gmg-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Kill Uncode default inner padding so our sections control spacing. */
.page-id-88585 .gmg-hero .uncode_text_column,
.page-id-88585 .gmg-infos .uncode_text_column,
.page-id-88585 .gmg-forms .uncode_text_column,
.page-id-88585 .gmg-termin .uncode_text_column,
.page-id-88585 .gmg-map .uncode_text_column { margin: 0; }

/* Section vertical rhythm — override Uncode's row padding presets to match the mockup.
   (Uncode renders top/bottom padding on the inner `.row` of each `el_class` container.) */
.page-id-88585 .gmg-hero > .row   { padding-top: 140px !important; padding-bottom: 90px  !important; }
.page-id-88585 .gmg-infos > .row  { padding-top: 90px  !important; padding-bottom: 40px  !important; }
.page-id-88585 .gmg-forms > .row  { padding-top: 70px  !important; padding-bottom: 110px !important; }
.page-id-88585 .gmg-termin > .row { padding-top: 118px !important; padding-bottom: 118px !important; }

/* Centre the constrained content blocks inside Uncode's full-width columns. */
.page-id-88585 .gmg-forms__col,
.page-id-88585 .gmg-termin__head,
.page-id-88585 .gmg-timetics { margin-left: auto !important; margin-right: auto !important; }

.page-id-88585 .gmg-italic { font-style: italic; font-weight: 400; }
.page-id-88585 .gmg-italic-red { font-style: italic; font-weight: 500; color: var(--gmg-red); }

/* ---------- shared bits ---------- */
.page-id-88585 .gmg-eyebrow {
	display: flex; align-items: center; gap: 12px;
	font-size: 12px; text-transform: uppercase; letter-spacing: .22em;
	color: rgba(255,255,255,.7);
}
.page-id-88585 .gmg-dot {
	width: 7px; height: 7px; border-radius: 50%; background: var(--gmg-red);
	display: inline-block; animation: gmgpulse 2.4s infinite;
}
@keyframes gmgpulse { 0%,100% { opacity: .5 } 50% { opacity: 1 } }

.page-id-88585 .gmg-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 16px 32px; border-radius: 100px;
	font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	font-family: var(--gmg-font); line-height: 1; cursor: pointer;
	transition: transform .2s, background .2s, color .2s, border-color .2s;
}
.page-id-88585 .gmg-btn--red { background: var(--gmg-red); color: #fff; border: 1px solid var(--gmg-red); }
/* Keep the label WHITE on hover. Uncode's `.style-dark a:not(.btn-text-skin):hover`
   rule (these buttons sit in the dark hero) otherwise recolours the text accent-red
   — red-on-red on the filled button (invisible) and a red label on the ghost button.
   `!important` beats that theme rule regardless of specificity (same fix as jobs2). */
.page-id-88585 .gmg-btn--red:hover,
.page-id-88585 .gmg-btn--red:focus { color: #fff !important; transform: translateY(-2px); }
.page-id-88585 .gmg-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.32); }
.page-id-88585 .gmg-btn--ghost:hover,
.page-id-88585 .gmg-btn--ghost:focus { border-color: #fff; color: #fff !important; transform: translateY(-2px); }

.page-id-88585 .gmg-kicker {
	font-size: 12px; text-transform: uppercase; letter-spacing: .2em;
	color: var(--gmg-red); font-weight: 600; margin-bottom: 18px;
}
.page-id-88585 .gmg-h2 {
	font-family: var(--gmg-font);
	font-size: clamp(34px,4.6vw,58px); line-height: 1.04; font-weight: 700;
	letter-spacing: -.025em; color: var(--gmg-ink); margin: 0;
}
.page-id-88585 .gmg-h2--light { color: #fff; }

/* ---------- HERO ---------- */
.page-id-88585 .gmg-hero { position: relative; overflow: hidden; min-height: 82vh; }
/* Neutralise Uncode's relative-positioned wrappers so the video anchors to the whole
   hero section (not just the inner text column) and fills its full height. */
.page-id-88585 .gmg-hero .row,
.page-id-88585 .gmg-hero .row-inner,
.page-id-88585 .gmg-hero .wpb_column,
.page-id-88585 .gmg-hero .uncol,
.page-id-88585 .gmg-hero .uncoltable,
.page-id-88585 .gmg-hero .uncell,
.page-id-88585 .gmg-hero .uncont,
.page-id-88585 .gmg-hero__col { position: static !important; }
.page-id-88585 .gmg-hero__media { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; z-index: 0; }
.page-id-88585 .gmg-hero__video { width: 100%; height: 100%; object-fit: cover; opacity: .85; display: block; }
.page-id-88585 .gmg-hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(11,11,12,.4) 0%, rgba(11,11,12,.18) 42%, rgba(11,11,12,.9) 100%);
}
.page-id-88585 .gmg-hero__inner { position: relative; z-index: 2; max-width: 900px; }
.page-id-88585 .gmg-hero__h {
	font-family: var(--gmg-font);
	font-size: clamp(54px,8vw,112px); line-height: .96; font-weight: 700;
	letter-spacing: -.03em; color: #fff; margin: 26px 0 0; max-width: 13ch;
}
.page-id-88585 .gmg-hero__p {
	margin-top: 30px; max-width: 58ch; font-size: clamp(16px,1.7vw,19px);
	line-height: 1.65; color: rgba(255,255,255,.78); font-weight: 300;
}
.page-id-88585 .gmg-hero__cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- INFO CARDS ---------- */
.page-id-88585 .gmg-infos__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 20px;
}
.page-id-88585 .gmg-info { border-top: 2px solid var(--gmg-red); padding-top: 22px; }
.page-id-88585 .gmg-info__k {
	font-size: 11px; text-transform: uppercase; letter-spacing: .16em;
	color: var(--gmg-muted); margin-bottom: 12px;
}
.page-id-88585 .gmg-info__v { display: block; font-size: 17px; line-height: 1.6; font-weight: 300; color: var(--gmg-ink); }
a.page-id-88585 .gmg-info__v:hover, .page-id-88585 a.gmg-info__v:hover { color: var(--gmg-red); }

/* ---------- FORMS ---------- */
.page-id-88585 .gmg-forms__col { max-width: 920px; margin: 0 auto; }
.page-id-88585 .gmg-forms__head { text-align: center; margin-bottom: 34px; }
.page-id-88585 .gmg-forms__head .gmg-kicker { text-align: center; }

.page-id-88585 .gmg-tabs {
	display: inline-flex; background: #F0EEEB; border: 1px solid var(--gmg-light-border);
	border-radius: 100px; padding: 5px; margin: 0 auto 34px; justify-content: center;
}
.page-id-88585 .gmg-forms__col > .gmg-tabs { display: flex; width: fit-content; }
.page-id-88585 .gmg-tab {
	border: none; cursor: pointer; padding: 11px 22px; border-radius: 100px;
	font-size: 13.5px; font-weight: 600; font-family: var(--gmg-font);
	background: transparent; color: #3A3A3D; transition: all .25s;
}
.page-id-88585 .gmg-tab.is-active { background: var(--gmg-ink); color: #fff; }

.page-id-88585 .gmg-form-panel { display: none; }
.page-id-88585 .gmg-form-panel.is-active { display: block; }

/* CF7 card + fields */
.page-id-88585 .gmg-form-panel .wpcf7 {
	background: var(--gmg-light-card); border: 1px solid var(--gmg-light-border);
	border-radius: 10px; padding: clamp(28px,4vw,48px);
}
.page-id-88585 .gmg-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.page-id-88585 .gmg-field { margin: 0 0 22px; }
.page-id-88585 .gmg-field-grid .gmg-field { margin: 0; }
.page-id-88585 .gmg-field > label {
	display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 9px; color: var(--gmg-ink);
}
.page-id-88585 .gmg-req { color: var(--gmg-red); }
.page-id-88585 .gmg-field .wpcf7-form-control-wrap { display: block; }
.page-id-88585 .gmg-field input,
.page-id-88585 .gmg-field textarea,
.page-id-88585 .gmg-field select {
	width: 100%; background: #fff; border: 1px solid var(--gmg-input-border);
	border-radius: 6px; padding: 14px 15px; font-size: 15px; color: var(--gmg-ink);
	font-family: var(--gmg-font); line-height: 1.5; min-height: 46px;
}
.page-id-88585 .gmg-field textarea { min-height: 130px; line-height: 1.6; resize: vertical; }
.page-id-88585 .gmg-field input:focus,
.page-id-88585 .gmg-field textarea:focus,
.page-id-88585 .gmg-field select:focus { outline: none; border-color: var(--gmg-ink); }
.page-id-88585 .gmg-field .wpcf7-not-valid { border-color: var(--gmg-red); }
.page-id-88585 .wpcf7-not-valid-tip { color: var(--gmg-red); font-size: 12.5px; margin-top: 7px; }

.page-id-88585 .gmg-consent { display: flex; gap: 13px; align-items: flex-start; margin: 24px 0 0; font-size: 14px; line-height: 1.55; color: #3A3A3D; }
.page-id-88585 .gmg-consent .wpcf7-form-control-wrap { display: inline; }
.page-id-88585 .gmg-consent input[type=checkbox] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gmg-red); cursor: pointer; }
.page-id-88585 .gmg-consent a { color: var(--gmg-red); text-decoration: underline; }

.page-id-88585 .gmg-submit,
.page-id-88585 input.gmg-submit {
	margin-top: 30px; width: 100%; background: var(--gmg-red); color: #fff;
	padding: 18px; border-radius: 100px; font-size: 14px; font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase; border: none; cursor: pointer;
	font-family: var(--gmg-font); transition: transform .2s, opacity .2s;
}
.page-id-88585 .gmg-submit:hover { transform: translateY(-2px); }
.page-id-88585 .wpcf7-response-output {
	margin: 18px 0 0 !important; border-radius: 6px; font-size: 14px;
	border-width: 1px; padding: 12px 15px;
}
.page-id-88585 .wpcf7-spinner { margin: 12px auto 0; display: block; }

/* ---------- TERMIN / TIMETICS ---------- */
.page-id-88585 .gmg-termin__head { max-width: 1080px; margin-bottom: 44px; }
.page-id-88585 .gmg-termin__head .gmg-h2,
.page-id-88585 .gmg-termin__head .gmg-termin__p { max-width: 680px; }
/* Raise dark-section body copy off the low-contrast .66 grey toward light. */
.page-id-88585 .gmg-termin__p { margin-top: 18px; font-size: 16.5px; line-height: 1.65; color: #e0e0e0; font-weight: 300; }
.page-id-88585 .gmg-timetics { max-width: 1080px; }

/* --- Timetics booking widget: DARK skin to match the mockup ---
   The widget is a flatpickr calendar + Ant Design controls with generated class names,
   so we override structurally with !important. Cards → #141417 / border #26262A,
   text light, inputs dark, selected dates/slots + primary buttons in brand red. */
.page-id-88585 .gmg-timetics { color: #fff; }
.page-id-88585 .gmg-timetics .tt-section-title { display: none; }

/* Card surfaces (the two ant-col children) → dark rounded cards */
.page-id-88585 .gmg-timetics .ant-row > .ant-col > * {
	background: var(--gmg-dark-card) !important; border: 1px solid var(--gmg-dark-border) !important;
	border-radius: 12px !important;
}
/* Text/headings/labels/icons inside → light */
.page-id-88585 .gmg-timetics .ant-typography,
.page-id-88585 .gmg-timetics span,
.page-id-88585 .gmg-timetics p,
.page-id-88585 .gmg-timetics label,
.page-id-88585 .gmg-timetics .ant-form-item-label > label,
.page-id-88585 .gmg-timetics div { color: #fff; }
.page-id-88585 .gmg-timetics .tt-meeting-name { color: #fff !important; }
.page-id-88585 .gmg-timetics svg { fill: var(--gmg-red); }
/* Ant's muted "secondary" text (e.g. the "Wählen Sie eine passende Uhrzeit" subtitle,
   duration/help hints) renders dark-grey — lift it off the near-black card to keep it legible. */
.page-id-88585 .gmg-timetics .ant-typography-secondary,
.page-id-88585 .gmg-timetics [class*="secondary"],
.page-id-88585 .gmg-timetics [class*="subtitle"],
.page-id-88585 .gmg-timetics [class*="description"] { color: #e0e0e0 !important; }

/* flatpickr calendar → transparent on the dark card */
.page-id-88585 .gmg-timetics .flatpickr-calendar,
.page-id-88585 .gmg-timetics .flatpickr-months,
.page-id-88585 .gmg-timetics .flatpickr-month,
.page-id-88585 .gmg-timetics .flatpickr-weekdays,
.page-id-88585 .gmg-timetics .flatpickr-weekdaycontainer,
.page-id-88585 .gmg-timetics .flatpickr-days,
.page-id-88585 .gmg-timetics .dayContainer { background: transparent !important; box-shadow: none !important; }
.page-id-88585 .gmg-timetics .flatpickr-weekday { color: rgba(255,255,255,.45) !important; background: transparent !important; }
.page-id-88585 .gmg-timetics .flatpickr-current-month,
.page-id-88585 .gmg-timetics .flatpickr-current-month .numInput,
.page-id-88585 .gmg-timetics .flatpickr-monthDropdown-months,
.page-id-88585 .gmg-timetics .cur-year { color: #fff !important; }
.page-id-88585 .gmg-timetics .flatpickr-day { color: #fff !important; border-color: transparent !important; }
.page-id-88585 .gmg-timetics .flatpickr-day.flatpickr-disabled,
.page-id-88585 .gmg-timetics .flatpickr-day.prevMonthDay,
.page-id-88585 .gmg-timetics .flatpickr-day.nextMonthDay { color: rgba(255,255,255,.22) !important; }

/* flatpickr selected / hover in brand red */
.page-id-88585 .gmg-timetics .flatpickr-day.selected,
.page-id-88585 .gmg-timetics .flatpickr-day.selected:hover,
.page-id-88585 .gmg-timetics .flatpickr-day.selected:focus {
	background: var(--gmg-red) !important; border-color: var(--gmg-red) !important; color: #fff !important; font-weight: 700 !important;
}
.page-id-88585 .gmg-timetics .flatpickr-day:not(.flatpickr-disabled):not(.selected):hover {
	background: rgba(227,6,19,.18) !important; border-color: rgba(227,6,19,.5) !important; color: #fff !important;
}
.page-id-88585 .gmg-timetics .flatpickr-day.today:not(.selected) { border-color: rgba(227,6,19,.6) !important; }

/* Inputs (Name / E-Mail / Additional Notes, selects) → dark fields */
.page-id-88585 .gmg-timetics input,
.page-id-88585 .gmg-timetics textarea,
.page-id-88585 .gmg-timetics .ant-input,
.page-id-88585 .gmg-timetics .ant-input-affix-wrapper,
.page-id-88585 .gmg-timetics .ant-select-selector {
	background: #1C1C20 !important; border: 1px solid #2E2E33 !important; color: #fff !important;
}
.page-id-88585 .gmg-timetics input::placeholder,
.page-id-88585 .gmg-timetics textarea::placeholder { color: rgba(255,255,255,.4) !important; }
.page-id-88585 .gmg-timetics input:focus,
.page-id-88585 .gmg-timetics textarea:focus,
.page-id-88585 .gmg-timetics .ant-input-affix-wrapper-focused { border-color: var(--gmg-red) !important; box-shadow: none !important; }

/* Normalise ALL widget buttons to one identical shape (only colour differs).
   Fixes Ant's inconsistent padding/radius/line-height that clipped the "Go back" arrow. */
.page-id-88585 .gmg-timetics .ant-btn {
	height: auto !important; min-height: 50px !important;
	padding: 0 28px !important; border-radius: 100px !important;
	font-size: 14px !important; font-weight: 600 !important; line-height: 1.2 !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	gap: 8px !important; font-family: var(--gmg-font) !important;
}
.page-id-88585 .gmg-timetics .ant-btn > span { line-height: 1.2 !important; }
.page-id-88585 .gmg-timetics .ant-btn .anticon,
.page-id-88585 .gmg-timetics .ant-btn svg { display: inline-flex !important; flex: 0 0 auto; vertical-align: middle; }

/* Time-slot buttons + secondary buttons → dark outline; primary + selected → red */
.page-id-88585 .gmg-timetics .ant-btn-default {
	background: transparent !important; border: 1px solid #2E2E33 !important; color: #fff !important;
}
.page-id-88585 .gmg-timetics .ant-btn-default:hover { border-color: var(--gmg-red) !important; color: #fff !important; }
.page-id-88585 .gmg-timetics .ant-btn-primary,
.page-id-88585 .gmg-timetics [class*="slot"][class*="selected"],
.page-id-88585 .gmg-timetics .ant-btn-default.tt-active,
.page-id-88585 .gmg-timetics .ant-btn.active {
	background: var(--gmg-red) !important; border-color: var(--gmg-red) !important; color: #fff !important;
}
.page-id-88585 .gmg-timetics .ant-btn-primary:hover { background: #c40511 !important; border-color: #c40511 !important; }

/* Month nav arrows */
.page-id-88585 .gmg-timetics .flatpickr-prev-month:hover svg,
.page-id-88585 .gmg-timetics .flatpickr-next-month:hover svg { fill: var(--gmg-red) !important; }

/* Meeting-info icons (calendar/clock/location) → red instead of Ant blue */
.page-id-88585 .gmg-timetics svg path,
.page-id-88585 .gmg-timetics svg circle,
.page-id-88585 .gmg-timetics svg rect { fill: var(--gmg-red) !important; }
.page-id-88585 .gmg-timetics .flatpickr-day svg { display: none; }

/* Validation error messages → red (not caught by the light-text rule) */
.page-id-88585 .gmg-timetics .ant-form-item-explain-error,
.page-id-88585 .gmg-timetics [class*="explain-error"],
.page-id-88585 .gmg-timetics .ant-form-item-explain div { color: var(--gmg-red) !important; }

/* Confirmation step ("Ihr Termin ist bestätigt") → same dark card as the booking steps.
   Timetics renders this screen OUTSIDE the .ant-row/.ant-col structure the card rule above
   hooks into, so it kept the plugin's own white surface
   (.tt-meeting-booking-result-wrapper{background:#fff;border:1px solid #eaeaea}, frontend.css)
   while our blanket color:#fff still applied → white text on a white card. */
.page-id-88585 .gmg-timetics .tt-meeting-booking-result-wrapper {
	background: var(--gmg-dark-card) !important; border: 1px solid var(--gmg-dark-border) !important;
	border-radius: 12px !important;
}
.page-id-88585 .gmg-timetics .tt-meeting-booking-result-wrapper .ant-divider,
.page-id-88585 .gmg-timetics .tt-meeting-booking-result-wrapper hr {
	border-color: var(--gmg-dark-border) !important; background: var(--gmg-dark-border) !important;
}
.page-id-88585 .gmg-timetics .ant-result-title { color: #fff !important; }
/* "Termin verschieben / absagen" — the plugin paints these dark grey (--tt-secondary-color-65). */
.page-id-88585 .gmg-timetics .tt-bookings-upadate-text { color: #fff !important; }

/* ---------- MAP ---------- */
.page-id-88585 .gmg-map .uncode_text_column { padding: 0; }
.page-id-88585 .gmg-map__wrap { position: relative; }
.page-id-88585 .gmg-map__frame { width: 100%; height: clamp(380px,52vw,560px); border: 0; display: block; }
.page-id-88585 .gmg-map__card {
	position: absolute; left: clamp(20px,5vw,72px); bottom: clamp(24px,5vw,48px);
	background: var(--gmg-ink); color: #fff; border-radius: 12px; padding: 30px 32px;
	max-width: 340px; box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.page-id-88585 .gmg-map__card .gmg-eyebrow { color: rgba(255,255,255,.6); letter-spacing: .18em; margin-bottom: 16px; }
.page-id-88585 .gmg-map__city { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.page-id-88585 .gmg-map__addr { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.74); font-weight: 300; }
.page-id-88585 .gmg-map__card .gmg-btn { margin-top: 20px; padding: 13px 22px; font-size: 12.5px; }

/* ---------- responsive ---------- */

/* Timetics booking widget: on tablet the meeting card + calendar + time-slot panel are
   crammed into one 3-across Ant row. Force every Ant column to full width so the widget
   stacks into a single readable column (flatpickr internals are not .ant-row, untouched). */
@media (max-width: 820px) {
	.page-id-88585 .gmg-timetics .ant-row { flex-wrap: wrap !important; }
	.page-id-88585 .gmg-timetics .ant-row > .ant-col { flex: 0 0 100% !important; max-width: 100% !important; }
}

@media (max-width: 760px) {
	.page-id-88585 .gmg-hero__inner { max-width: 100%; }
}

/* Short form fields (Name/E-Mail/Telefon) stay 2-up on tablet (≥600px, base .gmg-field-grid
   rule); collapse to a single column only on phones. */
@media (max-width: 599px) {
	.page-id-88585 .gmg-field-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* =====================================================================
   FILM BAND (#gmg-contact-film) — full-bleed video between the light
   "Schreib uns" form section (color-lxmt #f7f7f7) and the dark
   "Terminkalender" section (color-wayh #141618). It is a breather, and
   at the same time the colour transition between the two sections:
   a light gradient at the top dissolves out of the form background,
   a dark gradient at the bottom dissolves into the calendar background.
   ===================================================================== */

/* Uncode puts the section padding on the inner .row and gutters on the
   column wrappers — zero them all out so the video is truly edge-to-edge. */
.page-id-88585 .gmg-film > .row { padding: 0 !important; }
.page-id-88585 .gmg-film .uncode_text_column { margin: 0; padding: 0; }
.page-id-88585 .gmg-film .row-inner,
.page-id-88585 .gmg-film .wpb_column,
.page-id-88585 .gmg-film .uncol,
.page-id-88585 .gmg-film .uncell,
.page-id-88585 .gmg-film .uncont { padding: 0 !important; }
/* wpautop leaves empty <p>/<br> behind inside [vc_column_text]. */
.page-id-88585 .gmg-film p:empty { display: none; }
.page-id-88585 .gmg-film br { display: none; }

.page-id-88585 .gmg-film__wrap {
	position: relative;
	width: 100%;
	height: clamp(320px, 46vw, 620px);
	overflow: hidden;
	background-color: var(--gmg-ink);
	line-height: 0;                 /* no stray descender gap under the video */
}

/* The video is taken out of flow so a wpautop-inserted <p> around it cannot
   affect the band height; it always fills the whole band. */
.page-id-88585 .gmg-film__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 46%;    /* keeps the table/screen in frame when cropped */
	display: block;
	border: 0;
}
.page-id-88585 .gmg-film__wrap > p { margin: 0; padding: 0; line-height: 0; }

/* Colour bridge: top fades out of #f7f7f7 (the form section above),
   bottom fades into #141618 (the calendar section below). */
.page-id-88585 .gmg-film__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom, #f7f7f7 0%, rgba(247,247,247,.55) 5%, rgba(247,247,247,0) 15%),
		linear-gradient(to top, #141618 0%, rgba(20,22,24,.92) 14%, rgba(20,22,24,.45) 34%, rgba(20,22,24,0) 58%);
}

/* Phones: the band gets shorter, so the ramp into the dark #termin section has to
   start earlier to still read as a transition rather than a hard cut. */
@media (max-width: 599px) {
	.page-id-88585 .gmg-film__wrap { height: min(76vw, 360px); }
	.page-id-88585 .gmg-film__veil {
		background:
			linear-gradient(to bottom, #f7f7f7 0%, rgba(247,247,247,0) 12%),
			linear-gradient(to top, #141618 0%, rgba(20,22,24,.94) 30%, rgba(20,22,24,.6) 50%, rgba(20,22,24,0) 82%);
	}
}

/* Reduced motion: no moving picture at all — show the poster still instead. */
@media (prefers-reduced-motion: reduce) {
	.page-id-88585 .gmg-film__video { display: none !important; }
	.page-id-88585 .gmg-film__wrap {
		background-image: url(/wp-content/uploads/2026/07/gmgup-contact-page-poster.jpg);
		background-size: cover;
		background-position: center 46%;
		background-repeat: no-repeat;
	}
	.page-id-88585 .gmg-film__wrap { animation: none !important; transition: none !important; }
}

/* =====================================================================
   ZWEI-KLICK-LÖSUNG für den Google-Maps-Embed (DSGVO).

   inc/gmg-privacy-embeds.php ersetzt den <iframe> in der ausgelieferten
   Antwort durch diesen Platzhalter; contact-business.js baut den iframe
   erst nach dem Klick auf "Karte laden". Bis dahin geht kein einziger
   Request an Google raus.

   Die Vorschau ist bewusst KEIN Screenshot der echten Karte (Google-
   Kartenbilder sind lizenzgebunden), sondern eine lokal gezeichnete,
   abstrahierte Stadtplan-Fläche: Raster + zwei Achsen + Pin, alles aus
   CSS-Gradienten und einem data:-URI. Null externe Ressourcen.
   ===================================================================== */

.page-id-88585 .gmg-embed-consent {
	position: relative;
	width: 100%;
	min-height: clamp(380px, 52vw, 560px);
	display: flex;
	align-items: center;
	justify-content: flex-end;          /* Panel rechts — die Standort-Karte sitzt links unten */
	padding: 48px clamp(20px, 5vw, 72px);
	overflow: hidden;
	background-color: #0B0C0F;
	isolation: isolate;
}

/* ---- gezeichnete Kartenfläche ---- */
.page-id-88585 .gmg-embed-consent__art {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #0E1014;
	background-image:
		/* feines Häuserblock-Raster */
		linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
		/* grobes Quartier-Raster */
		linear-gradient(rgba(255,255,255,.075) 2px, transparent 2px),
		linear-gradient(90deg, rgba(255,255,255,.075) 2px, transparent 2px);
	background-size: 46px 46px, 46px 46px, 230px 230px, 230px 230px;
	background-position: center;
	/* zu den Rändern hin auslaufen lassen, damit es als Fläche und nicht als Tapete liest */
	-webkit-mask-image: radial-gradient(120% 110% at 50% 45%, #000 42%, rgba(0,0,0,.35) 78%, transparent 100%);
	mask-image: radial-gradient(120% 110% at 50% 45%, #000 42%, rgba(0,0,0,.35) 78%, transparent 100%);
}
/* zwei Ausfallstraßen quer über die Fläche */
.page-id-88585 .gmg-embed-consent__art::before {
	content: "";
	position: absolute;
	inset: -30%;
	background:
		linear-gradient(115deg, transparent 46.4%, rgba(255,255,255,.10) 46.4%, rgba(255,255,255,.10) 47.6%, transparent 47.6%),
		linear-gradient(28deg,  transparent 61.0%, rgba(255,255,255,.07) 61.0%, rgba(255,255,255,.07) 61.9%, transparent 61.9%);
}
/* Pin auf der Position des Standorts (links der Mitte, über der Adresskarte) */
.page-id-88585 .gmg-embed-consent__art::after {
	content: "";
	position: absolute;
	left: 38%;
	top: 42%;
	width: 34px;
	height: 44px;
	transform: translate(-50%, -100%);
	background: no-repeat center/contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill='%23E30613' d='M12 0C5.4 0 0 5.4 0 12c0 8.4 12 20 12 20s12-11.6 12-20c0-6.6-5.4-12-12-12z'/%3E%3Ccircle cx='12' cy='12' r='4.6' fill='%23fff'/%3E%3C/svg%3E");
	filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}

/* ---- Hinweis-Panel ---- */
.page-id-88585 .gmg-embed-consent__panel {
	position: relative;
	z-index: 1;
	max-width: 430px;
	background: rgba(11,11,12,.86);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid var(--gmg-dark-border);
	border-radius: 12px;
	padding: 30px 32px;
	color: #fff;
	font-family: var(--gmg-font);
	box-shadow: 0 24px 60px rgba(0,0,0,.42);
}
.page-id-88585 .gmg-embed-consent__eyebrow {
	display: block;
	font-size: 12px; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--gmg-red);
	margin-bottom: 12px;
}
.page-id-88585 .gmg-embed-consent__title {
	display: block;
	font-size: 21px; font-weight: 700; letter-spacing: -.02em;
	margin-bottom: 10px;
}
.page-id-88585 .gmg-embed-consent__text {
	font-size: 14.5px; line-height: 1.6; font-weight: 300;
	color: rgba(255,255,255,.78);
	margin: 0 0 20px;
}
.page-id-88585 .gmg-embed-consent__link {
	color: #fff; text-decoration: underline; text-underline-offset: 3px;
}
.page-id-88585 .gmg-embed-consent__link:hover,
.page-id-88585 .gmg-embed-consent__link:focus { color: var(--gmg-red) !important; }
/* 16px vertikal -> 45px hoch: bleibt ueber der 44px-Mindestgroesse fuer Touch-Ziele. */
.page-id-88585 .gmg-embed-consent__btn { padding: 16px 26px; font-size: 12.5px; }
/* Sichtbarer Fokusring — der Button ist der einzige Weg zur Karte. */
.page-id-88585 .gmg-embed-consent__btn:focus-visible,
.page-id-88585 .gmg-embed-consent__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
.page-id-88585 .gmg-embed-consent__note {
	font-size: 12.5px; line-height: 1.55; font-weight: 300;
	color: rgba(255,255,255,.5);
	margin: 16px 0 0;
}
.page-id-88585 .gmg-embed-consent p:empty { display: none; }

/* Geladener Zustand: der Wrapper tritt zurück, der iframe bringt seine eigene
   Höhe über .gmg-map__frame mit. */
.page-id-88585 .gmg-embed-consent.is-loaded {
	display: block;
	min-height: 0;
	padding: 0;
	background: none;
	overflow: visible;
}

/* Tablet/Phone: das Panel wandert nach oben. Die Adresskarte daneben ist absolut
   positioniert (links unten) und zaehlt nicht zur Hoehe — deshalb wird ihr Platz
   als padding-bottom reserviert. Das Padding gehoert zur Box, die Box ist also
   IMMER hoch genug, egal wie hoch das Panel durch Umbrueche wird. Nur mit
   min-height waere die Ueberlappung von der Textmenge abhaengig. */
@media (max-width: 999px) {
	.page-id-88585 .gmg-embed-consent {
		align-items: flex-start;
		justify-content: center;
		min-height: 520px;
		padding: 40px clamp(20px, 5vw, 72px) 320px;
	}
	.page-id-88585 .gmg-embed-consent__panel { max-width: 100%; }
	.page-id-88585 .gmg-embed-consent__art::after { left: 50%; top: 30%; }
}
@media (max-width: 599px) {
	.page-id-88585 .gmg-embed-consent { padding: 28px 20px 320px; }
	.page-id-88585 .gmg-embed-consent__panel { padding: 24px 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.page-id-88585 .gmg-embed-consent__btn { transition: none !important; transform: none !important; }
}