/*
Theme Name:   Structure Template (Hello Elementor Child)
Theme URI:    https://example.com/
Description:  Child theme of Hello Elementor for the structural website template.
              Everything visual lives in Elementor; this file only holds the few
              rules for markup Elementor does not generate (language switcher,
              newsletter placeholder, contact form).
Author:       Anirudha Talmale
Template:     hello-elementor
Version:      3.9.0
Text Domain:  structure-child
*/

/* --------------------------------------------------------------- typography */

/*
 * Bind the whole site to Elementor's Global Fonts.
 *
 * Defining "Primary" and "Text" under Site Settings > Global Fonts only emits
 * CSS variables — nothing consumes them unless a widget explicitly references
 * the global, and these layouts set their own sizes per heading, which cannot
 * be combined with a global reference. Without these rules the font names are
 * stored and shown in the panel while every heading silently falls back to the
 * theme's system stack.
 *
 * Pointing the base elements at the variables means changing the two entries in
 * Global Fonts restyles the entire site, which is the whole point of setting
 * them globally.
 */
body,
.elementor-widget-text-editor,
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-icon-list,
.elementor-widget-toggle .elementor-tab-content,
.wpcf7 input,
.wpcf7 textarea {
	font-family: var(--e-global-typography-text-font-family), system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-counter .elementor-counter-number-wrapper,
.elementor-widget-toggle .elementor-toggle-title,
.elementor-button,
.wpcf7 label,
.wpcf7 input[type="submit"],
.ug-newsletter button,
.hfe-nav-menu a {
	font-family: var(--e-global-typography-primary-font-family), system-ui, sans-serif;
}

/* ---------------------------------------------------------- language switch */

.ug-lang {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	align-items: center;
}

.ug-lang a {
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .5px;
	text-decoration: none;
	line-height: 1;
}

.ug-lang a:hover,
.ug-lang a.is-active {
	color: var(--e-global-color-accent);
}

@media (max-width: 767px) {
	.ug-lang { justify-content: center; margin-top: 10px; }
}

/* ------------------------------------------------- newsletter (placeholder) */

.ug-newsletter {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
	max-width: 380px;
}

.ug-newsletter input[type="email"] {
	width: 100%;
	padding: 16px 18px;
	border: 0;
	border-radius: 0;
	background: #FFFFFF;
	color: #2B2B2B;
	font-size: 15px;
}

.ug-newsletter button {
	padding: 15px 30px;
	border: 2px solid var(--e-global-color-accent);
	border-radius: 0;
	background: var(--e-global-color-accent);
	color: var(--e-global-color-secondary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.ug-newsletter button:hover {
	background: transparent;
	color: var(--e-global-color-accent);
}

.ug-newsletter .ug-note {
	color: #8A9096;
	font-size: 12px;
	line-height: 1.5;
}

/* ------------------------------------------------------------- contact form */

.wpcf7 .ug-field { margin-bottom: 22px; }

.wpcf7 label {
	display: block;
	margin-bottom: 8px;
	color: var(--e-global-color-secondary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.wpcf7 .ug-row {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.wpcf7 .ug-row > * { flex: 1 1 200px; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: 14px 16px;
	border: 2px solid var(--e-global-color-secondary);
	border-radius: 0;
	background: #FFFFFF;
	color: #2B2B2B;
	font-family: inherit;
	font-size: 16px;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: 2px solid var(--e-global-color-accent);
	outline-offset: 1px;
}

/*
 * The send button is a Contact Form 7 element, not an Elementor one, so it does
 * not appear in the editor's colour controls — which is why the client went
 * looking for them and found nothing. It is styled here instead, and copied
 * value for value from the yellow buttons elsewhere on the site (measured on the
 * live page: #F3D849 on #191718, 2px border, 14px/700, 1.2px tracking, square
 * corners) so the two cannot drift apart.
 */
.wpcf7 input[type="submit"] {
	padding: 18px 34px;
	border: 2px solid var(--e-global-color-yellow, #F3D849);
	border-radius: 0;
	background: var(--e-global-color-yellow, #F3D849);
	color: var(--e-global-color-secondary, #191718);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.wpcf7 input[type="submit"]:hover {
	background: transparent;
	color: var(--e-global-color-secondary, #191718);
}

/* ------------------------------------------------------------ footer links */

/*
 * ⚠ Scoped to the footer element, not to `.ehf-footer`.
 *
 * The header/footer plugin puts `.ehf-footer` on the BODY, so `.ehf-footer a`
 * was a rule about every link on the site. It happened to be invisible because
 * buttons and widgets carry their own colours, but any plain link in a page
 * would have come out blue. `#colophon` is the footer itself.
 */
#colophon a {
	text-decoration: none;
}

#colophon a:hover {
	text-decoration: underline;
}

/*
 * The last line of the footer, matched to the quick links above it.
 *
 * Those are written as an icon list, where Elementor colours the text inside a
 * span of its own — measured #C9CDD1, turning accent blue on hover. The legal
 * links are plain anchors in a text block, so they fell back to the link colour
 * instead: blue, turning near-black on hover, which on this dark background made
 * them disappear. The client saw exactly that. Same two colours as the list now.
 */
#colophon .elementor-widget-text-editor a {
	color: #C9CDD1;
}

#colophon .elementor-widget-text-editor a:hover {
	color: var(--e-global-color-accent, #0A62D0);
}

/*
 * …and it sits against the right edge, mirroring the copyright on the left.
 *
 * The two columns are 591px each in a 1232px row, so the right-hand one stopped
 * 30px short and its text, left-aligned inside it, stopped 441px short. Measured:
 * the copyright began 24px from the edge while the legal links ended 53px from
 * it. Letting the column fill the row and aligning the text right makes both 24.
 */
#colophon .e-con:has(> .elementor-widget-text-editor a[href*="disclaimer"]) {
	flex: 1 1 auto;
}

#colophon .elementor-widget-text-editor:has(a[href*="disclaimer"]) {
	text-align: right;
}

@media (max-width: 767px) {
	/* stacked on a phone, so both read from the left */
	#colophon .elementor-widget-text-editor:has(a[href*="disclaimer"]) {
		text-align: left;
	}
}

/*
 * The social icons are switched off.
 *
 * There are no profiles behind them: all four still pointed at "#", so they
 * looked like links and did nothing. Hidden here rather than deleted, so turning
 * them back on is one line — remove this rule and fill in the addresses in
 * Elementor.
 */
#colophon .elementor-widget-social-icons {
	display: none;
}

/* ------------------------------------------------------------ scroll motion */

/*
 * Blocks rise into place once, as they arrive.
 *
 * Everything here is gated on `.ug-anim`, a class the theme puts on <html> from
 * an inline script in the head. That gate is the important part, and it was
 * missing: the rules used to hide every section outright and rely on reveal.js
 * to bring them back. Anything that stopped that script — a JS error, a plugin,
 * or Elementor re-rendering the elements in its editor — left the page blank
 * with all the content present but invisible. The client hit exactly that: in
 * the editor he could open the photo band (the one section without this class)
 * and nothing else.
 *
 * With the gate, no JavaScript means nothing is ever hidden. The animation is an
 * addition to a working page, not a condition for one.
 */
.ug-anim .ug-reveal.is-visible,
.ug-anim .ug-reveal.is-visible > .e-con {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.ug-anim .ug-reveal {
		opacity: 0;
		transform: translateY(44px);
		transition: opacity .8s cubic-bezier(.22, .61, .36, 1),
		            transform .8s cubic-bezier(.22, .61, .36, 1);
		will-change: opacity, transform;
	}

	/* Children of a revealed row arrive in sequence, not as one slab. */
	.ug-anim .ug-reveal .e-con-inner > .e-con {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity .65s cubic-bezier(.22, .61, .36, 1),
		            transform .65s cubic-bezier(.22, .61, .36, 1);
	}
	.ug-anim .ug-reveal.is-visible .e-con-inner > .e-con { opacity: 1; transform: none; }
	.ug-anim .ug-reveal.is-visible .e-con-inner > .e-con:nth-child(1) { transition-delay: .10s; }
	.ug-anim .ug-reveal.is-visible .e-con-inner > .e-con:nth-child(2) { transition-delay: .20s; }
	.ug-anim .ug-reveal.is-visible .e-con-inner > .e-con:nth-child(3) { transition-delay: .30s; }
	.ug-anim .ug-reveal.is-visible .e-con-inner > .e-con:nth-child(4) { transition-delay: .40s; }

	/* The yellow rule draws itself left to right as its block arrives. */
	.ug-anim .ug-reveal .elementor-widget-divider .elementor-divider-separator {
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform .7s cubic-bezier(.22, .61, .36, 1) .25s;
	}
	.ug-anim .ug-reveal.is-visible .elementor-widget-divider .elementor-divider-separator {
		transform: scaleX(1);
	}
}

/* ------------------------------------------------ images that follow the mouse */

/*
 * Keep this dumb on purpose.
 *
 * The previous version gave the frame `aspect-ratio: 4/3` and the image
 * `height: 100%; object-fit: cover`. On a phone that cropped the picture top
 * and bottom — the client sent a screenshot of exactly that. Any frame whose
 * ratio does not match the photograph will crop it, and `aspect-ratio` is not
 * honoured by older mobile Safari at all, which makes the result differ between
 * devices for no benefit.
 *
 * So: the image simply keeps its own proportions and is always shown whole. The
 * drift is a transform on top of that, and it only ever runs on a device with a
 * real hovering pointer, where `overflow: hidden` trims the scaled edges.
 */
.ug-drift {
	overflow: hidden;
}

.ug-drift img {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: center;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

/* No hovering pointer: never transform, so nothing can be cropped or stranded. */
@media (hover: none), (pointer: coarse) {
	.ug-drift img { transform: none !important; transition: none; }
}

/* ------------------------------------- photograph, seen only through openings */

/*
 * How the photograph works, in the client's own words: one picture, pinned to
 * the viewport, behind the whole page. Every section that carries no image has
 * an opaque colour and slides over it. Only the bands that do carry images or
 * thumbnails are transparent, so the photo shows through them as windows.
 *
 * Two earlier attempts were wrong in opposite directions. A layer behind the
 * page with see-through sections leaked slivers of photo in the gaps between
 * panels. Putting the photo on the band itself fixed that but killed the effect:
 * with only one band per page there is nothing for a colour block to slide over.
 *
 * The piece that makes it work is that the *outer*, full-bleed container of
 * every section is opaque and they stack edge to edge, so there is no gap left
 * to leak through — the inset and the rounded corners live on a child.
 */
/*
 * Only the attachment is fixed here. Size and position are deliberately NOT set
 * in this stylesheet: they are Elementor settings on each band, so the client
 * can pick the visible part of a photograph in the editor and have it stick.
 * A rule here would have the same specificity as Elementor's own and would win
 * or lose depending on stylesheet order — i.e. his choice would sometimes
 * silently do nothing.
 */
.ug-open {
	background-attachment: fixed;   /* pinned to the viewport, not to the band */
	background-repeat: no-repeat;
}

/* iOS has never supported fixed attachment properly; there it scrolls with the
   page, which still looks right, it just stops being one continuous image. */
@media (hover: none), (pointer: coarse), (max-width: 1024px) {
	.ug-open { background-attachment: scroll; }
}

/*
 * The trap that made the picture scroll with the page, and it is worth spelling
 * out because nothing warns you: an element with a `transform` (or a
 * `will-change` that names one) becomes the containing block for its own fixed
 * background, so the browser renders `background-attachment: fixed` exactly as
 * if it said `scroll`. getComputedStyle still answers "fixed" — the property is
 * applied, only the painting ignores it. The band used to carry .ug-reveal,
 * which animates it in with a translate, and that was enough.
 *
 * The class is gone from the generator; this rule is the belt to that braces,
 * so it cannot come back by way of a plugin or a copied section.
 */
.ug-open,
.ug-open.ug-reveal {
	transform: none !important;
	will-change: auto !important;
	filter: none !important;
	perspective: none !important;
	opacity: 1 !important;
}

/*
 * Why the photo sits on the band rather than on a layer behind the page: a
 * transparent hole punched over a page-wide layer cannot be given rounded
 * corners — the corners are transparent too, so the picture shows outside the
 * curve and the window reads as a hard-edged rectangle. A fixed-attachment
 * background is pinned to the viewport in exactly the same way *and* is clipped
 * by the band's border radius.
 */

/*
 * A scrim, drawn as a pseudo-element across the whole band rather than as a
 * background colour on the inner block: the inner block is boxed, so a colour
 * there would stop short of the band's edges and read as a second panel. It is
 * darkest at the top, where the heading sits, and lifts over the thumbnails so
 * the photograph still comes through under them.
 */
.ug-open { position: relative; }

/*
 * One veil for every photo area, and a gentler one.
 *
 * The client asked for a gradient everywhere and for the whole thing to be more
 * moderate, with the picture still clearly readable. Measured before changing:
 * the bands ran from 72% down to 30%, while the picture on the start page had no
 * gradient at all — a flat 50% laid over the entire image, which is why it looked
 * dead next to the others.
 *
 * Now all of them run from 60% at the top to 20% at the bottom: darker than
 * before where the headline sits, lighter than before everywhere else, so more
 * of the photograph comes through.
 */
.ug-open::before,
#page > .elementor .ug-parallax::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background-color: transparent;
	background-image: linear-gradient(180deg,
		rgba(25, 23, 24, .60) 0%,
		rgba(25, 23, 24, .44) 38%,
		rgba(25, 23, 24, .28) 68%,
		rgba(25, 23, 24, .20) 100%);
	opacity: 1;                 /* Elementor dims its own overlay; the alphas do it here */
}

.ug-open > * { position: relative; z-index: 1; }

.ug-open .elementor-heading-title,
.ug-open h1, .ug-open h2, .ug-open h3,
.ug-open .elementor-widget-text-editor {
	color: #FFFFFF !important;
}

/* An open band whose section is switched off leaves no trace at all. */
.ug-open.ug-inactive { display: none !important; }

/* ------------------------------------------------- thumbnails, symmetrically */

/*
 * Five columns, and a part-filled row sits symmetrically rather than flushing
 * left. The client's rule, which is a good one: an odd number of slots gives a
 * true centre, so 1 sits in the middle, 2 straddle it, 4 leave the middle empty.
 * Positions are assigned by thumbs.js; this is only the frame.
 */
.ug-thumbs {
	display: grid;
	/* minmax(0,…), not 1fr: a bare 1fr track cannot shrink below the intrinsic
	   width of the image inside it, so a narrow window would push the row wider
	   than the page instead of sizing the columns down. */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
}

@media (max-width: 1024px) {
	.ug-thumbs { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
	.ug-thumbs { grid-template-columns: repeat(2, 1fr); }
	/* Placement is only meaningful at the full five columns. */
	.ug-thumbs > * { grid-column: auto !important; }
}

/* --------------------------------- background: photograph <-> flat colour */

/*
 * Elementor keeps the background image; this adds the colour layer on top and
 * the script fades it as the section crosses the viewport, so the photograph
 * surfaces in the middle of the pass and the flat colour returns at either end.
 *
 * It has to be a pseudo-element here rather than Elementor's own background
 * overlay: in Elementor 4 that overlay is itself drawn as a pseudo-element, not
 * a DOM node, so there is nothing for JS to set an opacity on.
 *
 * --ug-veil defaults to 1, which means with JS disabled the section is simply
 * the solid colour — the readable state.
 */
.ug-backdrop {
	position: relative;
	--ug-veil: 1;
}

.ug-backdrop::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: var(--e-global-color-primary);
	opacity: var(--ug-veil);
	transition: opacity .15s linear;
	pointer-events: none;
	border-radius: inherit;
}

.ug-backdrop > .e-con-inner,
.ug-backdrop > * {
	position: relative;
	z-index: 2;
}

/* ------------------------------------------------------------------ helpers */

/* Placeholder images keep their aspect ratio when a card stretches. */
.ug-card-media img { width: 100%; height: auto; display: block; }

/* Keep the angled dividers from ever producing a horizontal scrollbar. */
body { overflow-x: hidden; }


/* --------------------------------------------------------------- course map */

/*
 * The map is the working surface of this page, not an illustration, so it gets
 * the height to prove it. The client expects around twenty courses; at the old
 * 480px a cluster in the Ruhr area was a single smudge of overlapping pins.
 */
.ug-map {
	position: relative;
	width: 100%;
	min-height: 720px;
	border-radius: 28px;
	overflow: hidden;
	background: #D5DBE0;
}

@media (max-width: 1024px) { .ug-map { min-height: 560px; } }
@media (max-width: 767px)  { .ug-map { min-height: 400px; } }

/*
 * The still picture shown before anyone touches the map.
 *
 * It is a photograph of the map area held on this server, so a visitor who only
 * reads the page never contacts OpenStreetMap. The markers on top are the real
 * course list, drawn as HTML and positioned by the script — which means they
 * follow the courses automatically and the picture underneath never has to be
 * redone when a course is added.
 */
.ug-still {
	position: absolute;
	inset: 0;
	cursor: pointer;
	overflow: hidden;
}

/*
 * The picture is placed by the script, not by object-fit: it has to sit at the
 * exact spot the live map will open at, so that clicking swaps one for the other
 * without the map appearing to move.
 */
.ug-still-canvas {
	position: absolute;
	pointer-events: none;
}

.ug-still-img {
	width: 100%;
	height: 100%;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

.ug-still-pin {
	position: absolute;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;    /* the point of the pin, not its corner */
	line-height: 0;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}

.ug-still-hint,
.ug-still-credit {
	position: absolute;
	background: rgba(25, 23, 24, .78);
	color: #FFFFFF;
	border-radius: 999px;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
}

/*
 * Bottom left, not centred.
 *
 * Centred, this label ran into the OpenStreetMap credit in the bottom right —
 * visible on the smaller map on the start page, where there is simply not enough
 * width for both. Left and right corners cannot collide.
 */
.ug-still-hint {
	left: 10px;
	bottom: 10px;
	padding: 11px 20px;
	font-weight: 700;
	letter-spacing: .4px;
}

/*
 * Top right, the hint bottom left — opposite corners on both axes.
 *
 * Bottom right looked tidier but could not be made safe: the two labels together
 * are wider than the map on the start page, and chasing it with breakpoints only
 * moved the collision around (measured: fixed at 390px, still overlapping at
 * 820px). Different corners cannot meet at any width.
 */
.ug-still-credit {
	right: 10px;
	top: 10px;
	padding: 6px 12px;
	font-size: 11px;
	border-radius: 6px;
}

.ug-still-credit a { color: #FFFFFF; }

/*
 * The notice under the map. Deliberately outside the clickable area: it has to be
 * readable, and reachable by its link, without setting off the thing it describes.
 */
.ug-still-note {
	margin: 12px 2px 0;
	color: #6B7176;
	font-size: 13px;
	line-height: 1.5;
}

.ug-still-note a { color: inherit; text-decoration: underline; }
.ug-still-note a:hover { color: var(--e-global-color-secondary, #191718); }

.ug-still:hover .ug-still-hint { background: var(--e-global-color-accent, #F3D849); color: #191718; }

.ug-still:focus-visible {
	outline: 3px solid var(--e-global-color-primary, #0A62D0);
	outline-offset: -3px;
}

@media (max-width: 767px) {
	.ug-still-hint { font-size: 12px; padding: 9px 16px; bottom: 10px; }
	.ug-still-pin  { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
	.ug-still-pin svg { width: 34px; height: 34px; }
}

/* Opened out, the map takes the screen. Everything else is Leaflet's own. */
.ug-map.is-full {
	position: fixed;
	inset: 18px;
	width: auto;
	min-height: 0;
	z-index: 9000;
	border-radius: 24px;
	box-shadow: 0 30px 80px rgba(25, 23, 24, .45);
}

body.ug-map-open { overflow: hidden; }

.ug-map-expand {
	position: absolute;
	right: 16px;
	top: 16px;
	z-index: 9100;           /* above Leaflet's own panes and controls */
	padding: 11px 20px;
	transition: padding .15s ease, font-size .15s ease;
	border: 2px solid var(--e-global-color-secondary, #191718);
	border-radius: 0;
	background: var(--e-global-color-yellow, #F3D849);
	color: var(--e-global-color-secondary, #191718);
	font-family: var(--e-global-typography-primary-font-family), system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	cursor: pointer;
}

.ug-map-expand:hover { background: #FFFFFF; }

/* Once the map owns the screen the way out has to be obvious — the client
   found the old one only on second look. Bigger, and with an explicit ×. */
.ug-map.is-full .ug-map-expand {
	right: 22px;
	top: 22px;
	padding: 17px 30px;
	font-size: 16px;
	letter-spacing: 1.4px;
	box-shadow: 0 6px 20px rgba(25, 23, 24, .35);
}

.ug-map.is-full .ug-map-expand .ug-map-expand-close::before {
	content: "\00D7";
	margin-right: 10px;
	font-size: 22px;
	line-height: 1;
	vertical-align: -2px;
}

/* ----------------------------------------------- "hold Ctrl to zoom" notice */

/*
 * Shown only when someone turns the wheel over the map without the modifier.
 * It answers the question at the moment it is asked and then gets out of the
 * way; a permanent label would be noise on every visit.
 */
.ug-map-hint {
	position: absolute;
	inset: 0;
	z-index: 9050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(25, 23, 24, .55);
	color: #FFFFFF;
	font-family: var(--e-global-typography-primary-font-family), system-ui, sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .6px;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, visibility .18s ease;
	pointer-events: none;      /* never swallows a click meant for the map */
}

.ug-map.is-hinting .ug-map-hint { opacity: 1; visibility: visible; }

/* Full screen the wheel zooms on its own, so the notice would be a lie. */
.ug-map.is-full .ug-map-hint { display: none; }

@media (max-width: 767px) {
	.ug-map-hint { font-size: 16px; }
}

/* One button, two labels: whichever is wrong for the current state is hidden,
   so the wording can never drift out of step with what the button does. */
.ug-map-expand .ug-map-expand-close,
.ug-map.is-full .ug-map-expand .ug-map-expand-open { display: none; }
.ug-map.is-full .ug-map-expand .ug-map-expand-close { display: inline; }

/* The marker is drawn inline as SVG; these two variables colour it, so it
   follows the palette rather than being a baked-in image. */
.ug-map-pin {
	--ug-pin-fill: var(--e-global-color-yellow, #F3D849);
	--ug-pin-stroke: var(--e-global-color-secondary, #191718);
	background: none;
	border: 0;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
	cursor: pointer;
	transition: transform .18s ease;
}

.ug-map-pin:hover { transform: scale(1.12); }

.leaflet-popup-content-wrapper {
	border-radius: 14px;
	padding: 4px 6px;
}

.ug-map-title {
	display: block;
	font-family: var(--e-global-typography-primary-font-family), system-ui, sans-serif;
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--e-global-color-secondary);
}

.ug-map-desc {
	display: block;
	margin-top: 4px;
	color: #5B6166;
	font-size: 14px;
}

.ug-map-link {
	display: inline-block;
	margin-top: 10px;
	padding: 8px 16px;
	background: var(--e-global-color-primary);
	color: #FFFFFF !important;
	border-radius: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
}

/* ------------------------------------------------- sections kept in reserve */

/*
 * Built, styled and ready, but not shown yet. To switch one on, open the
 * section in Elementor, go to Advanced > CSS Classes and delete the word
 * "ug-inactive". Nothing else to configure.
 */
.ug-inactive { display: none !important; }


/* ---------------------------------------------------------------- scorecard */

.ug-sc-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: flex-end;
	margin-bottom: 26px;
}

.ug-sc-controls label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--e-global-color-secondary);
}

.ug-sc-controls input {
	width: 92px;
	padding: 11px 12px;
	border: 2px solid var(--e-global-color-secondary);
	background: #FFFFFF;
	font-size: 16px;
}

.ug-sc-controls button {
	padding: 13px 24px;
	border: 2px solid var(--e-global-color-secondary);
	background: var(--e-global-color-secondary);
	color: var(--e-global-color-yellow);
	font-family: var(--e-global-typography-primary-font-family), system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}

.ug-sc-controls button.ug-sc-reset,
.ug-sc-controls button.ug-sc-print {
	background: transparent;
	color: var(--e-global-color-secondary);
}

/* The grid scrolls sideways rather than squashing: 18 holes will not fit on a
   phone, and a squashed column is unusable on a course. */
.ug-sc-grid { overflow-x: auto; }

.ug-sc-table {
	width: 100%;
	border-collapse: collapse;
	background: #FFFFFF;
	font-size: 15px;
}

.ug-sc-table th,
.ug-sc-table td {
	border: 1px solid #C9CDD1;
	padding: 6px;
	text-align: center;
}

.ug-sc-table th {
	background: var(--e-global-color-background);
	font-family: var(--e-global-typography-primary-font-family), system-ui, sans-serif;
	font-size: 13px;
	font-weight: 800;
}

.ug-sc-name-col { min-width: 140px; text-align: left !important; }
.ug-sc-total-col { min-width: 80px; background: var(--e-global-color-background); font-weight: 800; }

.ug-sc-table input {
	width: 100%;
	min-width: 44px;
	border: 0;
	padding: 8px 4px;
	font-size: 16px;      /* 16px stops iOS zooming in on focus */
	text-align: center;
	background: transparent;
}

.ug-sc-table input[type="text"] { text-align: left; }
.ug-sc-table input:focus { outline: 2px solid var(--e-global-color-primary); }

@media print {
	.ehf-header, .ehf-footer, .ug-sc-controls, .ug-page-photo { display: none !important; }
	.ug-sc-table input { border-bottom: 1px solid #999; }
}

/*
 * The pictures used to be one block of hand-written HTML. They are ordinary
 * Elementor image widgets now, so the client swaps a photograph with the normal
 * picker instead of editing a URL — and nothing is wrapped in a link any more,
 * because clicking one used to jump back to the top of the page.
 *
 * The selectors therefore have to match Elementor's own wrapper as well as the
 * old markup, so a grid that has not been converted yet still looks right.
 */
.ug-thumbs .ug-thumb,
.ug-thumbs .elementor-widget-image {
	display: block;
	overflow: hidden;
	border-radius: 14px;
	background: rgba(255, 255, 255, .92);
	line-height: 0;
}

.ug-thumbs .elementor-widget-image .elementor-widget-container,
.ug-thumbs .elementor-widget-image figure { margin: 0; line-height: 0; }

.ug-thumbs .ug-thumb img,
.ug-thumbs .elementor-widget-image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
	.ug-thumbs .ug-thumb:hover img,
	.ug-thumbs .elementor-widget-image:hover img { transform: scale(1.06); }
}

/* ------------------------------------------ arguments as a list, not a rank */

/*
 * The client's point, and he is right: three arguments about one subject are
 * information, not a display of three equal tiles. In running text you would
 * set them one under the other, so that is what they do here — stacked full
 * width, each opened by a hairline rule and a small arrow, no icons. The rule
 * is what separates them; the arrow is what marks where each one starts.
 */
.ug-sep {
	height: 1px;
	width: 100%;
	background-color: rgba(255, 255, 255, .34);
	margin: 6px 0;
}

.ug-arg {
	border-top: 1px solid rgba(255, 255, 255, .34);
	padding-top: 20px;
	width: 100%;
}

.ug-arg .elementor-heading-title {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

/* The arrow is a pseudo-element, so it never lands in the text the client
   edits — he types the title and the marker appears by itself. */
.ug-arg .elementor-heading-title::before {
	content: "\2192";           /* → */
	color: #F3D849;
	font-weight: 400;
	flex: 0 0 auto;
}

/* On a light panel the same list needs the dark hairline instead. */
.ug-arg.ug-on-light { border-top-color: rgba(25, 23, 24, .18); }
.ug-sep.ug-on-light { background-color: rgba(25, 23, 24, .18); }

/* ------------------------------------------------------- footer, rebalanced */

/*
 * The logo gets a column of its own at the left edge and is set large; the
 * address moves into the next column. The client asked for the gap from the
 * logo to the left margin to match the gap from the last column to the right
 * margin — both are now simply the boxed container's own padding, so they are
 * equal by construction rather than by eye.
 */
.ug-foot-logo img {
	width: 100%;
	max-width: 320px;
	height: auto;
}

@media (max-width: 1024px) {
	.ug-foot-logo img { max-width: 240px; }
}

/* --------------------------------------------- "Finde deinen Parcours" picker */

/*
 * Twenty courses in a grid is a wall, which is the client's own observation. The
 * cards stay as the content; this is the way in. The menu is built from the card
 * headings by courses.js, so adding a course to the page adds it to the menu.
 */
.ug-course-picker { width: 100%; margin: 6px 0 4px; }

.ug-course-select {
	appearance: none;
	-webkit-appearance: none;
	min-width: 320px;
	max-width: 100%;
	padding: 17px 54px 17px 26px;
	border: 2px solid var(--e-global-color-secondary, #191718);
	border-radius: 0;
	background-color: var(--e-global-color-yellow, #F3D849);
	/* The arrow is drawn here rather than loaded, so there is no extra file and
	   nothing to go missing when the site moves. */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191718'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 22px 22px;
	color: var(--e-global-color-secondary, #191718);
	font-family: var(--e-global-typography-primary-font-family), system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	cursor: pointer;
}

.ug-course-select:hover { background-color: #FFFFFF; }

.ug-course-select:focus-visible {
	outline: 3px solid var(--e-global-color-primary, #0A62D0);
	outline-offset: 2px;
}

/* A single chosen course gets roughly twice the width, and the row centres it. */
.ug-course-single > .e-con { width: 62% !important; }

@media (max-width: 1024px) {
	.ug-course-single > .e-con { width: 80% !important; }
}

@media (max-width: 767px) {
	.ug-course-single > .e-con { width: 100% !important; }
	.ug-course-select { min-width: 0; width: 100%; }
}

/* Nothing chosen yet: collapse the empty row so it leaves no hole. */
.ug-course-empty { display: none !important; }

/*
 * The course cards, built from the list under "Parcours".
 *
 * Every measurement here was taken from the hand-built cards they replace, so
 * nothing about the page changes visually: row wrapping with a 36px gap, cards
 * 348px wide at desktop width, picture 4:3, heading 26px/800 in capitals.
 *
 * The three sections are <details> rather than a script-driven accordion — it
 * opens and closes on its own, works without JavaScript, and a screen reader
 * announces it correctly.
 */
/*
 * ⚠ The block holding the cards has to fill its row.
 *
 * The cards used to be flex children of this row with widths of their own. The
 * generated block is a single child instead, and a flex item sizes itself to its
 * content — which made the whole row 208px wide and squeezed one card into 129px.
 * Measured, not guessed.
 */
.elementor-widget-text-editor:has(.ug-karten) {
	flex: 1 1 100%;
	width: 100%;
}

.ug-karten {
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
	width: 100%;
	justify-content: center;   /* as the hand-built row was */
}

.ug-karte {
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 0 1 348px;
	min-width: 0;
}

.ug-karte-bild {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #D5DBE0;
}

.ug-karte-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;        /* fills the frame whatever the photo's shape */
	display: block;
}

/*
 * The picture on a card is a button that enlarges it.
 *
 * It has to look like the plain picture it replaced, so the button's own styling
 * is stripped back to nothing and only the cursor and a small label on hover say
 * that something will happen.
 */
.ug-karte-lupe {
	padding: 0;
	border: 0;
	background: #D5DBE0;
	cursor: zoom-in;
	position: relative;
	display: block;
	width: 100%;
	font: inherit;
	color: inherit;
	text-align: left;
}

.ug-karte-lupe-hinweis {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(25, 23, 24, .78);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .4px;
	opacity: 0;
	transition: opacity .18s ease;
	pointer-events: none;
}

.ug-karte-lupe:hover .ug-karte-lupe-hinweis,
.ug-karte-lupe:focus-visible .ug-karte-lupe-hinweis {
	opacity: 1;
}

.ug-karte-lupe:focus-visible {
	outline: 3px solid var(--e-global-color-primary, #0A62D0);
	outline-offset: 2px;
}

/*
 * The enlarged view.
 *
 * Fixed to the window and fitted inside it, so the whole picture is visible at
 * the largest size the screen allows — on a normal monitor four to five times
 * the card. Escape or a click beside the picture closes it.
 */
.ug-bildbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 28px;
	background: rgba(25, 23, 24, .92);
}

.ug-bildbox.is-offen { display: flex; }

body.ug-bildbox-offen { overflow: hidden; }

.ug-bildbox-inhalt {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.ug-bildbox-inhalt img {
	max-width: 100%;
	max-height: calc(100vh - 110px);
	width: auto;
	height: auto;
	display: block;
	border-radius: 4px;
}

/*
 * A picture much taller than the window is shown at a readable width and the
 * overlay scrolls, rather than being squeezed into the height and becoming a
 * sliver. Set by the script, which is the only place the real proportions are
 * known.
 */
.ug-bildbox.is-hoch {
	align-items: flex-start;
	overflow-y: auto;
}

.ug-bildbox.is-hoch .ug-bildbox-inhalt img {
	max-height: none;
	width: min(100%, 860px);
}

.ug-bildbox-inhalt figcaption {
	color: #E0E5E9;
	font-size: 15px;
	letter-spacing: .4px;
	text-transform: uppercase;
	font-weight: 700;
}

/*
 * Scoped, because the theme styles bare <button> elements.
 *
 * Unscoped, this button came out in the theme's pink with square corners —
 * measured rgb(204, 51, 102). The overlay lives on <body>, outside the page
 * content, so nothing else was going to correct it.
 */
.ug-bildbox .ug-bildbox-zu {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #FFFFFF;
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

.ug-bildbox .ug-bildbox-zu:hover {
	background: var(--e-global-color-accent, #0A62D0);
	color: #FFFFFF;
}

@media (max-width: 767px) {
	.ug-bildbox { padding: 14px; }
	.ug-bildbox-inhalt img { max-height: calc(100vh - 92px); }
	/* on a touch screen there is no hover, so the label is always there */
	.ug-karte-lupe-hinweis { opacity: 1; }
}

/*
 * The press cuttings, all in the same frame.
 *
 * A scanned newspaper page, a portrait screenshot and a wide web banner sat side
 * by side at their own proportions, which made the row look accidental. They all
 * get the same 3:2 window now and fill it from the centre; a click shows the
 * whole picture, so nothing is actually lost by the crop.
 */
/*
 * ⚠ Two selectors on purpose, and scoped with #page.
 *
 * `ug-medien` is a class I put into the page, and a save from an Elementor window
 * that was opened before that wipes it — which is exactly what happened: the row
 * lost the class and the pictures went back to their own sizes. The second
 * selector uses the id Elementor prints by itself, which no save can take away.
 *
 * Scoped with #page, or the general picture rule wins.
 *
 * That rule — `#page > .elementor .elementor-widget-image img` — carries an id and
 * sets object-fit: contain. Without the same id here the pictures kept being
 * letterboxed inside the frame instead of filling it, so the row still looked
 * ragged: measured object-fit: contain where cover was intended.
 */
#page > .elementor .ug-medien .elementor-widget-image img,
#page > .elementor .elementor-element-ug00187 .elementor-widget-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	max-height: none;
	display: block;
	transition: opacity .18s ease;
	/* no object-position here on purpose: centre is the default anyway, and
	   stating it would outrank the ug-oben / ug-unten classes below, which are
	   the whole point of being able to choose the crop. Measured: with it, the
	   class had no effect at all. */
}

#page > .elementor .ug-medien .elementor-widget-image img:hover,
#page > .elementor .ug-medien .elementor-widget-image img:focus-visible,
#page > .elementor .elementor-element-ug00187 .elementor-widget-image img:hover,
#page > .elementor .elementor-element-ug00187 .elementor-widget-image img:focus-visible {
	opacity: .88;
}

#page > .elementor .ug-medien .elementor-widget-image img:focus-visible,
#page > .elementor .elementor-element-ug00187 .elementor-widget-image img:focus-visible {
	outline: 3px solid var(--e-global-color-primary, #0A62D0);
	outline-offset: 2px;
}

/*
 * The thumbnails on "Spielen": 3:2, and framed.
 *
 * They sit inside the photo band, so it is again a picture on a picture with no
 * edge between them. Same remedy as the example picture on "Konzept", only a
 * slimmer border because these are small. Measured before: 213x160 at
 * object-fit: fill, which also squashed anything that was not already 4:3.
 */
#page > .elementor .elementor-element-ugx0006 img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	max-height: none;
	border: 5px solid #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
	box-sizing: border-box;
}

@media (max-width: 767px) {
	#page > .elementor .elementor-element-ugx0006 img {
		border-width: 4px;
		border-radius: 10px;
	}
}

/*
 * The picture grid starts level with the heading, not with the yellow rule.
 *
 * Measured: the grid began 56px above the words, level with the divider, which
 * left it hanging higher than the text it belongs to. Only while the two sit
 * side by side — stacked on a phone the offset would just be a gap.
 */
@media (min-width: 768px) {
	#page > .elementor .elementor-element-ugr0007 {
		margin-top: 56px;
	}
}

/*
 * The picture grid beside "Gute Idee. Neu gedacht." — three across, not five.
 *
 * Measured at five columns the pictures were 89x89 while the files behind them
 * are around 1000x1000: far too small to see anything. Three across roughly
 * doubles them, and a click opens the original.
 *
 * Addressed by the id Elementor prints itself, so the grid on "Spielen" keeps its
 * own arrangement and a save cannot detach this.
 */
#page > .elementor .elementor-element-ugr0007 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

#page > .elementor .elementor-element-ugr0007 img {
	cursor: zoom-in;
	transition: opacity .18s ease;
}

#page > .elementor .elementor-element-ugr0007 img:hover,
#page > .elementor .elementor-element-ugr0007 img:focus-visible {
	opacity: .85;
}

#page > .elementor .elementor-element-ugr0007 img:focus-visible {
	outline: 3px solid var(--e-global-color-primary, #0A62D0);
	outline-offset: 2px;
}

/*
 * The example picture on "Konzept" gets an edge of its own.
 *
 * It sits directly on the photo band — a picture on a picture with nothing
 * between them, which the client rightly found awkward. A slim white border with
 * soft corners separates the two without drawing attention to itself.
 *
 * Addressed by the id Elementor prints itself, not by a class of mine: a class
 * stored in the page can be lost when the page is saved from an editor window
 * that was opened earlier.
 */
#page > .elementor .elementor-element-ug00131 img {
	display: block;
	border: 7px solid #FFFFFF;
	border-radius: 18px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .30);
	box-sizing: border-box;
}

@media (max-width: 767px) {
	#page > .elementor .elementor-element-ug00131 img {
		border-width: 5px;
		border-radius: 12px;
	}
}

/*
 * Which part of a picture the frame shows.
 *
 * The crop is taken from the middle, which suits most photographs but not a
 * scanned article, where the headline is at the top. Rather than cropping files
 * by hand, one of these class names can be typed into the image's "CSS-Klassen"
 * field in Elementor, under Erweitert:
 *
 *   ug-oben · ug-unten · ug-links · ug-rechts
 *
 * They work on any picture on the site, not only on the press cuttings.
 */
#page > .elementor .ug-oben img,
#page > .elementor img.ug-oben     { object-position: top center; }

#page > .elementor .ug-unten img,
#page > .elementor img.ug-unten    { object-position: bottom center; }

#page > .elementor .ug-links img,
#page > .elementor img.ug-links    { object-position: center left; }

#page > .elementor .ug-rechts img,
#page > .elementor img.ug-rechts   { object-position: center right; }

.ug-karte-ohne-bild {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #8A9096;
	font-size: 14px;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.ug-karte-titel {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--e-global-color-secondary, #191718);
}

.ug-karte-klapp {
	border-top: 1px solid rgba(25, 23, 24, .16);
}

.ug-karte-klapp > summary {
	padding: 12px 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--e-global-color-secondary, #191718);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ug-karte-klapp > summary::-webkit-details-marker { display: none; }

/* the chevron sits on the left and turns, as it did before */
.ug-karte-klapp > summary::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}

.ug-karte-klapp[open] > summary::before {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.ug-karte-klapp > div {
	padding: 0 0 14px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--e-global-color-text, #4A5056);
}

.ug-karte-klapp a { color: var(--e-global-color-accent, #0A62D0); }

/*
 * The note that goes with the link.
 *
 * A course can be announced before its own page exists — the link then points at
 * something related and the note says what is still missing. It reads as an aside,
 * not as a second link.
 */
.ug-karte-hinweis {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: #6B7176;
}

/* same thing in the map popup */
.ug-map-hinweis {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: #6B7176;
}

.ug-karten-leer {
	color: #6B7176;
	font-size: 16px;
}

@media (max-width: 1024px) {
	.ug-karten { gap: 28px; }
	.ug-karte { flex: 0 1 calc(50% - 14px); }
}

@media (max-width: 767px) {
	.ug-karte { flex: 1 1 100%; }
	.ug-karte-titel { font-size: 22px; }
}

/* One course chosen from the menu: give it room, as the old row did. */
.ug-karten.ug-karten-einzeln { justify-content: center; }
.ug-karten.ug-karten-einzeln .ug-karte { flex: 0 1 62%; }

@media (max-width: 1024px) {
	.ug-karten.ug-karten-einzeln .ug-karte { flex: 0 1 80%; }
}

@media (max-width: 767px) {
	.ug-karten.ug-karten-einzeln .ug-karte { flex: 1 1 100%; }
}

/*
 * The selector block sat lower and deeper than its neighbours.
 *
 * Measured on Spielen: this block carries its spacing twice over — 85px on the
 * section's inner wrapper and another 38/42px on the panel inside it, so 123px
 * above the heading and 127px below the menu, against roughly 94/100px on the
 * blocks either side. Every other block has only one of the two.
 *
 * The two figures below look lopsided and are not: added to the panel's own
 * 38px top and 42px bottom they come to 80px at each end, which is exactly what
 * the block underneath measures. Changing the inner panel instead would have
 * moved the heading away from its own box.
 */
@media (min-width: 1025px) {
	#page > .elementor > .e-con:has(.ug-course-picker) > .e-con > .e-con-inner {
		padding-top: 42px;
		padding-bottom: 38px;
	}
}

/* ------------------------------------------------- footer contact, aligned */

/*
 * Phone, mobile and mail as an icon list rather than three typed lines: the
 * widget puts every icon in a column of its own, so the numbers line up with
 * each other instead of drifting with the width of the icon in front of them.
 * That alignment was the point of the request.
 */
.ug-foot-contact .elementor-icon-list-item { align-items: center; }

/*
 * The icons are inline SVG, not a font — Elementor renders Font Awesome that
 * way. An SVG fills the box it is given, so the fixed 22px column I set for
 * alignment was also squashing the artwork down to a dot. That is what the
 * client meant by "kaum erkennbar": not small icons, squashed ones.
 * So: state the drawing size explicitly, and make the column wider than it.
 */
.ug-foot-contact {
	--e-icon-list-icon-size: 22px;
}

.ug-foot-contact .elementor-icon-list-icon {
	width: 34px;               /* one fixed column for every icon */
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
}

/* !important because Elementor's own rule for the icon size has exactly the
   same specificity as this one, so which of the two wins depends on the order
   the stylesheets happen to load in — measured 14x24px instead of 22x22. This
   is one of the few places where the tie has to be broken outright. */
.ug-foot-contact .elementor-icon-list-icon svg,
.ug-foot-contact .elementor-icon-list-icon i {
	width: 22px !important;
	height: 22px !important;
	/* A max-width somewhere later in the cascade clamps the drawing to 14px
	   wide while the height obeys. `max-width: none` here loses because that
	   rule is declared after this file; `min-width` cannot lose, because the
	   spec makes a minimum beat a maximum whatever the order. Each candidate
	   was tried in the live page and measured before choosing this one. */
	min-width: 22px !important;
	max-width: none !important;
	font-size: 22px !important;
	fill: var(--e-global-color-yellow, #F3D849);
}

.ug-foot-contact .elementor-icon-list-text { color: #C9CDD1; }
.ug-foot-contact a:hover .elementor-icon-list-text { color: #FFFFFF; }

/* The logo column is centred vertically between the top of the dark band and
   the dividing line below it. */
.ug-foot-logo { align-self: center; }

/* ---------------------------------------- Elementor's editor furniture */

/*
 * Inside the editor Elementor inserts an overlay, two shape-divider holders and
 * a resize handle as real children of every container. In a grid those take
 * cells of their own, so a row of five pictures became four plus one — which is
 * exactly what the client saw in the editor while the live page was correct.
 * Taking them out of the flow costs nothing: they are meant to sit on top of the
 * container anyway.
 */
.ug-thumbs > .elementor-element-overlay,
.ug-thumbs > .elementor-shape,
.ug-thumbs > .ui-resizable-handle {
	position: absolute;
}

/* ------------------------------------------- the course picker in a panel */

/*
 * The client asked for the chooser to sit in a rounded white field like the rest
 * of the page, so it reads as part of the design rather than a control dropped
 * onto the background.
 */
.ug-picker-panel {
	background-color: #FFFFFF;
	border-radius: 34px;
	padding: 38px 44px 42px;
}

@media (max-width: 767px) {
	.ug-picker-panel { border-radius: 24px; padding: 26px 20px 30px; }
}

/* ------------------------------------------------ map: ask before loading */

/*
 * The tiles come from openstreetmap.org, which means the visitor's IP address
 * leaves this server. The client is deliberately avoiding any outside call that
 * happens without a decision, so the map waits for a click. Styled to look like
 * a deliberate part of the page rather than an error.
 */
.ug-map-consent {
	position: absolute;
	inset: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--e-global-color-secondary, #191718);
	border-radius: inherit;
	text-align: center;
}

.ug-map-consent-inner { max-width: 460px; }

.ug-map-consent strong {
	display: block;
	margin-bottom: 12px;
	color: #FFFFFF;
	font-family: var(--e-global-typography-primary-font-family), system-ui, sans-serif;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
}

.ug-map-consent p {
	margin: 0 0 22px;
	color: #A8AEB4;
	font-size: 15px;
	line-height: 1.6;
}

.ug-map-consent-go {
	padding: 16px 30px;
	border: 2px solid var(--e-global-color-yellow, #F3D849);
	border-radius: 0;
	background: var(--e-global-color-yellow, #F3D849);
	color: var(--e-global-color-secondary, #191718);
	font-family: var(--e-global-typography-primary-font-family), system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.ug-map-consent-go:hover {
	background: transparent;
	color: var(--e-global-color-yellow, #F3D849);
}

/* ------------------------------------------------------- one vertical rhythm */

/*
 * The client counted the gaps between the blocks and found them uneven. He was
 * right: measured on the live pages they came out as 24, 48, 68, 96 and 335px,
 * because each section carried its own top and bottom padding and the full-bleed
 * photo bands have no inset at all, so they contributed nothing of their own.
 *
 * Stating it as a rhythm instead of as per-section padding makes it uniform by
 * construction: no section carries vertical padding, and every section after the
 * first sits one fixed distance below its predecessor. A hidden section takes
 * its margin with it, so switching a block off closes the gap cleanly instead of
 * leaving a hole — which is what produced the 335px on the Konzept page.
 *
 * Scoped to the page's own sections: the header and footer are separate
 * Elementor roots and set their own spacing.
 */
.elementor > .e-con {
	padding-top: 0;
	padding-bottom: 0;
}

.elementor > .e-con + .e-con {
	margin-top: 48px;
}

/*
 * The first section needs that distance from the header too.
 *
 * Only sections after the first got a margin, so the top panel sat flush against
 * the header — measured on the live page: header bottom 130px, first section top
 * 130px, zero gap. The client saw it and the Elementor editor did not, because the
 * editor canvas adds its own padding above the first element.
 *
 * ⚠ Scoped to the page's own root. There are three .elementor roots on every page
 * (header, content, footer) and the content one is the only direct child of #page —
 * without that scope this rule would also push the header's and the footer's first
 * container down.
 */
#page > .elementor > .e-con:first-child {
	margin-top: 48px;
}

/* Nothing inside a section may add to or subtract from that distance. */
.elementor > .e-con > .e-con {
	margin-top: 0;
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.elementor > .e-con + .e-con { margin-top: 28px; }
	#page > .elementor > .e-con:first-child { margin-top: 28px; }
}

/*
 * One width for every panel (the client's "Variante A", 02-10-2026).
 *
 * The panels came in two geometries. The even ones sat in a section padded 28px on
 * both sides; the others sat in a section padded 28px on one side and 132px on the
 * other, with the panel inside fixed at 1120px. Measured at 1280px wide:
 * 28 + 1120 + 132 = 1280, which is why those panels hung to the left on one block
 * and to the right on the next. The alternation looked deliberate but read as
 * careless, and the client asked for one width throughout.
 *
 * So: the same 28px either side, and the panel fills what is left (1224px). The
 * full-bleed photo bands keep their own geometry — they are meant to run edge to
 * edge — hence :not(.ug-open).
 *
 * ⚠ Desktop only. At 820px the sections already measure 28/28 and at 390px 10/10,
 * so the fault never existed there and forcing 28px would make the phone layout
 * worse. Measured before writing this, not assumed.
 */
@media (min-width: 1025px) {
	#page > .elementor > .e-con:not(.ug-open):has(> .e-con.e-con-boxed) {
		padding-left: 28px;
		padding-right: 28px;
	}

	#page > .elementor > .e-con:not(.ug-open) > .e-con.e-con-boxed {
		width: 100%;
	}
}

/*
 * No picture taller than a screen.
 *
 * The side image on "Über uns" was drawn at 1008×1344 — nearly twice the height of
 * a 720px window, so it could not be seen at once. It was also being blown up: the
 * file itself is only 900×1200, so the browser was scaling it past its own size.
 *
 * `contain` rather than `cover`: the height is capped without cutting anything out
 * of the picture. A wide photo is unaffected — it never reaches 700px tall in this
 * column — so this only bites on portrait images, which is exactly the case the
 * client objected to.
 *
 * The thumbnail grid is exempt: those images are deliberately cropped to their
 * cells, and `contain` would letterbox them.
 */
#page > .elementor .elementor-widget-image img {
	max-height: 700px;
	object-fit: contain;
}

/*
 * Thumbnails are exempt from the general 700px cap — they are small anyway.
 *
 * `cover`, not `fill`: once a thumbnail has a fixed shape, `fill` stretches the
 * photograph into it. The pictures on "Spielen" are 4:3 files in a 3:2 frame, so
 * `fill` would have squashed every one of them. `cover` crops instead, which is
 * what a thumbnail is for.
 */
#page > .elementor .ug-thumbs .elementor-widget-image img {
	max-height: none;
	object-fit: cover;
}

/*
 * A picture in landscape, 3:2 — the client's choice for the portrait on
 * "Über uns" (02-10-2026). It was standing upright and far too tall.
 *
 * The frame is fixed at 3:2 and the photo fills it, so the shape no longer
 * depends on the file: whatever he uploads is shown in the same frame, cropped
 * from the centre. That is what makes this survive a change of photo.
 *
 * `max-height: none` is needed because the general rule above caps pictures at
 * 700px — here the aspect ratio does the limiting instead.
 *
 * On a phone it is no problem: at about 370px of width the picture is roughly
 * 247px high, which is a comfortable band rather than a wall.
 */
#page > .elementor .ug-foto-quer img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	max-height: none;
	display: block;
}

/*
 * A section whose content is switched off must take its spacing with it.
 *
 * The blocks held in reserve ("Sie vertrauen uns", the quotes) are hidden by
 * putting ug-inactive on the panel inside the section. The section itself still
 * renders — at zero height, but still contributing its 48px. Two of those in a
 * row is how the Konzept page ended up with a 359px hole where the client saw
 * nothing at all. Measured, not guessed.
 */
.elementor > .e-con:has(> .ug-inactive) {
	display: none;
}