.ttw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.ttw-list{display:flex;flex-direction:column;gap:12px}
.ttw-card{border:none;padding:12px;border-radius:6px;background:#fff;display:flex;flex-direction:column}
.ttw-card .ttw-image{width:100%;height:160px;object-fit:cover;border-radius:4px;margin-bottom:10px;background:#f4f4f4}
.ttw-card h3{margin:0 0 6px 0;font-size:1.05rem}
.ttw-card .ttw-meta{font-size:.9rem;color:#666;margin-bottom:8px}
.ttw-session-time{font-weight:600}
.ttw-trainer-card .ttw-image{width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:10px}
.ttw-trainer-meta{font-size:.9rem;color:#444}
.ttw-license{font-size:.85rem;color:#000;margin-top:6px}

/* Trainer card two-column layout: image/title/license on the left, short bio on the right */
.ttw-trainer-card .ttw-trainer-inner{display:flex;gap:16px;align-items:flex-start}
.ttw-trainer-card .ttw-trainer-left{display:flex;flex-direction:column;align-items:center;min-width:140px}
.ttw-trainer-card .ttw-trainer-right{flex:1}
.ttw-trainer-card .ttw-title{margin:8px 0 6px 0}
/* On small screens stack vertically */
@media (max-width:480px){
	.ttw-trainer-card .ttw-trainer-inner{flex-direction:column;align-items:center}
	.ttw-trainer-card .ttw-trainer-right{text-align:center}
}

/* Align the license pill and trainer name to the left edge of the left column while keeping the image centered */
.ttw-trainer-card .ttw-trainer-left .ttw-license-pill,
.ttw-trainer-card .ttw-trainer-left .ttw-title {
	align-self: flex-start;
	text-align: left;
}
/* License pill shown above trainer name: use the session address gray (#666) as background and white text */
.ttw-license-pill{
	display:inline-block; /* inline so background only covers content */
	vertical-align:middle;
	background:#666; /* same gray hue used for session address text */
	color:#fff;
	padding:0 4px; /* no vertical padding, minimal horizontal padding so background sits tightly behind text */
	border-radius:999px; /* pill */
	font-size:0.8rem; /* slightly smaller */
	line-height:1.2; /* give comfortable text height without extra background */
	margin-bottom:8px;
	font-weight:400; /* normal weight per request */
}

/* Prevent flex column children (e.g. .ttw-card in some contexts) from stretching the pill to full width */
.ttw-trainer-card .ttw-license-pill,
.elementor .ttw-trainer-card .ttw-license-pill,
.elementor-widget .ttw-trainer-card .ttw-license-pill {
	align-self: flex-start !important;
}
.ttw-short-bio{font-size:.95rem;color:#333;margin-bottom:6px}

/* Session: show small circular trainer pics */
.ttw-session-trainers-pics{display:flex;gap:8px;align-items:center;margin-top:12px}
/* Trainer avatar: make the link a fixed-size circular frame and make the image fill it. */
.ttw-trainer-thumb-link{display:inline-block;width:48px;height:48px;border-radius:50%;overflow:hidden;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,0.04)}
.ttw-trainer-thumb{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;border:2px solid #fff}
.ttw-session-card{position:relative;padding-left:22px;padding-top:4px}
.ttw-session-bar{position:absolute;left:4px;top:4px;bottom:4px;width:6px;border-radius:8px}

/* Use CSS variables set on the article to create a faint background tint (10% intensity) matching the accent bar */
.ttw-session-card.has-ttw-color{background-color:rgba(var(--ttw-color-rgb),var(--ttw-tint-alpha,0.08))}
.ttw-session-card.has-ttw-color .ttw-session-bar{background-color:var(--ttw-color)}

/* Location block in bottom-right: stack items vertically */
.ttw-session-location-bottomright{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.ttw-session-location-bottomright > div{line-height:1}

/* Session bio should match the address styling (font size/color/line-height) */
.ttw-session-bio{font-size:.9rem;color:#666;margin-bottom:8px;line-height:1}

/* Titles: bold and remove underline on links */
.ttw-title a{font-weight:700;text-decoration:none;color:inherit}
.ttw-session-location-bottomright{position:absolute;right:12px;bottom:12px}

/* Session icons: time and location — use same sizing and stroke width (time icon as reference)
	Align icon+text columns so the time text is the vertical reference for both blocks. */
.ttw-time-icon, .ttw-location-icon {
	 display: inline-block;
	 /* size icons to match the surrounding text (1em) so they scale with font-size */
	 width: 1em;
	 height: 1em;
	 margin-right: 0.5em;
	 line-height: 1;
	 vertical-align: middle;
}
.ttw-time-icon svg, .ttw-time-icon img, .ttw-location-icon svg, .ttw-location-icon img {
	 display: block;
	 width: 100%;
	 height: 100%;
}

/* Vorstands email/phone icons: scale to the surrounding text height (1em) so they match the field size */
.ttw-vorstand-email .ttw-email-icon,
.ttw-vorstand-telefon .ttw-phone-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	line-height: 1;
}
.ttw-vorstand-email .ttw-email-icon svg,
.ttw-vorstand-telefon .ttw-phone-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}
.ttw-vorstand-email .ttw-email-icon svg *,
.ttw-vorstand-telefon .ttw-phone-icon svg * {
	stroke: currentColor !important;
	fill: none !important;
	stroke-width: 1.6 !important;
}

/* Make the black separator under the vorstand image match the image width.
   The media wrapper shrink-wraps the image so the separator (100%) follows
   the image width dynamically rather than being fixed. */
.ttw-vorstand-media {
	display: inline-block; /* shrink-wrap to image width */
	text-align: center;
}
.ttw-vorstand-media .ttw-vorstand-sep {
	width: 100%;
	height: 8px;
	background: #000;
	margin: 0 auto;
	display: block;
	box-sizing: border-box;
}

/* Center the content under the picture: make the inner container shrink-wrap
   to the media width so the content aligns directly under the image. */
.ttw-vorstand-card .ttw-vorstand-inner {
	display: inline-block;
	text-align: center;
	width: auto;
}
.ttw-vorstand-card .ttw-vorstand-content {
	padding-top: 10px;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

/* Vorstand: remove rounded corners from images and set Helvetica for card text */
.ttw-vorstand-card {
    font-family: Helvetica, Arial, sans-serif;
}
.ttw-vorstand-media .ttw-image,
.ttw-vorstand-media .ttw-image img {
    border-radius: 0 !important;
}

/* Make inline SVG icons outlined (no fill) and use the surrounding text color for the stroke/contour.
	Use the time icon's stroke width as the canonical value for both icons. */
.ttw-time-icon svg, .ttw-time-icon svg *,
.ttw-location-icon svg, .ttw-location-icon svg * {
	 fill: none !important;
	 stroke: currentColor !important;
	 stroke-width: 1.6 !important;
}

.ttw-session-address { margin-bottom: 8px; display: grid; grid-template-columns: auto 1fr; column-gap: 0.5em; align-items: center }

/* Make the time meta use the same grid so icon + text columns align with the address block.
	Use the icon center as the vertical reference: align-items: center aligns icon center and the main text center. */
.ttw-session-time { display: grid; grid-template-columns: auto 1fr; column-gap: 0.5em; align-items: center }
.ttw-session-time-text { display: block }

/* Force street and postal to sit in the second column (aligned with location text) */
.ttw-session-address .ttw-session-street,
.ttw-session-address .ttw-session-postal {
	grid-column: 2 / -1;
	margin: 0; /* normalize spacing for block elements */
}


/* Einzelpaare card styles: similar to vorstand but image ratio 3:4 */
.ttw-einzelpaare-card {
	align-items: center;
	text-align: center;
}
.ttw-einzelpaare-inner { display:inline-block; text-align:center }
.ttw-einzelpaare-media { display:inline-block }
.ttw-einzelpaare-imgwrap .ttw-image { display:block; width:200px; max-width:100%; height:auto; border-radius:0; }
.ttw-einzelpaare-sep { display:block; height:10px; background:#000; width:100%; margin:0 }
.ttw-einzelpaare-content { padding-top:0; width:100%; box-sizing:border-box }
.ttw-einzelpaare-follow, .ttw-einzelpaare-leed, .ttw-einzelpaare-class { margin-bottom:6px; font-size:0.95rem; color:#333 }
/* Make follow and leed bold for emphasis */
.ttw-einzelpaare-follow, .ttw-einzelpaare-leed { font-weight:700; }

/* Layout for the overlay white info box on the bottom of the image */
.ttw-einzelpaare-imgwrap{position:relative;display:inline-block}
.ttw-einzelpaare-imgwrap .ttw-image{width:200px;aspect-ratio:3 / 4;object-fit:cover}
/* Pale gray overlay box centered horizontally over the image.
 	 Upper edge positioned at 1/5 of the image height measured from the bottom (top:80%).
 	 Box extends 20px below the picture (bottom:-20px). */
.ttw-einzelpaare-info-box{
 	position:absolute;
 	left:50%;
 	transform:translateX(-50%);
 	width:180px;
 	height:100px; /* fixed height requested */
 	top:calc(100% - 50px); /* align center of 100px box with bottom edge of picture */
 	background:#e6e6e6; /* a little lighter gray */
 	z-index:2;
 	display:flex;
 	align-items:center; /* vertical centering of inner content */
 	justify-content:center;
 	padding:0 10px;
 	box-sizing:border-box;
 	border-radius:0; /* no rounded corners */
 	box-shadow:none;
}

/* Inner container displays fields inline in one row */
.ttw-einzelpaare-info-inner{display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;width:100%;height:100%;padding:8px 0}
.ttw-einzelpaare-follow,.ttw-einzelpaare-leed,.ttw-einzelpaare-class{margin:0;display:block;width:100%;text-align:center;font-size:0.95rem}
.ttw-einzelpaare-follow{font-weight:700;margin-bottom:1px}
.ttw-einzelpaare-leed{font-weight:700;margin-bottom:12px}
.ttw-einzelpaare-class{color:#777}


/* Remove frame for einzelpaare cards */
.ttw-einzelpaare-card { border: none; box-shadow: none; background: transparent; }



/* Make the card indicate it's interactive */
.ttw-einzelpaare-card{cursor:pointer}
.ttw-session-card{cursor:pointer}

/* Make session titles bold again */
.ttw-session-card .ttw-title,
.ttw-session-modal .ttw-title,
.ttw-einzelpaare-modal .ttw-title {
	font-weight:700;
}

/* Trainer modal should match the intrinsic width of the trainer card so it looks like the displayed trainer card */
.ttw-trainer-modal .ttw-einzelpaare-modal-inner{
	max-width:420px; /* roughly the size of the trainer card */
	width:auto;
	display:block; /* let inner shrink-wrap */
	padding:12px;
}
.ttw-trainer-modal .ttw-einzelpaare-modal-inner .ttw-trainer-card{
	margin:0; /* remove extra margins so it fits snugly */
}

/* Remove any framed button appearance for the close icon inside trainer modal */
.ttw-trainer-modal .ttw-einzelpaare-modal-close,
.ttw-trainer-modal .ttw-einzelpaare-modal-close:focus,
.ttw-trainer-modal .ttw-einzelpaare-modal-close:hover {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0 !important;
	line-height: 1 !important;
	color: #333 !important;
}

/* Make enlarged session modal match the intrinsic size of the session card (shrink-wrap)
   while still keeping a sensible max for small viewports. */
.ttw-session-modal .ttw-einzelpaare-modal-inner {
	display: inline-block; /* shrink-wrap to content */
	width: auto;
	max-width: 90%; /* responsive cap */
	padding: 12px; /* match trainer modal padding */
}
.ttw-session-modal .ttw-einzelpaare-modal-inner .ttw-session-card{
	margin: 0; /* remove spacing so modal size matches card */
}

/* When a card has a tint (inline CSS vars provided), use that tint for the card frame/border.
   Use the rgb variable and tint alpha previously set on the element. This keeps the same hue
   and intensity as the background tint used elsewhere. */

/* Elementor: allow our single-item widgets to flow side-by-side inside container/raster layouts.
   Some themes or Elementor container types force widget children to full-width on the frontend;
   make our widget elements behave as inline-blocks with a sensible max-width so multiple
   single widgets can sit in a grid-like row. This mirrors how the editor presents them. */
.elementor .elementor-widget-ttw_trainer_single,
.elementor .elementor-widget-ttw_session_single,
.elementor .elementor-widget-ttw_einzelpaare_single {
	display: inline-block !important;
	vertical-align: top !important;
	width: auto !important;
	margin: 0 8px 16px 8px !important;
}

/* Constrain the inner card so it has a consistent fixed width regardless of widget container rules */
.elementor .elementor-widget-ttw_trainer_single .ttw-trainer-inner,
.elementor .elementor-widget-ttw_session_single .ttw-session-inner,
.elementor .elementor-widget-ttw_einzelpaare_single .ttw-einzelpaare-inner {
	max-width: 220px !important;
	width: 220px !important;
	box-sizing: border-box !important;
	margin: 0 auto !important;
	display: block !important;
}

/* Plugin-level wrapper for widget contents: make this an independent block so
   themes/Elementor wrappers can't accidentally nest multiple widgets into one cell. */
.elementor .ttw-widget-wrapper,
.ttw-widget-wrapper {
	display: block !important;
	width: 100% !important; /* let the outer .elementor-widget-... control inline sizing */
}

/* If Elementor's widget-wrap uses flex/grid, ensure our widget wrapper behaves as
   a standalone item and doesn't become a child grid of the first element. */
.elementor .elementor-widget-wrap > .elementor-widget-ttw_trainer_single,
.elementor .elementor-widget-wrap > .elementor-widget-ttw_session_single,
.elementor .elementor-widget-wrap > .elementor-widget-ttw_einzelpaare_single {
	flex: 0 0 auto !important;
}