/* GMG global a11y — minimum touch-target sizing (WCAG 2.5.5 / 2.5.8).
 * Applies site-wide. Kept conservative so the visual icon stays the same size
 * while the tappable/clickable area grows to >=44px via inline-flex centering. */

/* Icon-only social links (header, off-canvas menu, footer) */
a.social-menu-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* Carousel / slider pagination bullets — grow the hit area, keep the dot small */
.owl-dots .owl-dot,
.tp-bullets .tp-bullet,
.flickity-page-dots .dot {
	min-width: 24px;
	min-height: 24px;
}

/* --- Mobile-Header: Logo lief in den Burger-Button hinein ------------------
 * Problem (gemessen im DOM, Startseite + /jobs2/):
 *   Uncode skaliert das Logo ueber die HOEHE — `.logo-container .logo-image img
 *   { height:100%; width:auto }` (uncode/library/css/style.css:11839) auf der
 *   inline gesetzten `.logo-image{height:40px}`. Das SVG (150x19) wird dadurch
 *   315,8px BREIT, voellig unabhaengig von der Viewport-Breite.
 *   Der Burger `.mobile-menu-button` (92px = 2x36px Padding + 20px Linien) sitzt
 *   ab `max-width:959px` in `.mmb-container{position:absolute;right:0}` buendig
 *   rechts (style.css:14496-14517) und ragt damit 56px in die 36px-Innenkante
 *   des `.logo-container` hinein.
 *   Ergebnis: echte Rechteck-Ueberschneidung von 54-56px x 40px —
 *     390px: Logo 36..352, Burger 298..390  -> 54px Ueberlappung
 *     360px: Logo 36..324, Burger 268..360  -> 56px
 *     320px: Logo 36..284, Burger 228..320  -> 56px
 *   Zusaetzlich war das Logo unter ~444px bereits VERZERRT: `max-width:100%`
 *   stauchte die Breite (320px -> 248px), waehrend `height:100%` die Hoehe auf
 *   40px hielt (proportional waeren 31px).
 * Fix: den Logo-Block `#main-logo` (shrink-to-fit inline-block, direktes Kind der
 *   Logo-Spalte) auf `calc(100% - 56px)` deckeln — 56px = exakt der Teil der
 *   Burger-Box, der in die Logo-Spalte hineinragt (92px Burger - 36px rechtes
 *   Padding der Spalte). Das SVG selbst behaelt `max-width:100%` und wird per
 *   `object-fit:contain` proportional + vertikal zentriert in die 40px-Zeile
 *   gelegt (statt einer festen Pixelhoehe), sonst wuerde `height:100%` es stauchen.
 *   Der Deckel muss am Block sitzen, nicht am <img>: sitzt er am <img>, bleibt der
 *   Wrapper 316px breit und `.img-responsive{margin:0 auto}` schiebt das Logo aus
 *   der 36px-Fluchtlinie in die Mitte.
 * Breakpoint 959px = genau der Punkt, ab dem Uncode den Burger einblendet;
 *   ab 960px ist `.mobile-menu-button{display:none}` -> Desktop bleibt unberuehrt. */
@media screen and (max-width: 959px) {
	.logo-container #main-logo {
		max-width: calc(100% - 56px) !important;
	}

	.logo-container .logo-image img {
		object-fit: contain;
		object-position: left center;
	}
}