/* =========================================================
	                                   design_202610.css
	Design-Auffrischung 2026-10 (Preview)
	- wird NUR geladen, wenn $_COOKIE['DEV_design_202610'] gesetzt ist
	- überschreibt components / elements / extra (dist) + ui-anker
	- body bekommt zusätzlich die Klasse .design-202610 (für seitenweise Anpassungen)
============================================================ */

:root {
	--d26-radius-s: 8px;
	--d26-radius: 14px;
	--d26-radius-l: 24px;
	--d26-pill: 999px;

	--d26-text: #45403c;
	--d26-text-soft: #6f6862;
	--d26-line: #e6ddcd;
	--d26-line-strong: #d4c8b3;
	--d26-surface: #fff;
	--d26-footer: #2a2624;

	--d26-shadow-s: 0 1px 2px rgba(60, 40, 20, .06), 0 2px 8px rgba(60, 40, 20, .05);
	--d26-shadow: 0 2px 4px rgba(60, 40, 20, .05), 0 10px 30px rgba(60, 40, 20, .08);
	--d26-shadow-l: 0 4px 8px rgba(60, 40, 20, .06), 0 18px 48px rgba(60, 40, 20, .14);
	--d26-focus: 0 0 0 4px rgba(178, 7, 27, .15);

	--d26-ease: cubic-bezier(.2, .7, .2, 1);
}


/* =========================================================
	                                          Typographie
============================================================ */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	color: var(--d26-text);
}

body, p, ul, ol {
	font-weight: 400;
}

p, ul, ol {
	color: var(--d26-text);
	line-height: 1.75;
}

h1, h2, h3 {
	text-wrap: balance;
	letter-spacing: -0.01em;
}

h1 {
	font-size: clamp(2rem, 1.35rem + 2.2vw, 3rem);
	line-height: 1.12;
	margin: 2.5rem 0 1rem;
}

h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
	line-height: 1.2;
}

h3 {
	font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
	line-height: 1.3;
}

p {
	text-wrap: pretty;
}

strong, b {
	font-weight: 500;
}

::selection {
	background: var(--red);
	color: #fff;
}

/* Fließtext-Links in Inhalten */
.single_page_content p a:not(.uk-button),
.single_page_content li a:not(.uk-button),
.single_page_content_intro p a:not(.uk-button) {
	color: var(--red);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	text-decoration-color: rgba(178, 7, 27, .35);
}

.single_page_content p a:not(.uk-button):hover,
.single_page_content li a:not(.uk-button):hover,
.single_page_content_intro p a:not(.uk-button):hover {
	text-decoration-color: currentColor;
}

:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 3px;
}


/* =========================================================
	                                          Header / Menü
============================================================ */

.uk-navbar {
	background: linear-gradient(180deg, #bb0b20 0%, var(--red) 100%);
	transition: box-shadow .3s var(--d26-ease);
}

.uk-navbar-sticky .uk-navbar,
.uk-navbar-sticky.uk-navbar,
.uk-sticky-fixed .uk-navbar {
	box-shadow: 0 6px 24px rgba(80, 0, 10, .25);
}

/* Hauptpunkte: statt Linie oben -> weicher Unterstrich unten */
.uk-navbar-nav > li > a,
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li > a:active,
.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li > a[aria-expanded=true] {
	border-top: 0;
	opacity: 1;
}

.uk-navbar-nav > li > a {
	position: relative;
	letter-spacing: .02em;
	padding: 0 .65em;
	color: rgba(255, 255, 255, .92);
}

.uk-navbar-nav > li > a::after {
	content: "";
	position: absolute;
	left: .65em;
	right: .65em;
	bottom: 22px;
	height: 3px;
	border-radius: var(--d26-pill);
	background: var(--beige2);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .3s var(--d26-ease);
}

.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li > a[aria-expanded=true] {
	color: #fff;
}

.uk-navbar-nav > li:hover > a::after,
.uk-navbar-nav > li > a[aria-expanded=true]::after,
.uk-navbar-nav > li.uk-active > a::after {
	transform: scaleX(1);
}

li.uk-active {
	border-top: 0;
}

.uk-navbar-nav > li.uk-active > a {
	margin-top: 0;
}

/* Kontakt-Icon als runder Button */
.menu-kontakt .uk-navbar-nav > li > a {
	padding: 0;
}

.menu-kontakt .uk-navbar-nav > li > a::after {
	display: none;
}

.menu-kontakt .menu_envelope {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 1.05em !important;
	background: rgba(255, 255, 255, .14);
	transition: background .25s var(--d26-ease), transform .25s var(--d26-ease);
}

.menu-kontakt .uk-navbar-nav > li > a:hover .menu_envelope,
.menu-kontakt.uk-active .menu_envelope {
	background: rgba(255, 255, 255, .26);
	transform: scale(1.06);
}

/* Dropdowns: helle Karte statt dunkler Fläche */
.uk-navbar-dropdown {
	background: var(--d26-surface);
	color: var(--d26-text);
	border-radius: var(--d26-radius);
	box-shadow: var(--d26-shadow-l);
	padding: 12px;
}

.uk-navbar-dropdown-nav > li > a {
	display: flex;
	align-items: center;
	color: var(--d26-text) !important;
	padding: 9px 12px;
	border-radius: var(--d26-radius-s);
	font-size: .95rem;
	letter-spacing: 0;
	transition: background .2s, color .2s;
}

.uk-navbar-dropdown-nav > li > a:hover {
	color: var(--red) !important;
	background: var(--chamoise);
	letter-spacing: 0;
	font-weight: inherit;
}

.uk-navbar-dropdown-nav > li > a .uk-icon {
	color: var(--red);
	opacity: .7;
}

.uk-navbar-dropdown-nav .uk-nav-header {
	color: var(--d26-text-soft);
	font-size: .72rem;
	letter-spacing: .1em;
	font-weight: 500;
	padding: 12px 12px 4px;
}

.uk-navbar-dropdown-nav li.uk-active {
	border-top: 0;
}

.menu_kat_detail {
	padding-left: 0;
}

/* Mobile: Burger-Leiste + Offcanvas */
.menu-burger .uk-navbar-toggle {
	border-radius: 50%;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin-top: 9px;
	margin-bottom: 9px;
	justify-content: center;
	background: rgba(255, 255, 255, .14);
}

#mobile-nav div,
#mobile-nav .uk-offcanvas-bar {
	background-color: var(--d26-footer);
}

#mobile-nav .uk-offcanvas-bar {
	padding: 28px 22px;
	border-radius: 0 var(--d26-radius-l) var(--d26-radius-l) 0;
}

#mobile-nav .uk-nav-default > li > a {
	padding: 10px 14px;
	border-radius: var(--d26-radius-s);
	font-family: var(--font-ankerregular);
	font-size: 1.15rem;
	color: rgba(255, 255, 255, .85);
}

#mobile-nav .uk-nav-default > li > a:hover,
#mobile-nav .uk-nav-default > li.uk-active > a {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

#mobile-nav .uk-nav-default > li.uk-active > a {
	box-shadow: inset 3px 0 0 var(--red);
}

#mobile-nav .uk-nav-sub {
	padding: 2px 0 6px 14px;
}

#mobile-nav .uk-nav-sub a {
	padding: 6px 14px;
	color: rgba(255, 255, 255, .6);
}

#mobile-nav .uk-nav-sub a:hover {
	color: var(--beige2);
}

#mobile-nav .uk-nav-divider {
	border-top-color: rgba(255, 255, 255, .08);
	margin: 8px 0;
}

#mobile-nav .uk-nav-header {
	color: var(--beige2);
	letter-spacing: .12em;
	font-size: .72rem;
	padding: 8px 14px;
}


/* =========================================================
	                                Breadcrumbs / Quicklinks
============================================================ */

.nav_oben {
	height: auto;
	min-height: 5em;
	padding: 1em 2em;
	gap: 1em;
	flex-wrap: wrap;
}

.breadcrumbs {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	border: 1px solid var(--d26-line);
	border-radius: var(--d26-pill);
	background: var(--d26-surface);
	box-shadow: var(--d26-shadow-s);
	padding: 4px;
	font-size: .875rem;
	overflow: visible;
}

/* Such-Icon (inline gestylt im Template) */
.breadcrumbs > a[uk-toggle] {
	display: inline-grid !important;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0 !important;
	margin-right: 4px;
	border: 0 !important;
	border-radius: 50%;
	background: var(--chamoise) !important;
	color: var(--red);
	transition: background .2s, color .2s;
}

.breadcrumbs > a[uk-toggle]:hover {
	background: var(--red) !important;
	color: #fff;
}

.breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	padding: .45em .8em;
	background: transparent;
	color: var(--d26-text-soft);
	border-radius: var(--d26-pill);
	transition: background .2s, color .2s;
}

.breadcrumbs__item:hover {
	background: var(--chamoise);
	color: var(--red);
}

/* Pfeil-Keile entfernen -> dezentes Chevron */
.breadcrumbs__item:before {
	display: none;
}

.breadcrumbs__item:after,
.breadcrumbs__item:hover:after,
.breadcrumbs__item:focus:after {
	content: "";
	position: static;
	clip-path: none;
	background: none;
	width: 6px;
	height: 6px;
	margin-left: .9em;
	margin-right: -.35em;
	border-top: 1.5px solid var(--d26-line-strong);
	border-right: 1.5px solid var(--d26-line-strong);
	transform: rotate(45deg);
}

.breadcrumbs__item:last-child:after {
	display: none;
}

.breadcrumbs__item.breadcrumbs__item-is-active {
	color: var(--red);
	font-weight: 500;
	background: var(--chamoise);
}

/* Quicklinks als Chips */
.uk-subnav {
	border: 0;
	border-radius: 0;
	overflow: visible;
	gap: 6px;
	flex-wrap: wrap;
	background: transparent;
}

.uk-subnav li,
.uk-subnav .quicklink_item {
	padding: 0;
	background: transparent;
}

.uk-subnav > li > a,
.uk-subnav .quicklink_item > a {
	display: inline-block;
	padding: .55em 1.05em;
	border: 1px solid var(--d26-line);
	border-radius: var(--d26-pill);
	background: var(--d26-surface);
	color: var(--d26-text-soft);
	text-transform: none;
	font-size: .875rem;
	transition: all .2s var(--d26-ease);
}

.uk-subnav > li > a:hover,
.uk-subnav .quicklink_item > a:hover {
	border-color: var(--red);
	color: var(--red);
}

.quicklink_item.breadcrumbs__item-is-active {
	background: transparent;
}

.quicklink_item.breadcrumbs__item-is-active > a {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}

@media (max-width: 640px) {
	.nav_oben {
		padding: .75em 1em;
	}

	.breadcrumbs {
		border-radius: var(--d26-radius);
	}
}


/* =========================================================
	                                     Buttons / Formulare
============================================================ */

.uk-button {
	border-radius: var(--d26-pill);
	padding: 0 1.75em;
	letter-spacing: .03em;
	text-transform: none;
	font-size: 1rem;
	transition: background-color .2s, color .2s, box-shadow .25s var(--d26-ease), transform .25s var(--d26-ease);
}

.uk-button:not(.uk-button-text):not(.uk-button-link):hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(178, 7, 27, .22);
}

.uk-button:active {
	transform: translateY(0);
}

.uk-button-default {
	background: var(--d26-surface);
	color: var(--red);
	border: 1.5px solid var(--red);
}

.uk-button-default:hover {
	background: var(--red);
	color: #fff;
}

.button-default {
	border-radius: var(--d26-pill);
}

.uk-form-label {
	display: inline-block;
	margin-bottom: 6px;
	color: var(--darkgrey);
	font-size: .85rem;
	font-weight: 500;
	letter-spacing: .01em;
}

.uk-input,
.uk-select,
.uk-textarea {
	border: 1.5px solid var(--d26-line);
	border-radius: var(--d26-radius-s);
	background-color: var(--d26-surface);
	color: var(--d26-text);
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.uk-input,
.uk-select:not([multiple]):not([size]) {
	height: 48px;
	padding: 0 14px;
}

.uk-textarea {
	padding: 12px 14px;
	line-height: 1.6;
}

.uk-input:hover,
.uk-select:hover,
.uk-textarea:hover {
	border-color: var(--d26-line-strong);
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
	outline: none;
	border-color: var(--red);
	background-color: #fff;
	box-shadow: var(--d26-focus);
}

.uk-input::placeholder,
.uk-textarea::placeholder {
	color: #a59c92;
}

.uk-form-danger,
.uk-form-danger:focus {
	border-color: #d23a3a !important;
	box-shadow: 0 0 0 4px rgba(210, 58, 58, .12);
}

.uk-checkbox,
.uk-radio {
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--d26-line-strong);
	background-color: #fff;
	margin-top: -2px;
	transition: background-color .15s, border-color .15s, box-shadow .15s;
}

.uk-checkbox {
	border-radius: 6px;
}

.uk-checkbox:focus,
.uk-radio:focus {
	border-color: var(--red);
	box-shadow: var(--d26-focus);
}

.uk-checkbox:checked,
.uk-checkbox:indeterminate,
.uk-radio:checked,
.uk-checkbox:checked:focus,
.uk-radio:checked:focus {
	background-color: var(--red);
	border-color: var(--red);
}

fieldset.uk-fieldset legend.uk-legend {
	font-family: var(--font-ankerbold);
	color: var(--red);
}


/* =========================================================
	                                                Boxen
============================================================ */

.uk-card {
	border-radius: var(--d26-radius);
}

.uk-card-default {
	box-shadow: var(--d26-shadow);
	overflow: hidden;
	transition: box-shadow .3s var(--d26-ease), transform .3s var(--d26-ease);
}

.uk-card-default.uk-card-hover:hover,
a.uk-card-default:hover,
.uk-link-toggle > .uk-card-default:hover {
	box-shadow: var(--d26-shadow-l);
	transform: translateY(-3px);
}

.uk-card-title {
	letter-spacing: -0.005em;
	line-height: 1.25;
}

.single_page_content_intro {
	border-radius: var(--d26-radius);
	box-shadow: var(--d26-shadow-s);
	border: 1px solid rgba(230, 221, 205, .6);
	padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}

.beige-left,
.beige-left--red {
	border-left-width: 10px;
}

.anker_zitatbox {
	border: 0;
	border-radius: var(--d26-radius-l);
	background: var(--d26-surface);
	box-shadow: var(--d26-shadow);
	padding-top: 1px;
	margin-top: 40px;
}

.anker_zitatbox p {
    padding: 0 25px 50px;
}

.anker_zitatbox::before {
	top: -30px;
	width: 64px;
	height: 64px;
	padding: 0;
	line-height: 40px;
	border-radius: 50%;
	background-color: var(--red);
	color: #fff;
	box-shadow: 0 6px 16px rgba(178, 7, 27, .3);
}

.uk-subnav .quicklink_item > a:hover {
    color:  var(--red);
}

.uk-subnav  .breadcrumbs__item-is-active > a:hover {
    color: #ffffff;
}

.uk-alert {
	border-radius: var(--d26-radius-s);
}

.uk-modal-dialog {
	border-radius: var(--d26-radius);
	overflow: hidden;
}

.uk-table th {
	text-transform: none;
	font-weight: 500;
	letter-spacing: .02em;
}


/* =========================================================
	                                               Footer
============================================================ */

.footer {
	background-color: var(--beige);
	margin-top: 3rem;
}

.footer footer {
	background-color: var(--d26-footer);
	border-radius: var(--d26-radius-l) var(--d26-radius-l) 0 0;
	padding: 64px 0 24px;
}

.footermenu h4 {
	font-size: 1.2rem;
	text-transform: none;
	margin-bottom: 26px;
	letter-spacing: .01em;
}

.footermenu h4::before {
	bottom: -10px;
	width: 28px;
	height: 3px;
	border-radius: var(--d26-pill);
	background-color: var(--red);
}

.footermenu ul {
	padding: 0;
	margin: 0 0 1em;
}

.footermenu ul li {
	margin-bottom: .2em;
}

.footermenu ul li a {
	display: inline-block;
	color: rgba(255, 255, 255, .62);
	font-size: .95rem;
	transition: color .2s, transform .2s var(--d26-ease);
}

.footermenu ul li a:hover {
	color: #fff;
	padding-left: 0;
	transform: translateX(4px);
}

.footer_suche .uk-icon-link {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .6em 1.2em;
	border-radius: var(--d26-pill);
	background: var(--red);
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}

.footer-last_line {
	background-color: #1f1c1a;
	border-top: 1px solid rgba(255, 255, 255, .06);
}

.footer-last_line-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .25em .4em;
	padding: 0 1em;
}

.footer-last_line-links-item {
	margin: 0;
	text-transform: none;
}

.footer-last_line-links-item a {
	color: rgba(255, 255, 255, .7);
	padding: .3em .6em;
	border-radius: var(--d26-pill);
	transition: color .2s, background .2s;
}

.footer-last_line-links-item a:hover {
	color: #fff;
	background: rgba(255, 255, 255, .08);
}

/* Social Icons als runde Buttons */
.footer-last_line-links-item a[target="_blank"]:has(> .fab) {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
}

.footer-last_line-links-item a:has(> .fab) .fab {
	font-size: 1.15em !important;
}

.footer-last_line-links-item a:has(> .fab):hover {
	background: var(--red);
	transform: translateY(-2px);
}

.footer-last_line-links-item:has(> a > .fab.fa-facebook-square) {
	margin-left: .8em;
}

.footer-credits {
	color: rgba(255, 255, 255, .4);
	margin: 1em 0 2em;
}


/* =========================================================
	                                        Reduced Motion
============================================================ */

@media (prefers-reduced-motion: reduce) {
	.uk-button,
	.uk-card-default,
	.footermenu ul li a,
	.uk-navbar-nav > li > a::after {
		transition: none !important;
		transform: none !important;
	}
}