/*
 * nnl-basis base styles (from nnl-child-theme style.css, the part below its theme header). Handle jutso-basis-base.
 *
 * Changes in transit: kit variables as --jutso-core-* names; ::selection uses the token --jutso-core-selection-color;
 * the table-of-contents and pagination arrows are theme assets (assets/icons/) instead of files in
 * uploads/ and blogs.dir/62; the figure caption takes the paragraph-S kit typography instead of Roboto;
 * the wave-card grid shapes moved to the widgets (they need the --jutso-basis-shape-* variables). The
 * Sprechblase utility (.nnl-sprechblase-top-m, used by the starter's Page Header and Fachwissen-Thema
 * archive) stays here with copies of the widget's masks m-right.svg and mobile-top-bubble.svg in
 * assets/sprechblase/. Since 1.1.0 the Materialien print
 * notice lives in jutso-materialien and the loop-grid rule in jutso-widgets (decision 2026-09-24); the
 * Gebiete and Jahresbericht rules follow with those plugins, #breadcrumbs stays here.
 */

/* Default headline margins
 * Note: Pay attention to widget spacing. 
 * When using heading widget, margin-bottom is set to 0
 * then the spacing is controlled by the widget spacing
  .elementor-widget.elementor-widget.elementor-widget-heading .elementor-widget-container 
 */


:root {
    scroll-padding-top: 100px;
}

/* Skip link: first tab stop, visible only on keyboard focus */
.nnl-skip-navigation {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 100000;
	padding: 0.625rem 1rem;
	background-color: var(--jutso-core-color-white, #fff);
	color: var(--jutso-core-color-text, #111);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid var(--jutso-core-color-text, #111);
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	width: 1px;
}

.nnl-skip-navigation:focus-visible {
	clip: auto;
	clip-path: none;
	height: auto;
	overflow: visible;
	width: auto;
	outline: 2px solid var(--site-color, #111);
	outline-offset: 2px;
}

body {
	-webkit-font-smoothing: antialiased;
	/* requested by design for retina displays */
	font-synthesis:none;
	--site-contrast-color: var(--jutso-core-color-text);
	color: var(--jutso-core-color-text);
}
/* iOs horizontal scroll fix */
html,body {
	overflow-x:hidden;
}

/* No heading margins (1.4.0, Dennis 2026-09-30): NNL's style.css gave h1–h6 and every Elementor heading widget
   .5em 0, and live neutralised it with a custom margin of 0 on almost every heading widget. Sections space
   their texts through container gaps; headings inside rich text keep the browser defaults and the rules of
   general-content-block.css. */

h2 a,
h3 a,
h4 a,
h5 a,
h6 a{
	font-size: inherit !important;
	line-height: inherit !important;
	font-weight: inherit !important;
	letter-spacing: inherit !important;
	word-spacing: inherit !important;
}

/* Utility classes for headlines */
.h1,
.h1 .elementor-heading-title,
[class*="elementor-kit-"] .h1 {
    font-family: var(--jutso-core-font-h1-family);
	color: var(--jutso-basis-h1-default-color);
	font-size: var(--jutso-core-font-h1-size);
	line-height: var(--jutso-core-font-h1-line-height);
	font-weight: var(--jutso-core-font-h1-weight);
}

.h2,
.h2 .elementor-heading-title,
[class*="elementor-kit-"] .h2 {
    font-family: var(--jutso-core-font-h2-family);
	color: var(--jutso-basis-h2-default-color);
	font-size: var(--jutso-core-font-h2-size);
	line-height: var(--jutso-core-font-h2-line-height);
	font-weight: var(--jutso-core-font-h2-weight);
}

.h3,
.h3 .elementor-heading-title,
[class*="elementor-kit-"] .h3 {
    font-family: var(--jutso-core-font-h3-family);
	color: var(--jutso-basis-h3-default-color);
	font-size: var(--jutso-core-font-h3-size);
	line-height: var(--jutso-core-font-h3-line-height);
	font-weight: var(--jutso-core-font-h3-weight);
}

.h4,
.h4 .elementor-heading-title,
[class*="elementor-kit-"] .h4 {
    font-family: var(--jutso-core-font-h4-family);
	color: var(--jutso-basis-h4-default-color);
	font-size: var(--jutso-core-font-h4-size);
	line-height: var(--jutso-core-font-h4-line-height);
	font-weight: var(--jutso-core-font-h4-weight);
}

::-moz-selection {
    background: var(--jutso-core-selection-color, #ff5100);
    color: var(--jutso-basis-selection-text-color, #fff);
}

::selection {
    background: var(--jutso-core-selection-color, #ff5100);
    color: var(--jutso-basis-selection-text-color, #fff);
}

.elementor a:not(.nnl-link-special):not(.nnl-link-disabled){
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.elementor a:not(.nnl-link-special):not(.nnl-link-disabled):hover,
.elementor a:not(.nnl-link-special):not(.nnl-link-disabled):focus{
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

#breadcrumbs a:not(.breadcrumb_last){
	opacity: 0.85;
}

#breadcrumbs span a,
#breadcrumbs span strong {
	font-size: 16px !important;
}

.elementor-widget-text-editor ul{
	margin-bottom: .9rem
}
#breadcrumbs a,
/* Elementor's table of contents gets the growing underline by default (Dennis, 2026-09-24; on NNL only with the editor class nnl-link-special-menu). */
.elementor-widget-table-of-contents a.elementor-toc__list-item-text,
.nnl-link-special-menu a,
.nnl-link-special,
.nnl-link-special-parent a.nnl-link-special-child,
.nnl-link-special-parent p.nnl-link-special-child,
.nnl-link-special-parent h1.nnl-link-special-child,
.nnl-link-special-parent h2.nnl-link-special-child,
.nnl-link-special-parent h3.nnl-link-special-child,
.nnl-link-special-parent h4.nnl-link-special-child,
.nnl-link-special-parent h5.nnl-link-special-child,
.nnl-link-special-parent h6.nnl-link-special-child,
.nnl-link-special-parent .nnl-link-special-child a,
.nnl-link-special-parent .nnl-link-special-child p,
.nnl-link-special-parent .nnl-link-special-child h1,
.nnl-link-special-parent .nnl-link-special-child h2,
.nnl-link-special-parent .nnl-link-special-child h3,
.nnl-link-special-parent .nnl-link-special-child h4,
.nnl-link-special-parent .nnl-link-special-child h5,
.nnl-link-special-parent .nnl-link-special-child h6{
	display: inline;
	-webkit-box-decoration-break: clone;
  box-decoration-break: clone;
	 background-size: 0% 2px;
  background-position: 0 100%;
  text-decoration: none !important;
  	text-decoration-line: none;
	  background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	transition: background-size .4s ease !important;
}

#breadcrumbs a,
#breadcrumbs span,
#breadcrumbs .breadcrumb_last {
	color: var(--site-contrast-color);
}

#breadcrumbs svg path{
	fill: var(--site-contrast-color);
}

#breadcrumbs a:is(:hover, :focus, :focus-visible){
	opacity: 1;
}

#breadcrumbs a:is(:hover, :focus, :focus-visible),
.elementor-widget-table-of-contents a.elementor-toc__list-item-text:is(:hover, :focus, :focus-visible),
.nnl-link-special-menu a:is(:hover, :focus, :focus-visible),
.nnl-link-special:is(:hover, :focus, :focus-visible),
.nnl-link-special-parent:is(:hover, :focus-within) a.nnl-link-special-child,
.nnl-link-special-parent:is(:hover, :focus-within) p.nnl-link-special-child,
.nnl-link-special-parent:is(:hover, :focus-within) h1.nnl-link-special-child,
.nnl-link-special-parent:is(:hover, :focus-within) h2.nnl-link-special-child,
.nnl-link-special-parent:is(:hover, :focus-within) h3.nnl-link-special-child,
.nnl-link-special-parent:is(:hover, :focus-within) h4.nnl-link-special-child,
.nnl-link-special-parent:is(:hover, :focus-within) h5.nnl-link-special-child,
.nnl-link-special-parent:is(:hover, :focus-within) h6.nnl-link-special-child,
.nnl-link-special-parent:is(:hover, :focus-within) .nnl-link-special-child a,
.nnl-link-special-parent:is(:hover, :focus-within) .nnl-link-special-child p,
.nnl-link-special-parent:is(:hover, :focus-within) .nnl-link-special-child h1,
.nnl-link-special-parent:is(:hover, :focus-within) .nnl-link-special-child h2,
.nnl-link-special-parent:is(:hover, :focus-within) .nnl-link-special-child h3,
.nnl-link-special-parent:is(:hover, :focus-within) .nnl-link-special-child h4,
.nnl-link-special-parent:is(:hover, :focus-within) .nnl-link-special-child h5,
.nnl-link-special-parent:is(:hover, :focus-within) .nnl-link-special-child h6,
.nnl-link-special-child:is(:hover, :focus, :focus-visible){
	text-decoration: none;
	background-size: 100% 2px !important;
}

/*
 * Highlighted links (1.4.0): the text-editor switch "Links hervorheben" (inc/text-editor-highlight.php)
 * puts nnl-links-highlight on the widget. Every link of the block is bold and sits on a marker in the
 * site colour that covers the lower half of the line; on hover and focus the marker grows to the full
 * height (Dennis, 2026-09-30). Without a colour scheme the marker takes the kit colour "Selection".
 * The Callout section uses it; any text block may.
 */
.elementor-widget.nnl-links-highlight a,
.nnl-links-highlight a {
	display: inline;
	font-size: inherit; /* the kit's link typography would shrink the links in large type */
	line-height: inherit;
	font-weight: 700;
	color: inherit;
	padding: 0 0.15em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	text-decoration: none !important;
	background-image: linear-gradient(var(--site-color, var(--jutso-core-selection-color)), var(--site-color, var(--jutso-core-selection-color)));
	background-repeat: no-repeat;
	background-size: 100% 50%;
	background-position: 0 100%;
	transition: background-size .4s ease;
}

.elementor-widget.nnl-links-highlight a:is(:hover, :focus, :focus-visible),
.nnl-links-highlight a:is(:hover, :focus, :focus-visible) {
	background-size: 100% 100%;
}

/* Product button (the NNL custom button): no global link underline (non-link styles have no hover underline) */
.jutso-widgets-btn {
	background-image: none !important;
	background-size: 0 !important;
}

/* Link-style custom button only: underline grow under text, not under icon */
.jutso-widgets-btn--link .jutso-widgets-btn__text {
	position: relative;
}

.jutso-widgets-btn--link .jutso-widgets-btn__text::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 100%;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.4s ease;
}

.jutso-widgets-btn--link:is(:hover, :focus, :focus-visible) .jutso-widgets-btn__text::after {
	background-size: 100% 100%;
}

.elementor-loop-container.elementor-grid {
	display: flex; 
	justify-content: center;
	gap: var(--grid-column-gap, 30px); /* Adjust spacing as needed */
	flex-wrap: wrap;
}

.e-loop-item{
	width: calc(100% / var(--grid-columns) - var(--grid-column-gap, 30px));
}

	
.elementor-nav-menu .menu-item a{
	text-decoration: none ;
}

/*
 * Horizontal Elementor Pro nav menus (2.2.0, simple-header): submenus open under their item.
 * Pro spaces the items with margins on the links (half of "Space Between" on each side) and shifts
 * every submenu but the first by the same margin with !important (widget-nav-menu.css). The shift is
 * only right while the margin is there: a menu that spaces its items otherwise (the starter's Simple
 * Header zeroes the link margins in its custom CSS) gets every submenu but the first shifted aside.
 * So the theme spaces the items with a column gap of the same width (Space Between), the links lose
 * the margins and the submenus keep SmartMenus' own position (left 0 below their item; sub-submenus
 * still open to the side through SmartMenus' margin). Stock menus look as before (checked headless:
 * same item positions and menu width); a menu whose custom CSS sets its own gap gets Space Between
 * as the gap between items instead.
 */
.elementor-widget-nav-menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
	column-gap: calc(var(--e-nav-menu-horizontal-menu-item-margin, 0px) * 2);
}

/* Pro's clearfix pseudo element would be a flex item and add a gap after the last item. */
.elementor-widget-nav-menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu::after {
	content: none;
}

.elementor-widget-nav-menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:first-child) > a {
	margin-inline-start: 0;
}

.elementor-widget-nav-menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:last-child) > a {
	margin-inline-end: 0;
}

.elementor-widget-nav-menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:first-child) > ul,
.elementor-widget-nav-menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:first-child) > .scroll-up,
.elementor-widget-nav-menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:first-child) > .scroll-down {
	inset-inline-start: 0 !important;
}

.site-color{
	background-color: var(--site-color) !important;
	color: var(--site-contrast-color) !important;
}

.site-color a{
	color: var(--site-contrast-color);
}

.site-color-bottom .elementor-shape-bottom .elementor-shape-fill{
	fill: var(--site-color) !important;
}

.site-color-top .elementor-shape-top .elementor-shape-fill{
	fill: var(--site-color) !important;
}



/* Strich -- Background line hover effect */
.nnl-strich{
	z-index: 1;
	position: relative;
	text-decoration: none !important;
	background-image: linear-gradient(var(--site-color), var(--site-color));
	background-size: 100% 50%;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.2s ease-in-out;
}

.nnl-strich.nnl-strich-white{
	background-image: linear-gradient(var(--jutso-core-color-white), var(--jutso-core-color-white));
	opacity: 100%;
}

.nnl-strich:is(:hover, :focus, :focus-visible){
	background-size: 100% 100%;
}

.elementor-toc__list-item-text-wrapper{
	display: block ;
	position: relative;
	margin-left: 32px;
}

.elementor-toc__list-item-text-wrapper::before {
  content: "" !important;
  background: url('../icons/arrow-down.svg');
    background-repeat: repeat;
    background-size: auto;
  width: 24px !important;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate( -100%, -50% );
}

.header-button a,
.header-quicklink a{
	text-decoration: none;
}

/* Sprechblase utility (from the child theme's style.css): a speech bubble in the site colour. */
.header-button a,
.nnl-sprechblase-top-m {
	position: relative;
	background-color: var(--site-color);
	color: var(--site-contrast-color, var(--jutso-core-color-text));
	border-radius: 60px 60px 150px 150px;
	padding: 48px;
	max-width: 405px;
	margin-inline: auto;
	height: min-content;
}

.nnl-sprechblase-top-m h1,
.nnl-sprechblase-top-m h2,
.nnl-sprechblase-top-m h3,
.nnl-sprechblase-top-m h4,
.nnl-sprechblase-top-m h5,
.nnl-sprechblase-top-m h6,
.nnl-sprechblase-top-m p,
.nnl-sprechblase-top-m a {
	color: var(--site-contrast-color, var(--jutso-core-color-text));
}

/* Same mask-based tail as the Sprechblase widget (size m, right). */
.nnl-sprechblase-top-m::before {
	mask-image: url('../sprechblase/m-right.svg');
	-webkit-mask-image: url('../sprechblase/m-right.svg');
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: 100%;
	-webkit-mask-size: 100%;
	position: absolute;
	/* As on NNL: the pseudo-element covers the whole box (Elementor's container ::before is inset: 0; set here
	 * so it does not depend on the Elementor version). m-right.svg is the full bubble silhouette; it sits at
	 * the bottom of the box and translateY(70px) pushes its tail out below the box. */
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 405 / 144;
	content: '';
	/* The box's colour (on NNL box and tail both carry the site colour; a box with its own colour kept a tail in another one). */
	background-color: inherit;
	mask-position: bottom;
	-webkit-mask-position: bottom;
	transform: translateY(70px);
}

.elementor-widget-theme-post-content .wp-block-image{
	margin-bottom: 48px;
	margin-top: 48px;
}

.elementor-widget-theme-post-content .wp-block-image img{
	width: 100%;
	border-radius: 10px;
}

.elementor-widget-theme-post-content .wp-block-image figcaption{
	color: var(--jutso-core-color-black);
	/* Text/Small/Normal: paragraph S of the kit (was Roboto 14px/400/150%) */
	font-family: var(--jutso-core-font-paragraph-s-family);
	font-size: var(--jutso-core-font-paragraph-s-size);
	font-style: normal;
	font-weight: var(--jutso-core-font-paragraph-s-weight);
	line-height: var(--jutso-core-font-paragraph-s-line-height);
	border-left: 4px solid var(--site-color);
	padding-left: 20px;

}

.elementor-widget-theme-post-content .wp-block-quote{
	color: var(--jutso-core-color-text);
	font-size: var(--jutso-core-font-blockquote-size);
	font-style: normal;
	font-weight: var(--jutso-core-font-blockquote-weight);
	line-height: var(--jutso-core-font-blockquote-line-height); /* 48px */
	letter-spacing: var(--jutso-core-font-blockquote-letter-spacing);
	margin: 0;
	margin-top: 32px;
	margin-bottom: 48px;
	border-left: 4px solid var(--site-color);
	padding-left: 20px;
}

.elementor-post-navigation__next{
	display: flex;
	justify-content: end;
	margin-right: 32px;
}

.post-navigation__arrow-next{
	position: absolute;
	transform: translateX(calc(100% + 8px));
}

.elementor-post-navigation__prev{
	display: flex;
	justify-content: start;
	margin-left: 32px;
}

.post-navigation__arrow-prev{
	position: absolute;
	transform: translateX(calc(-100% - 8px));
}

.elementor-post-navigation__link a {
	display: flex !important;
}

.elementor-pagination{
	flex-wrap: wrap;
}

.post-password-form{
	min-height: 300px;
}

.general-filter-meta-gebiete-ids-container{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.general-filter-meta-gebiete-ids-container label{
	transition: all 0.2s ease;
	padding: 10px;
	border-radius: 10px;
	display: flex;
	width: 100%;
	align-items: center;
	gap: 10px;
}

.general-filter-meta-gebiete-ids-container label:hover{
	cursor: pointer;
	background-color: #f0f0f0;
}

.general-filter-meta-gebiete-ids-container input[type="checkbox"]:checked + label{
	background-color: #f0f0f0;
	font-weight: 700;
}

.general-filter-meta-checkbox-image{
	width: 32px;
	height: 32px;
}

.general-filter-meta-gebiete-ids-container input[type="checkbox"]{
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}


.nnl-gebietstyp-pill{
	padding: 4px 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	width: min-content;
	height: min-content;
	/**
		border: 1px solid;
	**/
	border: none !important;
	border-radius: 5px; 
	white-space: nowrap;
}

.elementor-pagination{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 16px;
}

.page-numbers{
	text-decoration: none !important;
	display: flex;
	height: 32px;
	width: 32px;
	padding: 0;
	margin: 0 !important;
	aspect-ratio: 1 / 1;
	align-items: center;
	justify-content: center;
}

.page-numbers:hover{
	font-weight: 700 !important;
}

.page-numbers.current{
	background-color: var(--jutso-core-color-borders);
	border-radius: 10px;
	font-weight: 700;
}

.page-numbers.prev,
.page-numbers.next,
.page-numbers.prev:hover,
.page-numbers.next:hover{
	position: relative;
	color: transparent;
	width: 0;
	margin: 0 40px  !important;
}

.page-numbers.prev:before,
.page-numbers.next:after {
	content: '';
	position: absolute;
	height: 32px;
	width: 32px;
	
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 100%;
	border: 1px solid var(--jutso-core-color-text);
	transition: background-size 0.4s ease;
}

.page-numbers.prev:before,
.page-numbers.next:after{
	opacity: 0.5;
	pointer-events: none;
	cursor: default;
}

.page-numbers.prev[href]:before,
.page-numbers.next[href]:after{
	opacity: 1;
	pointer-events: all;
	cursor: pointer;
}

.page-numbers.prev[href]:hover:before,
.page-numbers.next[href]:hover:after{
	border-width: 2px;
}

.page-numbers.prev:before{
	content: '';
	background-image: url('../icons/arrow-left.svg');
}

.page-numbers.next:after{
	content: '';
	background-image: url('../icons/arrow-right.svg');
}

.elementor-field-group{
	position: relative;
}

/* Select fields as large as the text inputs of the same size class (Elementor Pro gives the select
   font-size: inherit, i.e. the body size); a form's own field typography still wins. */
.elementor-field-group .elementor-select-wrapper select.elementor-field-textual {
	font-size: 15px;
	line-height: 1.4;
}
.elementor-field-group .elementor-select-wrapper select.elementor-field-textual.elementor-size-xs { font-size: 13px; }
.elementor-field-group .elementor-select-wrapper select.elementor-field-textual.elementor-size-md { font-size: 16px; }
.elementor-field-group .elementor-select-wrapper select.elementor-field-textual.elementor-size-lg { font-size: 18px; }
.elementor-field-group .elementor-select-wrapper select.elementor-field-textual.elementor-size-xl { font-size: 20px; }

.elementor-field-group.elementor-error .elementor-field{
	border-color: #D63146 !important;
}

.elementor-field-group.elementor-error:after{
	z-index: 10;
	content: '';
	position: absolute;
	right: 20px;
	top: 52px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z' fill='%23D63146'/%3E%3C/svg%3E%0A");
}

.elementor-message-danger:before{
	content: "" !important;
	z-index: 10;
	width: 20px;
	height: 20px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V13H11V15ZM11 11H9V5H11V11Z' fill='%23D63146'/%3E%3C/svg%3E%0A");
}

.elementor-field-group .elementor-message{
	position: absolute;
	font-size: var(--jutso-core-font-paragraph-xs-size);
	font-weight: var(--jutso-core-font-paragraph-xs-weight);
	line-height: var(--jutso-core-font-paragraph-xs-line-height);
	top: 100%;
	margin: 4px 0 0 12px !important;
	left: 0;
}

.elementor-field-group .elementor-message:before{
	display: none;
}

.nnl-shortcode-headline{
	font-weight: 700;
	margin: 0;
}

.nnl-shortcode-layout{
	display: flex;
	flex-direction: row;
	gap: 12px;
}

.nnl-shortcode-content-wrap{
	display: flex;
	flex-direction: column;
}

.nnl-shortcode-icon-wrap{
	width: 32px;
	height: 32px;
	max-width: 32px;
	max-height: 32px;
	flex-grow: 1;
	flex-shrink: 0;
}

@media screen and (max-width: 767px) {
	.nnl-sprechblase-top-m {
		width: 100%;
		max-width: none;
		border-radius: 30px 30px 50px 50px;
		padding: 40px 20px 0 20px;
	}

	/* Mobile top-bubble mask of the widget for the top variant. */
	.nnl-sprechblase-top-m::before {
		mask-image: url('../sprechblase/mobile-top-bubble.svg') !important;
		-webkit-mask-image: url('../sprechblase/mobile-top-bubble.svg') !important;
		mask-position: bottom !important;
		-webkit-mask-position: bottom !important;
		mask-repeat: no-repeat !important;
		-webkit-mask-repeat: no-repeat !important;
		bottom: auto !important;
		aspect-ratio: 287 / 102;
		height: auto;
		top: 100%;
		transform: translateY(-45%);
		border-radius: 0 0 30px 30px;
	}

	.nnl-jahresbericht-dropdown-widget .nnl-jahresbericht-parent-dropdown {
		font-size: 52px;
	}

	.elementor-pagination{
		gap: 8px;
	}

	.page-numbers.prev,
	.page-numbers.prev:hover{
		width: 0;
		
		margin: 0 auto 0 0 !important;
	}
	.page-numbers.prev:before{
	transform: translateX(50%);
	}

	.page-numbers.next,
	.page-numbers.next:hover{
		width: 0;
		
		margin: 0 0 0 auto !important;
	}

	.page-numbers.next:after{
	transform: translateX(-50%);
	}


}

/**
*
* Mobile breadcrumb is just a back arrow.
*
**/
#breadcrumbs > span > svg:first-child{
		display: none;
	}

@media (max-width: 768px) {

	#breadcrumbs > span > span,
	#breadcrumbs > span > svg{
		display: none;
	}

	#breadcrumbs > span > span:nth-last-child(3){
		display: inline-block;
	}

	#breadcrumbs > span > svg:first-child{
		transform: rotate(180deg);
		display: inline-block;
	}
	
}
/* Elementor Pro's table of contents inserts an empty span.elementor-menu-anchor before every
   heading it lists. In flex layouts with a gap (e.g. the image-text widget's content column)
   that span is one more flex item, so the gap above the heading doubled (60px instead of 30px).
   Out of the flex flow it still works as the jump target. Beyond NNL, which shows the same gap. */
.e-con .elementor-menu-anchor:empty,
[class*="__content"] > .elementor-menu-anchor:empty {
	position: absolute;
}