/* === CSS: a-reset.css [root] === */
/**
.outline{
	border: 1px solid rgba(50, 200, 250, .9);
}
.outline:nth-child(1){
	border-color: rgba(255, 200, 150, .9);
}
.outline:nth-child(2){
	border-color: rgba(200, 150, 255, .9);
}
.outline:nth-child(3){
	border-color: rgba(150, 255, 200, .9);
}
/**/

/* helper */

*{
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 1rem;
	text-decoration: none;
	font-style: normal;
	font-weight: 300;
	letter-spacing: .03rem;
	border: none;
	outline: none;
	list-style: none;
	
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	text-wrap: balance;
}

:root{
	--background:			#ebebeb;
	--color: 					#565656;
	--white:					#EBEBEB;
	--white-900:			#E3E3E3;
	--white-800:			#DCDCDC;
	--white-700:			#D4D4D4;
	--white-600:			#CCCCCC;
	--white-500:			#C4C4C4;
	--white-500:			#C4C4C4;
	--white-400:			#BDBDBD;
	--white-300:			#B5B5B5;
	--white-200:			#ADADAD;
	--white-100:			#A6A6A6;
	--white-bg:				#EBEBEB99;
	--white-bg-900:		#E3E3E399;
	--white-bg-800:		#DCDCDC99;
	--white-bg-700:		#D4D4D499;
	--white-bg-600:		#CCCCCC99;
	--white-bg-500:		#C4C4C499;
	--dark:						#141414;
	--dark-900:				#1C1C1C;
	--dark-800:				#242424;
	--dark-700:				#2B2B2B;
	--dark-600:				#333333;
	--dark-500:				#3B3B3B;
	--dark-400:				#424242;
	--dark-300:				#4A4A4A;
	--dark-200:				#525252;
	--dark-100:				#595959;
	--dark-bg:				#14141499;
	--dark-bg-900:		#1C1C1C99;
	--dark-bg-800:		#24242499;
	--dark-bg-700:		#2B2B2B99;
	--dark-bg-600:		#33333399;
	--dark-bg-500:		#3B3B3B99;
	--dark-bg-400:		#42424299;
	--dark-bg-300:		#4A4A4A99;
	--dark-bg-200:		#52525299;
	--dark-bg-100:		#59595999;
	
	--color-100: 			#6B82BF; 
	--color-200: 			#7690C6; 
	--color-300: 			#7E96C9; 
	--color-400: 			#879DCC; 
	--color-500: 			#91A4CF; 
	--color-600: 			#9AABD2; 
	--color-700: 			#A3B2D5; 
	--color-800: 			#ADB9D8; 
	--color-900: 			#B6C0DB; 
	--color-bg-100: 	#6B82BF99;
	--color-bg-200: 	#7690C699;
	--color-bg-300: 	#7E96C999;
	--color-bg-400: 	#879DCC99;
	--color-bg-500: 	#91A4CF99;
	--color-bg-600: 	#9AABD299;
	--color-bg-700: 	#A3B2D599;
	--color-bg-800: 	#ADB9D899;
	--color-bg-900: 	#B6C0DB99;
	--akzent: 				#141414;
	--akzent-valid: var(--color-800);
	--grid-bg: 				#ebebeb66;
	--footer-bg: 			#2C2B2Bee;
	--header-bg: 			#ebebebaa;
	--header-bg-fixed: 	#ebebebee;
	
	--padding-inline: 2rem;
	--content-max-width: 70rem;
	--breackout-max-width: 80rem;
	--burger-size: 2rem;
	--blur: 10px;
	
	--content-text: var(--dark);
	--button-border: var(--color-800);
	--btn-shadow: 0 1px 2px #00000022;
	--btn-focus-ring: var(--color-900);
		--btn-important-bg: #A3B2D5;
		--btn-important-bg-hover: #9AABD2;
		--btn-important-text: #f8f9ff;
		--btn-normal-bg: #d4d8df;
		--btn-normal-bg-hover: #c7cdd6;
		--btn-normal-text: #1f2738;
	--btn-danger-bg: #c1302a;
	--btn-danger-bg-hover: #a92a25;
	--btn-danger-text: #ffffff;
	--btn-disabled-bg: #c4c9d3;
	--btn-disabled-border: #aeb4c0;
	--btn-disabled-text: #666c76;
	--nav-hover: var(--white-900);
	--burger:	var(--dark);
	
	--bun: calc(var(--burger-size) / 16);
	--offset: calc(var(--burger-size) / 2.15);
	--offset-minus: calc(var(--offset) - var(--offset) * 2);
}

.opac-900{
	opacity: .9;
}
.opac-800{
	opacity: .8;
}
.opac-700{
	opacity: .7;
}
.opac-600{
	opacity: .6;
}
.opac-500{
	opacity: .5;
}
.opac-400{
	opacity: .4;
}
.opac-400{
	opacity: .4;
}
.opac-300{
	opacity: .3;
}
.opac-200{
	opacity: .2;
}
.opac-100{
	opacity: .1;
}

@media (prefers-reduced-motion: no-preference) {
	:has (:target) {
		scroll-behavior: smooth;
		scroll-padding-top: 2rem;
	}
}

/* === CSS: b-page-form.css [root] === */
fieldset{
	width: 100%;
	display: grid;
	grid-auto-flow: column;
	grid-template: 1fr / 2fr;
	gap: 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	position: relative;
}
label{
	text-align: left;
	white-space: nowrap;
	color: var(--dark-500);
}
label i{
	color: var(--dark-100);
}
input, select, textfield, textarea, .input-style{
	width: 14rem;
	padding: .5rem;
	color: var(--color);
	background: var(--grid-bg);
	box-shadow: inset -1px -1px 2px var(--white-800),
							inset 	1px 1px 2px var(--color-800),
							0px  0px 8px 4px transparent;
	transition: all .3s linear;
	border-radius: 3px;
}
select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2.2rem;
	border: 1px solid var(--white-700);
	background-image:
		linear-gradient(135deg, transparent 50%, var(--akzent) 50%),
		linear-gradient(225deg, transparent 50%, var(--akzent) 50%);
	background-position:
		calc(100% - 1rem) 50%,
		calc(100% - .6rem) 50%;
	background-size: .45rem .45rem, .45rem .45rem;
	background-repeat: no-repeat;
}
textarea.wider{
	width: 100%;
}
textarea.higher{
	min-height: 4rem;
}
textarea.height{
	min-height: 8rem;
}
.vertical{
	grid-auto-flow: row;
}
.input-space{
	width: 14rem;
	text-align: left;
}
.submit{
	background: var(--grid-bg);
	box-shadow: -1px -1px 2px var(--white-500),
							 1px 1px 2px var(--dark-500);
	color: var(--text);
}

input:focus, textfield:focus, textarea:focus{
	box-shadow: inset -1px -1px 2px var(--white-500),
							inset  1px  1px 2px var(--white-500),
										 0px  0px 8px 4px var(--white);
}
select:focus{
	border-color: var(--akzent);
	box-shadow: inset -1px -1px 2px var(--white-500),
							inset  1px  1px 2px var(--white-500),
										 0px  0px 8px 4px var(--white);
}

/* switch */

.switch {
  display: inline-flex;
  margin: 0 5px 0 5px;
}
.switch input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
}
.switch input[type=checkbox]:checked + label {
  background: var(--color-bg-500);
}
.switch input[type=checkbox]:checked + label::after {
  left: calc(100% - 4px);
  transform: translateX(-100%);
  background: var(--color-800);
}

.switch input[type=radio] {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
}
.switch input[type=radio]:checked + label {
  background: #66aa66;
}
.switch input[type=radio]:checked + label::after {
  left: calc(100% - 4px);
  transform: translateX(-100%);
}

.switch label {
  cursor: pointer;
  width: 48px;
  height: 24px;
  background: var(--dark-bg-100);
  display: block;
  border-radius: 24px;
  position: relative;
  
  box-shadow: inset  1px 1px 2px var(--dark-900),
                inset -1px -1px 2px var(--white-100);
}
.switch label::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background: var(--white-500);
  border-radius: 16px;
  transition: 0.2s;
  box-shadow:  1px 1px 2px var(--dark-900),
                -1px -1px 2px var(--white-100);
}
[contentEditable=true]:empty:not(:focus):before{
	content:attr(data-placeholder);
	opacity: 0.45;
}

.switch.radio label{
	width: 32px;
	height: 32px;
}
.switch.radio input[type=radio] + label::after {
  left: 8px;
  top: 8px;
}
.switch.radio input[type=radio]:checked + label::after {
  left: 8px;
  transform: none;
}

.match-dropdown{
	position: absolute;
	right: 1px;
	z-index: 1;
	
	-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  background-color: var(--background);
	font-family: "Helvetica Neue", "Arial", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif;
	color: var(--color);
	
	padding: .6rem;
	color: var(--color);
}

.match-dropdown option {
  background-color: var(--background);
	color: var(--color);
}

/* mobile */

button{
	transition: opacity 0.3s ease;
}
button[disabled]{
	opacity: .3;
}
::placeholder{
	color: var(--dark-700);
}

.file-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  border: 2px dashed var(--color);
  border-radius: 3px;
  background-color: var(--background);
  color: var(--color);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.file-drop-zone:hover {
  background-color: var(--dark-bg-100);
  border-color:var(--dark-700);
}
.dropzone{
	height: 100%;
}
.dropzone.dragover {
  background-color: var(--dark-bg-100);
  border-color:var(--dark-700);
}
.file-drop-zone input[type="file"] {
  display: none;
}
.file-drop-zone__icon {
  margin-bottom: 1rem;
  color: var(--dark-700);
}
.file-drop-zone__text {
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.4;
}
.file-drop-zone__text small {
	color: var(--color);
	font-size: 0.85rem;
}

.file-drop-zone.akzent {
	border-color: var(--akzent);
}

@media screen and (max-width: 500px), screen and (max-height: 500px)
{

fieldset{
	display: block;
}
label{
	display: block;
}

}

.inpextra{
	position: absolute;
	top: 9999vh;
	left: 9999vw;
}

.inputGrow{
	resize: vertical;
	field-sizing: content;
	min-height: 8rem;
	max-height: 20rem;
}

.position-relative{
	position: relative;
}

/* Reserve extra space on the right for eye-toggle + OS password helper icons.
   Width stays unchanged because global box-sizing is border-box. */
.position-relative input.password{
	padding-right: 1.5rem;
}

/* Safari/iOS: move the native credentials helper away from the eye button. */
.position-relative input.password::-webkit-credentials-auto-fill-button{
	margin-right: 1rem;
}

a.passwordEye {
			position: absolute;
	    right: .5rem;
	    top: 50%;
	    transform: translateY(-50%);
	    z-index: 2;
	    display: inline-block;
	    width: 2rem;
	    height: 2rem;
    opacity: 0.4;
    transition: opacity 0.2s ease-in-out;
    background-size: 70%;
    background-position: center 60%;
	    background-repeat: no-repeat;
	    background-image: url(/images/icon-eye.svg);
}

.profilname-suggestions{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.profilname-suggestion-btn{
	cursor: pointer;
	padding: .25rem .6rem;
	border: 1px solid var(--color-bg-300);
	background: var(--grid-bg);
	color: var(--content-text);
}
.profilname-suggestion-btn:hover,
.profilname-suggestion-btn:focus-visible{
	border-color: var(--color-bg-700);
	background: var(--white-bg-900);
}

/* === CSS: b-page-init.css [root] === */
html{
}

body{
	overflow-x: hidden;
	background-color: var(--footer-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif;
	color: var(--color);
	line-height: 138%;
}

h1.head, h2.head, h3.head, p.head, span.head, .head span, 
	.content h1, .content h2, .content h3, 
	.content h1 span, .content h2 span, .content h3 span{
		font-size: 2rem;
		line-height: 138%;
		word-spacing: -0.2rem;
		word-break: break-word;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		max-width: 40ch;
		text-shadow: 1px  1px 2px var(--white-100);
}
.head span, .head em{
	font-size: 2rem;
	font-weight: 100;
}
.head.color span{
	color: var(--dark);
}
p{
	max-width: 60ch;
}
i{
	color: var(--content-text);
	font-style: italic;
}
#page b{
	color: var(--content-text);
	font-weight: 500;
}
#page a{
	color: var(--content-text);
	text-decoration: underline;
}
#page a.no-underline{
	text-decoration: none;
}
#page button{
	cursor: pointer;
}
#page li {
	list-style: reset;
	margin-left: 1.5rem;
	margin-bottom: .5rem;
	max-width: 60ch;
}
#page p, #page li{
	color: var(--dark-100);
}
#page .center{
	text-align: center;
}

.flex-top{
	padding-bottom: 4rem;
}

#page{
	margin-top: 4rem;
	color: var(--content-text);
}

.grid-bg{
	background: var(--grid-bg);
	border-radius: .4rem;
}

.radius{
	border-radius: .4rem;
}
.inline{
	display: inline-block;
}

.head-wrap{
	display: grid;
	grid-template-columns: auto auto;
}

.background-start{
	position: absolute;
	z-index: -1;
	top: 0;
	width: 100vw;
	height: calc(100vh - 15rem);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(/images/backgrounds/bg1.webp);
	mask-image: gradient(linear, left 20%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
	-webkit-mask-image: -webkit-gradient(linear, left 20%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
	border-bottom: 1px solid red;
}

.border-glas-radius::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: .4rem;
  padding: 1px; 
  background:linear-gradient(120deg,var(--white-bg-600),#ffffff99); 
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude; 
}

.shadow{
	box-shadow: 0 0 10px -3px  var(--white-bg-500);
	backdrop-filter: blur(var(--blur));
	-webkit-backdrop-filter: blur(var(--blur));
}
.image-shadow{
	-webkit-filter: drop-shadow(1px 1px 2px var(--dark-bg-500)) drop-shadow(-1px -1px 2px var(--white-bg-500));
	filter: drop-shadow(1px 1px 2px var(--dark-bg-500)) drop-shadow(-1px -1px 2px var(--white-bg-500));
}

.start-spacing{
	margin: 0 0 2rem 1rem;
}


#page ul.account-nav {
	padding: 0;
	margin: -3.1rem 0 3rem 0;
}
#page ul.account-nav li{
	margin: 0;
	padding: 0;
	display: inline-block;
	float: left;
}
#page ul.account-nav a{
	padding: 1rem;
	color: var(--color);
	background-color: var(--white-900);
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
	text-decoration: none;
	margin: 0;
	box-shadow: inset 0 2px 4px -2px var(--dark-bg-900);
}
#page ul.account-nav a.active{
	background-color: var(--white-800);
	box-shadow: inset 0 2px 5px -1px var(--dark-bg-900);
}

.button.active, .nobutton.active{
	background-color: var(--color-100);
	box-shadow: 0 2px 5px -1px var(--dark-bg-900);
}

.label{
	position: relative;
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	font-size: .8rem;
	line-height: 1.1rem;
	text-align: center;
	border: 1px solid var(--color);
	border-radius: 1rem;
	transform: translateY(-.4rem);
}
.label.active{
	background-color: #e11;
	color: var(--white);
}

.bignavarea{	
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	display: none;
}

.form-wrap{
	
}
.form-two{
	display: flex;
	gap: 20%;
}

.status-indicator-number{
	background-color: var(--white-900);
	float: right;
	z-index: 2;
	width: 1.5rem;
	height: 1.5rem;
	font-size: 1rem;
	line-height: 1.2rem;
	padding: .2rem .1rem .2rem .3rem;
	text-align: center;
	border-radius: 50%;
	color: var(--dark-900);
}
.status-indicator-pfeil{
	position: relative;
}
.status-indicator-pfeil:after{
	content: "";
	position: absolute;
	z-index: 0;
	right: -.7rem;
	top: .3rem;
	transform: rotate(45deg);
	display: block;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: .4rem;
	background-color: var(--color-800);
}
.active.status-indicator-pfeil:after{
	background-color: var(--color-100);
}

/* Account: CTA "Öffentliches Profil erstellen" (Design only; enabled state is styled via .active) */
.account-public-profile-block{
	width: 100%;
}
.account-public-profile-grid{
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: stretch;
}
.account-public-profile-card{
	width: 100%;
	max-width: 19rem;
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .75rem .9rem;
	text-align: left;
	border-radius: .5rem;
}
.account-public-profile-thumb{
	flex: 0 0 auto;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: .5rem;
	display: grid;
	place-items: center;
	font-size: 1.5rem;
	line-height: 1;
	background: var(--white-bg-900);
	color: var(--dark-900);
	overflow: hidden;
}
.account-public-profile-card--existing{
	--public-card-radius: .5rem;
	--public-thumb-radius: .38rem;
	padding-left: .2rem;
	padding-top: .2rem;
	padding-bottom: .2rem;
	padding-right: .75rem;
	gap: .7rem;
	overflow: hidden;
	min-height: 3.35rem;
	border-radius: var(--public-card-radius);
}
.account-public-profile-card--existing .account-public-profile-thumb{
	width: 2.95rem;
	height: 2.95rem;
	min-height: 2.95rem;
	align-self: center;
	border-radius: var(--public-thumb-radius);
	background: transparent;
}
.account-public-profile-card--existing .account-public-profile-thumb img{
	border-radius: inherit;
}
.account-public-profile-card--existing .account-public-profile-title{
	padding-right: .25rem;
}
.account-public-profile-plus{
	display: block;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1;
	transform: translate(.04em, -.07em);
}
.account-public-profile-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.account-public-profile-title{
	display: flex;
	flex-direction: column;
	gap: .1rem;
}
.account-public-profile-title span{
	display: block;
	line-height: 1.1;
}
.account-public-profile-label{
	font-size: .78rem;
	font-weight: 500;
}
.account-public-profile-name{
	display: block;
	font-size: .96rem;
	font-weight: 700;
	line-height: 1.1;
}
.account-public-profile-create-btn:disabled{
	cursor: not-allowed;
	background-color: var(--white-800);
	color: var(--dark-100);
	box-shadow: none;
	opacity: .75;
}
.account-public-profile-create-btn:disabled .account-public-profile-thumb{
	background: var(--white-bg-800);
	color: var(--dark-100);
}
.account-public-profile-create-btn.locked{
	cursor: pointer; /* clickable, but visually "locked" */
	background-color: var(--white-800);
	color: var(--dark-100);
	box-shadow: none;
	opacity: .75;
}
.account-public-profile-create-btn.locked .account-public-profile-thumb{
	background: var(--white-bg-800);
	color: var(--dark-100);
}
.account-public-profile-create-btn.active{
	background-color: var(--color-100);
	color: var(--white);
	box-shadow: 0 2px 5px -1px var(--dark-bg-900);
}
.account-public-profile-create-btn.active .account-public-profile-thumb{
	background: rgba(255,255,255,.18);
	color: var(--white);
}

.notification-pref-table-wrap{
	overflow-x: auto;
}
.notification-pref-table{
	width: 100%;
	min-width: 56rem;
	border-collapse: collapse;
	border-spacing: 0;
}
.notification-pref-table th,
.notification-pref-table td{
	padding: .65rem .45rem;
	border-bottom: 1px solid var(--white-800);
	vertical-align: middle;
	text-align: center;
}
.notification-pref-table th{
	font-weight: 600;
	color: var(--content-text);
	background: var(--grid-bg);
	white-space: nowrap;
}
.notification-pref-table th:first-child{
	text-align: left;
}
.notification-pref-table td:first-child{
	text-align: left !important;
}
.notification-pref-table tbody tr:last-child td{
	border-bottom: none;
}
.notification-pref-type{
	min-width: 19rem;
	text-align: left;
}
.notification-pref-label{
	display: block;
	max-width: 42ch;
	color: var(--content-text);
	text-align: left;
}
.notification-mode-cell{
	min-width: 5.6rem;
}
.notification-mode-cell-empty{
	opacity: .25;
}
.notification-mode-switch{
	position: relative;
	display: inline-block;
	width: 22px;
	height: 22px;
}
.notification-mode-switch input[type="radio"]{
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.notification-mode-switch span{
	cursor: pointer;
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--white-500);
	background: var(--dark-bg-100);
	box-shadow: inset  1px 1px 2px var(--dark-900),
	            inset -1px -1px 2px var(--white-100);
	transition: background .2s ease, box-shadow .2s ease;
}
.notification-mode-switch span::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: var(--white-300);
	opacity: .65;
	box-shadow:  1px 1px 2px var(--dark-900),
	            -1px -1px 2px var(--white-100);
	transition: background .2s ease, box-shadow .2s ease;
}
.notification-mode-switch input[type="radio"]:checked + span{
	background: var(--color-bg-500);
	box-shadow: inset  1px 1px 2px var(--dark-700),
	            inset -1px -1px 2px var(--white-300);
}
.notification-mode-switch input[type="radio"]:checked + span::after{
	background: var(--color-800);
	opacity: 1;
	box-shadow:  1px 1px 2px var(--dark-900),
	            -1px -1px 2px var(--white-500);
}
.notification-pref-empty{
	margin-top: .6rem;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 60px solid #555555;
  border-right: 0;
}

.border-20{
	border: .2rem solid;
}
.border-30{
	border: .3rem solid;
}
.border-40{
	border: .4rem solid;
}
.border-50{
	border: .5rem solid;
}
.border-100{
	border: 1rem solid;
}
.border-200{
	border: 2rem solid;
}

.border-top-50{
	border-top: .5rem solid;
}
.border-top-100{
	border-top: 1rem solid;
}
.border-top-200{
	border-top: 2rem solid;
}

.border-right-50{
	border-right: .5rem solid;
}
.border-right-100{
	border-right: 1rem solid;
}
.border-right-200{
	border-right: 2rem solid;
}

.border-bottom-50{
	border-bottom: .5rem solid;
}
.border-bottom-100{
	border-bottom: 1rem solid;
}
.border-bottom-200{
	border-bottom: 2rem solid;
}

.border-left-50{
	border-left: .5rem solid;
}
.border-left-100{
	border-left: 1rem solid;
}
.border-left-200{
	border-left: 2rem solid;
}

.start-buttons{
	display:flex;
}

.hide, .darkmode_show{
	display: none;
}

@view-transition {
  navigation: auto;
}

/* === CSS: b-page-login.css [root] === */
.login-wrap{
	display: block;
	max-width: 34rem;
	margin: auto;
}
.login-flex{
	display: flex;
	justify-content: space-around;
	flex-flow: row;
	padding: 2rem;
}
.login-lock{
	width: 6rem;
	margin-left: 1rem;
}

.strength-meter {
  height: 10px;
  width: 100%;
  background-color: #e0e0e033;
  margin-top: 5px;
  border-radius: 3px;
}
.strength-meter-fill {
  height: 100%;
  width: 0;
  background-color: red;
  transition: width 0.3s ease;
}
.strength-meter-fill.weak { background-color: red; }
.strength-meter-fill.medium { background-color: orange; }
.strength-meter-fill.strong { background-color: green; }
.strength-text {
  margin-top: 5px;
  font-size: 0.9em;
  color: var(--akzent);
}
#verification{
	padding-left: 2.3rem;
	font-size: 2rem;
	letter-spacing: .5rem;
	font-family: monos-pace, sans-serif;
	background-image: linear-gradient(90deg,
    transparent 0%,
    transparent 3.6rem,
    var(--white-400) 3.7rem,
    transparent 3.8rem,
    transparent 5.2rem,
    var(--white-400) 5.3rem,
    transparent 5.4rem,
    transparent 6.8rem,
    var(--white-400) 6.9rem,
    transparent 7rem,
    transparent 8.4rem,
    var(--white-400) 8.5rem,
    transparent 8.6rem,
    transparent 10rem,
    var(--white-400) 10.1rem,
    transparent 10.2rem
  );
}
::placeholder{
	color: var(--white-100);
}

@media screen and (max-width: 600px), screen and (max-height: 600px)
{

.login-lock{
	display: none;
}
	
}

@media screen and (max-width: 500px), screen and (max-height: 500px)
{



}
/* === CSS: c-icons_buttons.css [root] === */

.icon-bg{
	background-repeat: no-repeat;
	background-size: 1rem;
	background-position: left center;
}
.icon-left{
	padding-left: 1.38rem;
}
.icon-right{
	padding-right: 1.38rem;
	background-position: right center;
}
nav .icon-left{
	background-position: 1.8rem center;
	padding-left: 3.5rem!important;
}
.icon-bg.home{
	background-image: url(/images/icon-home.svg);
}
.icon-bg.account{
	background-image: url(/images/icon-account.svg);
}
.icon-bg.account-new{
	background-image: url(/images/icon-account-new.svg);
}

.icon-bg.chef-de-partie{
	background-image: url(/images/icon-chef-de-partie.svg);
}
.icon-bg.chef{
	background-image: url(/images/icon-chef.svg);
}
.icon-bg.chef-head{
	background-image: url(/images/icon-chef-head.svg);
}
.icon-bg.chef-pizzaiolo{
	background-image: url(/images/icon-chef-pizzaiolo.svg);
}
.icon-bg.housekeeping{
	background-image: url(/images/icon-housekeeping.svg);
}
.icon-bg.server{
	background-image: url(/images/icon-server.svg);
}

.icon-bg.lock{
	background-image: url(/images/icon-lock.svg);
}
.icon-bg.mail{
	background-image: url(/images/icon-mail.svg);
}
.icon-bg.feed{
	background-image: url(/images/icon-feed.svg);
}
.icon-bg.message{
	background-image: url(/images/icon-message.svg);
}

.icon-bg.white{
	filter: grayscale(80%) brightness(350%);
}
.icon-bg.dark{
	filter: grayscale(100%) brightness(0%);
}

.head-logo{
	width: 4rem;
	transition: all .3s ease;
}
.logo-wrap{
	width: 4rem;
}

.button{
	cursor: pointer;
}
.button, .nobutton{
	padding: 0.5rem 1rem;
	border-radius: .4rem;
	background-color: var(--color-800);
	color: var(--white);
	transition: all .3s;
}
.nobutton-100{
	background-color: var(--color-300);
	border-width: 0;
}

.button:hover{
	border-color: transparent;
}
.button.minwidth{
	min-width: 15rem;
}
.button:active, .button:focus{
	opacity: 0.6;
}

.ui-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 2.3rem;
	padding: .5rem .9rem;
	border: 1px solid transparent;
	border-radius: .45rem;
	font-weight: 500;
	line-height: 1.15;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--btn-shadow);
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease, transform .08s ease;
}
.ui-btn:hover{
	text-decoration: none;
}
.ui-btn:active{
	transform: translateY(1px);
}
.ui-btn:focus-visible{
	outline: 2px solid var(--btn-focus-ring);
	outline-offset: 2px;
}
.ui-btn:focus{
	outline: none;
}

/* Button-Rollen systemweit:
 * primary/important = wichtigste Aktion
 * secondary/normal  = sekundäre Aktion
 * alert/danger      = kritische Aktion
 */
.ui-btn--important,
.ui-btn--primary{
	background: var(--btn-important-bg);
	border-color: var(--btn-important-bg-hover);
	color: var(--btn-important-text);
}
.ui-btn--important:hover,
.ui-btn--primary:hover{
	background: var(--btn-important-bg-hover);
}

.ui-btn--normal,
.ui-btn--secondary{
	background: var(--btn-normal-bg);
	border-color: var(--white-500);
	color: var(--btn-normal-text);
}
.ui-btn--normal:hover,
.ui-btn--secondary:hover{
	background: var(--btn-normal-bg-hover);
}

.ui-btn--danger,
.ui-btn--alert{
	background: var(--btn-danger-bg);
	border-color: var(--btn-danger-bg-hover);
	color: var(--btn-danger-text);
}
.ui-btn--danger:hover,
.ui-btn--alert:hover{
	background: var(--btn-danger-bg-hover);
}

.ui-btn[disabled],
.ui-btn[aria-disabled="true"],
.ui-btn.is-disabled{
	background: var(--btn-disabled-bg) !important;
	border-color: var(--btn-disabled-border) !important;
	color: var(--btn-disabled-text) !important;
	box-shadow: none;
	opacity: .75;
	cursor: not-allowed;
	transform: none;
	pointer-events: none;
}

.archive-guard-toggle-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.archive-guard-form{
	display: flex;
	justify-content: flex-end;
}

.archive-action-btn{
	min-width: 14rem;
}

.archive-action-btn.archive-action-btn--armed{
	box-shadow: 0 0 0 1px var(--btn-danger-bg-hover), var(--btn-shadow);
}

.archive-guard-note{
	max-width: 48rem;
}

@media (max-width: 700px){
	.archive-guard-toggle-row{
		align-items: flex-start;
	}

	.archive-guard-form{
		justify-content: flex-start;
	}
}

.status-line{
	position: absolute; 
	width: 80%; 
	height: 4px; 
	z-index: -1;
}

.call-to-action span{
	display: block;
}

.icon-cta{
	display: block;
	width: 2.2rem;
	height: 2.2rem;
	margin-left: 1rem;
	background-size: 2rem;
}

/* CTA icons: same subtle tint on primary/secondary, mode-dependent only. */
.ui-btn .icon-cta{
	filter: grayscale(100%) contrast(85%) brightness(38%) sepia(8%);
	opacity: .74;
}

@media (prefers-color-scheme: dark){
	.ui-btn .icon-cta{
		filter: grayscale(100%) contrast(90%) brightness(215%) sepia(8%);
		opacity: .7;
	}
}

.account-nav .icon-left{
	background-position: 1.2rem center;
	padding-left: 2.8rem!important;
}

/* Reusable subtle delete [x] button */
.btn-delete-soft{
	width: 2rem;
	min-width: 2rem;
	height: 2rem;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--white-500);
	border-radius: .45rem;
	background: var(--white-bg-900);
	color: #a34741;
	font-size: 1rem;
	line-height: 1;
	font-weight: 600;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease, transform .1s ease;
}
.btn-delete-soft:hover{
	background: var(--white-bg-700);
	border-color: #c7726c;
	color: #8e302b;
}
.btn-delete-soft:active{
	transform: translateY(1px);
}
.btn-delete-soft:focus-visible{
	outline: 2px solid var(--color-500);
	outline-offset: 2px;
}

/* === CSS: d-darkmode-colors.css [root] === */
.border-color-900{
	border-color: var(--color-bg-900);
}
.border-color-800{
	border-color: var(--color-bg-800);
}
.border-color-700{
	border-color: var(--color-bg-700);
}
.border-color-600{
	border-color: var(--color-bg-600);
}
.border-color-500{
	border-color: var(--color-bg-500);
}

.background{
	background-color: var(--background);
}
.bg{
	background: var(--white-bg);
}
.bg-900{
	background: var(--white-bg-900);
}
.bg-800{
	background: var(--white-bg-800);
}
.bg-700{
	background: var(--white-bg-700);
}
.bg-600{
	background: var(--white-bg-600);
}
.bg-500{
	background: var(--white-bg-500);
}

.color-bg-900{
	background: var(--color-bg-900);
}
.color-bg-800{
	background: var(--color-bg-800);
}
.color-bg-700{
	background: var(--color-bg-700);
}
.color-bg-600{
	background: var(--color-bg-600);
}
.color-bg-500{
	background: var(--color-bg-500);
}
.color-bg-400{
	background: var(--color-bg-400);
}
.color-bg-300{
	background: var(--color-bg-300);
}
.color-bg-200{
	background: var(--color-bg-200);
}
.color-bg-100{
	background: var(--color-bg-100);
}

.bg-900, .bg-800, .bg-700, .bg-600, .bg-500, .bg, 
.color-bg-100, .color-bg-200, .color-bg-300, .color-bg-400, 
.color-bg-500, .color-bg-600, .color-bg-700, .color-bg-800, .color-bg-900{
	backdrop-filter: blur(var(--blur));
	-webkit-backdrop-filter: blur(var(--blur));
}

.akzent-bg{
	background: var(--color-bg-800);
	color: var(--text);
}

/**/
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--background: #141414;
		--white:			#ebebeb;
		--color: 			#B3B2B2;
		--grid-bg: 		#14141466;
		--footer-bg: 	#0f0f0fee;
		--header-bg: 	#0d0d0daa;
		--header-bg-fixed: 	#0d0d0dee;
		--akzent: 		#ebebeb;
		color-scheme: dark;
	
		--content-text: var(--white);
		--button-border: var(--dark);
		--btn-shadow: 0 1px 3px #00000066;
		--btn-focus-ring: #a5b7e3;
			--btn-important-bg: #788ec0;
			--btn-important-bg-hover: #869bca;
			--btn-important-text: #101726;
			--btn-normal-bg: #3a404c;
			--btn-normal-bg-hover: #464e5c;
			--btn-normal-text: #dde4f2;
		--btn-danger-bg: #c85d57;
		--btn-danger-bg-hover: #b5514c;
		--btn-danger-text: #fff6f5;
		--btn-disabled-bg: #2f3440;
		--btn-disabled-border: #4a5262;
		--btn-disabled-text: #7f8798;
		--nav-hover: var(--dark-900);
		--burger:	var(--white);
	}
	:root:not([data-theme="light"]) #meny{
		box-shadow: 0 0 10px 0px  #000;
	}
	:root:not([data-theme="light"]) .nav li a.active{
		background-color: var(--nav-hover);
		color: var(--color);
		box-shadow: none;
	}
	:root:not([data-theme="light"]) #page p, 
	:root:not([data-theme="light"]) #page li{
		color: var(--white-300);
	}
	:root:not([data-theme="light"]) .bg{
		background: var(--dark-bg);
	}
	:root:not([data-theme="light"]) .bg-900{
		background: var(--dark-bg-900);
	}
	:root:not([data-theme="light"]) .bg-800{
		background: var(--dark-bg-800);
	}
	:root:not([data-theme="light"]) .bg-700{
		background: var(--dark-bg-700);
	}
	:root:not([data-theme="light"]) .bg-600{
		background: var(--dark-bg-600);
	}
	:root:not([data-theme="light"]) .bg-500{
		background: var(--dark-bg-500);
	}
	:root:not([data-theme="light"]) .background-hotel{
		background-image: url(/images/hotel-2-dark.webp);
		opacity: .7;
	}
	:root:not([data-theme="light"]) .border-glas-radius::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: .4rem;
		padding: 1px; 
		background:linear-gradient(120deg, #000000, var(--dark-500)); 
		-webkit-mask: 
			 linear-gradient(#fff 0 0) content-box, 
			 linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
						mask-composite: exclude;
	}
	:root:not([data-theme="light"]) .shadow{
		box-shadow: 0 0 10px -3px #000000;
	}
	:root:not([data-theme="light"]) input, 
	:root:not([data-theme="light"]) select, 
	:root:not([data-theme="light"]) textfield, 
	:root:not([data-theme="light"]) .input-style{
		color: var(--white);
		background: var(--grid-bg);
		box-shadow: inset -1px -1px 2px var(--color-500),
								inset  1px  1px 2px var(--dark),
											 0px  0px 8px 4px transparent;
	}
	:root:not([data-theme="light"]) input:focus, 
	:root:not([data-theme="light"]) textfield:focus{
		box-shadow: inset -1px -1px 2px var(--color-900),
								inset  1px  1px 2px var(--dark),
											 0px  0px 8px 4px var(--akzent);
	}
	:root:not([data-theme="light"]) .image-shadow{
		-webkit-filter: drop-shadow(1px 1px 2px var(--dark-900)) drop-shadow(-1px -1px 2px var(--dark-500));
		filter: drop-shadow(1px 1px 2px var(--dark-900)) drop-shadow(-1px -1px 2px var(--dark-500));
	}
	:root:not([data-theme="light"]) h1.head, 
	:root:not([data-theme="light"]) h2.head, 
	:root:not([data-theme="light"]) h3.head, 
	:root:not([data-theme="light"]) p.head, 
	:root:not([data-theme="light"]) span.head{
		text-shadow: 1px  1px 2px var(--dark);
	}
	
	:root:not([data-theme="light"]) #verification{
		background-image: linear-gradient(90deg,
			transparent 0%,
			transparent 3.6rem,
			var(--dark-400) 3.7rem,
			transparent 3.8rem,
			transparent 5.2rem,
			var(--dark-400) 5.3rem,
			transparent 5.4rem,
			transparent 6.8rem,
			var(--dark-400) 6.9rem,
			transparent 7rem,
			transparent 8.4rem,
			var(--dark-400) 8.5rem,
			transparent 8.6rem,
			transparent 10rem,
			var(--dark-400) 10.1rem,
			transparent 10.2rem
		);
	}
	:root:not([data-theme="light"]) #page ul.account-nav a{
		color: var(--color);
		background-color: var(--dark-900);
		box-shadow: inset 0 2px 4px -2px #000;
	}
	:root:not([data-theme="light"]) #page ul.account-nav a.active{
		background-color: var(--dark-700);
		box-shadow: inset 0 2px 5px -1px #000;
	}
	
	:root:not([data-theme="light"]) ::placeholder{
		color: var(--dark-100);
	}
	
	:root:not([data-theme="light"]) .darkmode_show{
		display: block;
	}
	:root:not([data-theme="light"]) .lightmode_show{
		display: none;
	}
	
	:root:not([data-theme="light"]) .head.color span{
		font-size: 2rem;
		color: var(--white-900);
	}
	
	:root:not([data-theme="light"]) .akzent-bg{
		background: var(--akzent);
		color: var(--dark);
	}
	:root:not([data-theme="light"]) .submit.akzent-bg{
		background: var(--akzent);
		color: var(--dark);
	}

	:root:not([data-theme="light"]) .btn-delete-soft{
		background: var(--dark-bg-800);
		border-color: var(--dark-bg-400);
		color: #ffaaa3;
	}
	:root:not([data-theme="light"]) .btn-delete-soft:hover{
		background: var(--dark-bg-700);
		border-color: #ff8f88;
		color: #ffd6d2;
	}
	
	:root:not([data-theme="light"]) label{
		text-align: left;
		white-space: nowrap;
		color: var(--white-800);
	}
	:root:not([data-theme="light"]) label i{
		color: var(--white-100);
	}
	
	:root:not([data-theme="light"]) .submit{
		background: var(--grid-bg);
		box-shadow: -1px -1px 2px var(--dark),
								 1px 1px 2px var(--dark-500);
	}

	:root:not([data-theme="light"]) .notification-pref-table th{
		color: var(--white);
		background: var(--dark-bg-700);
	}
	:root:not([data-theme="light"]) .notification-pref-table td{
		border-bottom-color: var(--dark-bg-300);
	}
	:root:not([data-theme="light"]) .notification-pref-label{
		color: var(--white-700);
	}
	:root:not([data-theme="light"]) .notification-mode-switch span{
		background: var(--dark-bg-700);
		border-color: var(--white-200);
		box-shadow: inset 1px 1px 2px #000000aa,
		            inset -1px -1px 2px var(--dark-500);
	}
	:root:not([data-theme="light"]) .notification-mode-switch span::after{
		background: var(--dark-100);
		opacity: .7;
		box-shadow: 1px 1px 2px #000000cc,
		            -1px -1px 2px var(--dark-300);
	}
	:root:not([data-theme="light"]) .notification-mode-switch input[type="radio"]:checked + span{
		background: var(--color-bg-400);
		border-color: var(--color-700);
	}
	:root:not([data-theme="light"]) .notification-mode-switch input[type="radio"]:checked + span::after{
		background: #f2f5ff;
		opacity: 1;
	}
	
	:root:not([data-theme="light"]) input:focus, 
	:root:not([data-theme="light"]) textfield:focus, 
	:root:not([data-theme="light"]) textarea:focus{
		box-shadow: inset -1px -1px 2px var(--dark-100),
								inset  1px  1px 2px var(--dark-600),
											 0px  0px 8px 4px var(--dark-100);
	}
	
	:root:not([data-theme="light"]) .label.active{
		background-color: #911;
		color: var(--text);
	}
}

:root[data-theme="dark"] {
	--background: #141414;
	--white:			#ebebeb;
	--color: 			#B3B2B2;
	--grid-bg: 		#14141466;
	--footer-bg: 	#0f0f0fee;
	--header-bg: 	#0d0d0daa;
	--header-bg-fixed: 	#0d0d0dee;
	--akzent: 		#ebebeb;
	color-scheme: dark;

	--content-text: var(--white);
	--button-border: var(--dark);
	--btn-shadow: 0 1px 3px #00000066;
	--btn-focus-ring: #a5b7e3;
		--btn-important-bg: #788ec0;
		--btn-important-bg-hover: #869bca;
		--btn-important-text: #101726;
		--btn-normal-bg: #3a404c;
		--btn-normal-bg-hover: #464e5c;
		--btn-normal-text: #dde4f2;
	--btn-danger-bg: #c85d57;
	--btn-danger-bg-hover: #b5514c;
	--btn-danger-text: #fff6f5;
	--btn-disabled-bg: #2f3440;
	--btn-disabled-border: #4a5262;
	--btn-disabled-text: #7f8798;
	--nav-hover: var(--dark-900);
	--burger:	var(--white);
}
:root[data-theme="dark"] #meny{
	box-shadow: 0 0 10px 0px  #000;
}
:root[data-theme="dark"] .nav li a.active{
	background-color: var(--nav-hover);
	color: var(--color);
	box-shadow: none;
}
:root[data-theme="dark"] #page p, 
:root[data-theme="dark"] #page li{
	color: var(--white-300);
}
:root[data-theme="dark"] .bg{
	background: var(--dark-bg);
}
:root[data-theme="dark"] .bg-900{
	background: var(--dark-bg-900);
}
:root[data-theme="dark"] .bg-800{
	background: var(--dark-bg-800);
}
:root[data-theme="dark"] .bg-700{
	background: var(--dark-bg-700);
}
:root[data-theme="dark"] .bg-600{
	background: var(--dark-bg-600);
}
:root[data-theme="dark"] .bg-500{
	background: var(--dark-bg-500);
}
:root[data-theme="dark"] .background-hotel{
	background-image: url(/images/hotel-2-dark.webp);
	opacity: .7;
}
:root[data-theme="dark"] .border-glas-radius::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: .4rem;
	padding: 1px; 
	background:linear-gradient(120deg, #000000, var(--dark-500)); 
	-webkit-mask: 
		 linear-gradient(#fff 0 0) content-box, 
		 linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
					mask-composite: exclude;
}
:root[data-theme="dark"] .shadow{
	box-shadow: 0 0 10px -3px #000000;
}
:root[data-theme="dark"] input, 
:root[data-theme="dark"] select, 
:root[data-theme="dark"] textfield, 
:root[data-theme="dark"] .input-style{
	color: var(--white);
	background: var(--grid-bg);
	box-shadow: inset -1px -1px 2px var(--color-500),
							inset  1px  1px 2px var(--dark),
										 0px  0px 8px 4px transparent;
}
:root[data-theme="dark"] input:focus, 
:root[data-theme="dark"] textfield:focus{
	box-shadow: inset -1px -1px 2px var(--color-900),
							inset  1px  1px 2px var(--dark),
										 0px  0px 8px 4px var(--akzent);
}
:root[data-theme="dark"] .image-shadow{
	-webkit-filter: drop-shadow(1px 1px 2px var(--dark-900)) drop-shadow(-1px -1px 2px var(--dark-500));
	filter: drop-shadow(1px 1px 2px var(--dark-900)) drop-shadow(-1px -1px 2px var(--dark-500));
}
:root[data-theme="dark"] h1.head, 
:root[data-theme="dark"] h2.head, 
:root[data-theme="dark"] h3.head, 
:root[data-theme="dark"] p.head, 
:root[data-theme="dark"] span.head{
	text-shadow: 1px  1px 2px var(--dark);
}

:root[data-theme="dark"] #verification{
	background-image: linear-gradient(90deg,
		transparent 0%,
		transparent 3.6rem,
		var(--dark-400) 3.7rem,
		transparent 3.8rem,
		transparent 5.2rem,
		var(--dark-400) 5.3rem,
		transparent 5.4rem,
		transparent 6.8rem,
		var(--dark-400) 6.9rem,
		transparent 7rem,
		transparent 8.4rem,
		var(--dark-400) 8.5rem,
		transparent 8.6rem,
		transparent 10rem,
		var(--dark-400) 10.1rem,
		transparent 10.2rem
	);
}
:root[data-theme="dark"] #page ul.account-nav a{
	color: var(--color);
	background-color: var(--dark-900);
	box-shadow: inset 0 2px 4px -2px #000;
}
:root[data-theme="dark"] #page ul.account-nav a.active{
	background-color: var(--dark-700);
	box-shadow: inset 0 2px 5px -1px #000;
}

:root[data-theme="dark"] ::placeholder{
	color: var(--dark-100);
}

:root[data-theme="dark"] .darkmode_show{
	display: block;
}
:root[data-theme="dark"] .lightmode_show{
	display: none;
}

:root[data-theme="dark"] .head.color span{
	font-size: 2rem;
	color: var(--white-900);
}

:root[data-theme="dark"] .akzent-bg{
	background: var(--akzent);
	color: var(--dark);
}
:root[data-theme="dark"] .submit.akzent-bg{
	background: var(--akzent);
	color: var(--dark);
}

:root[data-theme="dark"] .btn-delete-soft{
	background: var(--dark-bg-800);
	border-color: var(--dark-bg-400);
	color: #ffaaa3;
}
:root[data-theme="dark"] .btn-delete-soft:hover{
	background: var(--dark-bg-700);
	border-color: #ff8f88;
	color: #ffd6d2;
}

:root[data-theme="dark"] label{
	text-align: left;
	white-space: nowrap;
	color: var(--white-800);
}
:root[data-theme="dark"] label i{
	color: var(--white-100);
}

:root[data-theme="dark"] .submit{
	background: var(--grid-bg);
	box-shadow: -1px -1px 2px var(--dark),
							 1px 1px 2px var(--dark-500);
}

:root[data-theme="dark"] .notification-pref-table th{
	color: var(--white);
	background: var(--dark-bg-700);
}
:root[data-theme="dark"] .notification-pref-table td{
	border-bottom-color: var(--dark-bg-300);
}
:root[data-theme="dark"] .notification-pref-label{
	color: var(--white-700);
}
:root[data-theme="dark"] .notification-mode-switch span{
	background: var(--dark-bg-700);
	border-color: var(--white-200);
	box-shadow: inset 1px 1px 2px #000000aa,
	            inset -1px -1px 2px var(--dark-500);
}
:root[data-theme="dark"] .notification-mode-switch span::after{
	background: var(--dark-100);
	opacity: .7;
	box-shadow: 1px 1px 2px #000000cc,
	            -1px -1px 2px var(--dark-300);
}
:root[data-theme="dark"] .notification-mode-switch input[type="radio"]:checked + span{
	background: var(--color-bg-400);
	border-color: var(--color-700);
}
:root[data-theme="dark"] .notification-mode-switch input[type="radio"]:checked + span::after{
	background: #f2f5ff;
	opacity: 1;
}

:root[data-theme="dark"] input:focus, 
:root[data-theme="dark"] textfield:focus, 
:root[data-theme="dark"] textarea:focus{
	box-shadow: inset -1px -1px 2px var(--dark-100),
							inset  1px  1px 2px var(--dark-600),
										 0px  0px 8px 4px var(--dark-100);
}

:root[data-theme="dark"] .label.active{
	background-color: #911;
	color: var(--text);
}
/**/

/*
@media (prefers-color-scheme: dark) {
	.button-cta:after {
		background: linear-gradient(60deg, var(--color), var(--white-900), var(--akzent));
	}
}
*/

*::selection {
	background-color: var(--color-900);
}

.akzent{
	color: var(--akzent);
}

.color-bg{
	background: var(--color);
}
.color{
	color: var(--color);
}

input.validate:valid, textarea.validate:valid {
	border-width: 2px;
	border-style: solid;
	border-color: var(--akzent-valid);
}

input.validate:invalid, textarea.validate:invalid {
	border-width: 2px;
	border-style: solid;
	border-color: var(--color);
}

input.validate:placeholder-shown, textarea.validate:placeholder-shown {
  border: 2px solid var(--color);
}

/* === CSS: d-theme-switch.css [root] === */
/* Theme toggle strip in navigation */
:root{
	color-scheme: light;
}
:root[data-theme="light"]{
	color-scheme: light;
}

.nav__theme{
	padding: .4rem 1.4rem 1rem;
}

.theme-switch{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .35rem;
	padding: .4rem;
	border: 1px solid var(--white-700);
	margin: 0;
	border-radius: .9rem;
	background: var(--white-bg);
	backdrop-filter: blur(var(--blur));
	box-shadow: 0 0 18px -12px var(--dark);
	min-width: 13rem;
}

.theme-switch__option{
	position: relative;
	display: block;
	border-radius: .7rem;
	overflow: hidden;
	background: var(--white-bg-900);
	border: 1px solid transparent;
	transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.theme-switch__option input{
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.theme-switch__label{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	padding: .45rem .4rem;
	color: var(--color);
	font-weight: 600;
	line-height: 1.1;
	text-transform: none;
	background: transparent;
	transition: inherit;
}

.theme-switch__option:hover .theme-switch__label{
	background: var(--nav-hover);
}

.theme-switch__option input:checked + .theme-switch__label{
	background: linear-gradient(135deg, var(--color-bg-400), var(--color-bg-500));
	color: var(--dark);
	border-color: var(--color-700);
	box-shadow: 0 0 0 1px var(--color-600) inset, 0 10px 18px -14px var(--dark);
}

.theme-switch__option input:focus-visible + .theme-switch__label{
	outline: 2px solid var(--btn-focus-ring);
	outline-offset: 2px;
}

.theme-switch__option input:checked + .theme-switch__label,
.theme-switch__option:hover .theme-switch__label{
	transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.sr-only{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]) .theme-switch{
		background: var(--dark-bg-800);
		border-color: var(--dark-bg-300);
		box-shadow: 0 0 18px -12px #000;
	}
	:root:not([data-theme="light"]) .theme-switch__option{
		background: var(--dark-bg-700);
	}
	:root:not([data-theme="light"]) .theme-switch__label{
		color: var(--white);
	}
	:root:not([data-theme="light"]) .theme-switch__option input:checked + .theme-switch__label{
		color: var(--dark);
	}
}

:root[data-theme="dark"] .theme-switch{
	background: var(--dark-bg-800);
	border-color: var(--dark-bg-300);
	box-shadow: 0 0 18px -12px #000;
}
:root[data-theme="dark"] .theme-switch__option{
	background: var(--dark-bg-700);
}
:root[data-theme="dark"] .theme-switch__label{
	color: var(--white);
}
:root[data-theme="dark"] .theme-switch__option input:checked + .theme-switch__label{
	color: var(--dark);
}

@media(max-width: 680px){
	.nav__theme{
		padding: .5rem 1rem 1.4rem;
	}
	.theme-switch{
		min-width: auto;
	}
}

/* === CSS: e-navigation.css [root] === */
/* navigation */
.page-wrap{
	display: grid;
	grid-template-rows: auto auto;
  min-height: 100svh;
  background-color: var(--background);
  position: relative;
  z-index: 2;
}

.nav-wrap{
	position: relative;
}
.nav{
	position: absolute;
	right: 0;
	border-radius: .4rem;
	padding: 4rem 0 1rem 0;
	background-color: var(--background);
	box-shadow: 0 0 20px -10px  var(--dark);
}
.nav li a{
	display: block;
	padding: .5rem 2rem;
	color: var(--color);
	white-space: nowrap;
	transition: all .3s;
}
.nav li a:hover{
	background-color: var(--nav-hover);
}
.nav li a.active{
	background-color: var(--nav-hover);
	color: var(--color);
	box-shadow: none;
}
.nav-profile-selector{
	list-style: none;
	position: relative;
}
.nav-profile-selector__details{
	position: relative;
	display: block;
}
.nav-profile-selector__summary{
	list-style: none;
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .5rem 2.6rem .5rem 2rem;
	color: var(--color);
	cursor: pointer;
	user-select: none;
	position: relative;
	transition: background-color .2s ease;
}
.nav-profile-selector__summary:hover{
	background-color: var(--nav-hover);
}
.nav-profile-selector__summary::-webkit-details-marker{
	display: none;
}
.nav-profile-selector__summary::marker{
	content: "";
}
.nav-profile-selector__summary::after{
	content: "";
	position: absolute;
	right: 2rem;
	top: calc(50% - 5px);
	width: .5rem;
	height: .5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	transition: transform .18s ease;
}
.nav-profile-selector__details[open] .nav-profile-selector__summary::after{
	transform: translateY(-50%) rotate(-135deg);
}
.nav-profile-selector__avatar,
.nav-profile-selector__option-avatar{
	position: relative;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: .35rem;
	overflow: hidden;
	flex: 0 0 1.6rem;
	background: var(--white-bg-900);
}
.nav-profile-selector__avatar img,
.nav-profile-selector__option-avatar img{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.nav-profile-selector__text{
	display: grid;
	gap: .1rem;
	min-width: 0;
}
.nav-profile-selector__meta{
	font-size: .72rem;
	opacity: .72;
	line-height: 1.1;
}
.nav-profile-selector__title{
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 14rem;
	font-weight: 600;
}
.nav-profile-selector__options{
	margin: 0;
	padding: 0 0 .25rem;
	list-style: none;
	background-color: var(--background);
	border-radius: .5rem;
	box-shadow: 0 0 20px -8px var(--dark);
	position: absolute;
	left: 0;
	right: auto;
	top: calc(100% + .25rem);
	width: max-content;
	min-width: 100%;
	max-width: min(22rem, calc(100vw - 2rem));
	z-index: 8;
	padding: .25rem 0;
	display: none;
}
.nav-profile-selector__details.nav-profile-selector__details--align-right > .nav-profile-selector__options{
	left: auto;
	right: 0;
}
.nav-profile-selector__option-item{
	margin: 0;
	padding: 0;
}
.nav-profile-selector__option{
	appearance: none;
	width: 100%;
	border: 0;
	background: transparent;
	color: var(--color);
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .45rem 2rem .45rem 2.8rem;
	text-align: left;
	cursor: pointer;
}
.nav-profile-selector__option:hover{
	background-color: var(--nav-hover);
}
.nav-profile-selector__option.is-active{
	background-color: var(--nav-hover);
}
.nav-profile-selector__option.is-disabled{
	opacity: .82;
	cursor: not-allowed;
}
.nav-profile-selector__option.is-disabled:hover{
	background-color: transparent;
}
.nav-profile-selector__option-text{
	display: grid;
	gap: .06rem;
	min-width: 0;
}
.nav-profile-selector__empty{
	display: block;
	padding: .45rem 2rem .45rem 2.8rem;
	opacity: .7;
}
.nav-profile-selector__option-title{
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nav-profile-selector__option-meta{
	font-size: .58rem;
	opacity: .7;
	line-height: 1.15;
	letter-spacing: .01em;
}
.nav-profile-selector__details[open] > .nav-profile-selector__options{
	display: block;
}
@media (hover: hover){
	.nav-profile-selector__details:hover > .nav-profile-selector__options,
	.nav-profile-selector__details:focus-within > .nav-profile-selector__options{
		display: block;
	}
}

.burger-wrapper {
  cursor: pointer;
}

#meny {
    transition-timing-function: cubic-bezier(10,2,3,1);
    transform: translateY(-50rem);
    top: 0;
    right: 1.5rem;
    z-index: 0;
    transition: 0.5s;
}
#menyAvPaa {
    display: none;
}

#menyAvPaa:checked ~ #meny, .burger-wrapper ~ #meny{
    transform: translateY(1rem);
}

#menyAvPaa:checked ~ .bignavarea {
  display: block;
}


.fixed #burger {
	--burger-size: 1.6rem;
	--bun: calc(var(--burger-size) / 16);
	--offset: calc(var(--burger-size) / 2.15);
	--offset-minus: calc(var(--offset) - var(--offset) * 2);
}

#burger {
    position: absolute;
    cursor: pointer;
    width: var(--burger-size);
    height: var(--burger-size);
    right: 2.5rem;
    top: 2rem;
    display: flex;
    z-index: 2;
    justify-content: space-between;
    flex-direction: column;
    transition: all .3s;
}

#burger > div {
    height: var(--bun);
    border-radius: var(--bun);
    background-color: var(--burger);
    transition: 0.5s;
    z-index: 999;
}

#menyAvPaa:checked ~ #burger > div {
  background-color: var(--color);
}

#menyAvPaa:checked ~ #burger > div:nth-child(1) {
    transform: translateY(var(--offset)) rotate(45deg);
}
#menyAvPaa:checked ~ #burger > div:nth-child(2) {
    opacity: 0;
}
#menyAvPaa:checked ~ #burger > div:nth-child(3) {
    transform: translateY(var(--offset-minus)) rotate(-45deg);
}

.header{
	position: relative;
	border-bottom-left-radius: .4rem;
	border-bottom-right-radius: .4rem;
	background-color: var(--header-bg);
	color: var(--white);
	padding: 1rem 0;
	box-shadow: 0 0 20px -5px  var(--dark);
	backdrop-filter: blur(var(--blur));
	-webkit-backdrop-filter: blur(var(--blur));
	transition: all .3s ease;
}
.header-wrapper{
	position: sticky;
	z-index: 9;
	top: 0;
	width: 100%;
	transition: all 1s;
}
.header-wrapper.fixed{
 	position: fixed;
}
.header-wrapper.fixed .head-logo{
	width: 2rem;
	margin-top: .3rem;
}
.header-wrapper.fixed .header{
	padding: .2rem 0;
}
.header-wrapper.fixed #burger{
	top: .9rem;
}
.header-wrapper.fixed #menyAvPaa:checked ~ #meny, .burger-wrapper ~ #meny{
	transform: translateY(.2rem);
}
.header-wrapper.fixed .header{
	background-color: var(--header-bg-fixed);
}

.flex-top{
	padding-bottom: 4rem
}
.footer{
	height: max-content;
	align-self: end;
/*
	border-top-left-radius: .4rem;
	border-top-right-radius: .4rem;
*/
	background-color: var(--footer-bg);
	color: var(--white-500);
	padding: 2rem 0;
/*	
	box-shadow: 0 0 20px -5px  var(--dark);
*/
	box-shadow: inset 0 5px 10px -5px #000000; 
}
.footer a, .header a{
	color: var(--white-500);
	transition: all .3s;
}
.footer a:hover{
	color: var(--color);
}

.footer-wrap{
	justify-content: space-between;
	display: flex;
}

small, small a{
	font-size: .8rem;
}

/* === CSS: f-images.css [root] === */
.thumbnail img{
	width: 8rem;
}

.profilpreview {
  width: 16rem;
  height: 16rem;
  position: relative;
  overflow: hidden;
}
.backgroundpreview{
	position: relative;
  overflow: hidden;
  aspect-ratio: 3/1;
}
.profilpreview img, .backgroundpreview img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
.profilpreview img{
	#border-radius: 50%;
}
.drag-overlay {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: none;
  outline: none;
}
.drag-overlay.dragging { cursor: grabbing; }

.profilpreview {
  width: 16rem; height: 16rem; position: relative; overflow: hidden;
}
.profilpreview img{
  width: 100%; height: 100%; object-fit: cover;
  user-select: none; pointer-events: none;
  will-change: transform;
  /* transform + origin werden per JS gesetzt */
}
.drag-overlay{ position:absolute; inset:0; cursor:grab; touch-action:none; outline:none; }
.drag-overlay.dragging{ cursor:grabbing; }

/* kleine Zoom-Buttons */
/* Fader-Container rechts, vertikal */
.zoom-fader{
  position:absolute;
  right:.5rem; top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  z-index:2; user-select:none;
}

/* Readout */
.zoom-readout{
  font-size:.8rem; line-height:1; opacity:.85;
}

/* Vertikaler Slider (wir drehen einen normalen Input) */
.zoom-fader input[type="range"]{
  appearance:none;
  width: 10rem; /* Breite bevor Rotation */
  height: 1.25rem;
  transform: rotate(-90deg);
}

/* Track */
.zoom-fader input[type="range"]::-webkit-slider-runnable-track{
  height: .25rem;
  background: currentColor;
  opacity:.4; border-radius:999px;
}
.zoom-fader input[type="range"]::-moz-range-track{
  height: .25rem;
  background: currentColor;
  opacity:.4; border-radius:999px;
}

/* Thumb */
.zoom-fader input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  width: .9rem; height: .9rem; border-radius:999px;
  background: currentColor;
  margin-top: calc(-.9rem/2 + .125rem); /* zentrieren */
}
.zoom-fader input[type="range"]::-moz-range-thumb{
  width: .9rem; height: .9rem; border-radius:999px;
  background: currentColor; border: none;
}

/* Optional: horizontale Variante */
.zoom-fader{ right:auto; left:50%; top:auto; bottom:.5rem; transform:translateX(-50%); }
.zoom-fader input[type="range"]{ transform:none; width:12rem; }

.upload-min-width{
	min-width: 15rem;
}
.upload-bg-min-width{
	min-width: 18rem;
}

button.rot-left, button.rot-right {
	width: 1.5rem;
	height: 1.5rem;
	font-size: 1.5rem;
	padding: 0;
	display: grid;
	justify-content: center;
	align-content: center;
	border-radius: .2rem;
	background-color: var(--white-bg-500);
}

.avatar-picker .avatar-btn{
	padding: 0;
	border: 0;
	background: transparent;
	line-height: 0;
	border-radius: .5rem;
	overflow: hidden;
}

.avatar-picker button img{
	margin-bottom: 0;
	display: block;
	border-radius: .35rem;
}

.avatar-picker .avatar-btn:focus-visible{
	outline: 2px solid var(--akzent);
	outline-offset: 2px;
}

/* === CSS: f-sizes.css [root] === */
/* spaceing */

.pad-400{
	padding: 4rem
}
.pad-300{
	padding: 3rem
}
.pad-200{
	padding: 2rem
}
.pad-100{
	padding: 1rem
}
.pad-50{
	padding: .5rem
}
.pad-25{
	padding: .25rem
}
.pad-20{
	padding: .2rem
}
.pad-10{
	padding: .1rem
}

.pad-top-400{
	padding-top: 4rem
}
.pad-top-300{
	padding-top: 3rem
}
.pad-top-200{
	padding-top: 2rem
}
.pad-top-100{
	padding-top: 1rem
}
.pad-top-50{
	padding-top: .5rem
}
.pad-top-25{
	padding-top: .25rem
}
.pad-top-20{
	padding-top: .2rem
}
.pad-top-10{
	padding-top: .1rem
}

.pad-left-400{
	padding-left: 4rem
}
.pad-left-300{
	padding-left: 3rem
}
.pad-left-200{
	padding-left: 2rem
}
.pad-left-100{
	padding-left: 1rem
}
.pad-left-50{
	padding-left: .5rem
}
.pad-left-25{
	padding-left: .25rem
}
.pad-left-20{
	padding-left: .2rem
}
.pad-left-10{
	padding-left: .1rem
}

.pad-right-400{
	padding-right: 4rem
}
.pad-right-300{
	padding-right: 3rem
}
.pad-right-200{
	padding-right: 2rem
}
.pad-right-100{
	padding-right: 1rem
}
.pad-right-50{
	padding-right: .5rem
}
.pad-right-25{
	padding-right: .25rem
}
.pad-right-20{
	padding-right: .2rem
}
.pad-right-10{
	padding-right: .1rem
}

.pad-bottom-400{
	padding-bottom: 4rem
}
.pad-bottom-300{
	padding-bottom: 3rem
}
.pad-bottom-200{
	padding-bottom: 2rem
}
.pad-bottom-100{
	padding-bottom: 1rem
}
.pad-bottom-50{
	padding-bottom: .5rem
}
.pad-bottom-25{
	padding-bottom: .25rem
}
.pad-bottom-20{
	padding-bottom: .2rem
}
.pad-bottom-10{
	padding-bottom: .1rem
}

.marg-400{
	margin: 4rem
}
.marg-300{
	margin: 3rem
}
.marg-200{
	margin: 2rem
}
.marg-100{
	margin: 1rem
}
.marg-50{
	margin: .5rem
}
.marg-25{
	margin: .25rem
}
.marg-20{
	margin: .2rem
}
.marg-10{
	margin: .1rem
}

.marg-top-400{
	margin-top: 4rem
}
.marg-top-300{
	margin-top: 3rem
}
.marg-top-200{
	margin-top: 2rem
}
.marg-top-100{
	margin-top: 1rem
}
.marg-top-50{
	margin-top: .5rem
}
.marg-top-25{
	margin-top: .25rem
}
.marg-top-20{
	margin-top: .2rem
}
.marg-top-10{
	margin-top: .1rem
}

.marg-left-400{
	margin-left: 4rem
}
.marg-left-300{
	margin-left: 3rem
}
.marg-left-200{
	margin-left: 2rem
}
.marg-left-100{
	margin-left: 1rem
}
.marg-left-50{
	margin-left: .5rem
}
.marg-left-25{
	margin-left: .25rem
}
.marg-left-20{
	margin-left: .2rem
}
.marg-left-10{
	margin-left: .1rem
}

.marg-right-400{
	margin-right: 4rem
}
.marg-right-300{
	margin-right: 3rem
}
.marg-right-200{
	margin-right: 2rem
}
.marg-right-100{
	margin-right: 1rem
}
.marg-right-50{
	margin-right: .5rem
}
.marg-right-25{
	margin-right: .25rem
}
.marg-right-20{
	margin-right: .2rem
}
.marg-right-10{
	margin-right: .1rem
}

.marg-bottom-400{
	margin-bottom: 4rem
}
.marg-bottom-300{
	margin-bottom: 3rem
}
.marg-bottom-200{
	margin-bottom: 2rem
}
.marg-bottom-100{
	margin-bottom: 1rem
}
.marg-bottom-50{
	margin-bottom: .5rem
}
.marg-bottom-25{
	margin-bottom: .25rem
}
.marg-bottom-20{
	margin-bottom: .2rem
}
.marg-bottom-10{
	margin-bottom: .1rem
}

/* sizeing */

.max-width-10{
	max-width: .1rem;
}
.max-width-20{
	max-width: .2rem;
}
.max-width-25{
	max-width: .25rem;
}
.max-width-50{
	max-width: .5rem;
}
.max-width-100{
	max-width: 1rem;
}
.max-width-200{
	max-width: 2rem;
}
.max-width-300{
	max-width: 3rem;
}
.max-width-400{
	max-width: 4rem;
}
.max-width-500{
	max-width: 5rem;
}
.max-width-600{
	max-width: 6rem;
}
.max-width-700{
	max-width: 7rem;
}
.max-width-800{
	max-width: 8rem;
}

.width-10{
	width: .1rem;
}
.width-20{
	width: .2rem;
}
.width-25{
	width: .25rem;
}
.width-50{
	width: .5rem;
}
.width-100{
	width: 1rem;
}
.width-200{
	width: 2rem;
}
.width-300{
	width: 3rem;
}
.width-400{
	width: 4rem;
}
.width-500{
	width: 5rem;
}
.width-600{
	width: 6rem;
}
.width-700{
	width: 7rem;
}
.width-800{
	width: 8rem;
}

/* flex helpers */

.wrap-flex, .wrap-flex-head{
	display: flex;
}
.wrap-flex-inline, wrap-inline-flex{
	display: inline-flex;
}
.wrap-gap{
	gap: 1rem;
}
.wrap-space-evenly{
	justify-content: space-evenly;
}
.wrap-space-around{
	justify-content: space-around;
}
.wrap-space-between{
	justify-content: space-between;
}
.wrap-space-center{
	align-items: center;
  justify-content: center;
}
.wrap-items-wrap{
	flex-wrap: wrap;
}
.wrap-items-center{
	justify-content: center;
}

.flex-dir-col{
	flex-direction: column;
}

.flex-width-100{
	flex-basis: 100%;
}
.flex-width-90{
	flex-basis: 90%;
}
.flex-width-80{
	flex-basis: 80%;
}
.flex-width-70{
	flex-basis: 70%;
}
.flex-width-60{
	flex-basis: 60%;
}
.flex-width-50{
	flex-basis: 50%;
}
.flex-width-40{
	flex-basis: 40%;
}
.flex-width-30{
	flex-basis: 30%;
}
.flex-width-20{
	flex-basis: 20%;
}
.flex-width-10{
	flex-basis: 10%;
}
.flex-width-5{
	flex-basis: 5%;
}

.wrap-content-2 div{
	width: calc((100% - 1rem) / 2);
}
.wrap-content-3 div{
	width: calc((100% - 1rem) / 3);
}
.wrap-content-4 div{
	width: calc((100% - 1rem) / 4);
}
.wrap-content-5 div{
	width: calc((100% - 1rem) / 5);
}
.wrap-content-6 div{
	width: calc((100% - 1rem) / 6);
}
.wrap-content-7 div{
	width: calc((100% - 1rem) / 7);
}
/* === CSS: h-animation.css [root] === */
/* loading anim */

.htmx-indicator {
	display:none;
}

.htmx-request {
  display:block;
}

#loader.htmx-indicator {
	display:none;
}
#loader.htmx-request {
  display:block;
  animation: load 12s linear 1;
}

#loader {
	display:block;
	position: fixed;
	z-index: 99;
	left: 0;
	top: 0;
	margin: 0;
	width: 0;
	background: var(--akzent);
	height: 3px;
	/**
 	opacity: 1; 
 	animation: load 8s linear 1; 
 	/**/
}
@keyframes load {
  0% { width: 0; }
  5% { width: 10; }
  30% { width: 90%; }
  100% { width: 100%; }
}

.button-cta {
  --borderWidth: 5px;
  position: relative;
  border-radius: var(--borderWidth);
}
.button-cta:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, var(--color), var(--white), var(--akzent));
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  
  background-size: 300% 300%;
}
.button-cta:hover:after {
	animation: animatedgradient 3s ease alternate infinite;
}

@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.fadeIn{
	display: block;
	animation: fadeInAnim .3s forwards;
}
@keyframes fadeInAnim {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fadeOut{
	display: block;
	animation: fadeOutAnim .3s forwards;
}
@keyframes fadeOutAnim {
	0% {
		opacity: 1;
	}
	99% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		display: none;
	}
}
/* === CSS: i-mobile.css [root] === */
@media(max-width: 1040px){
	#page ul.account-nav{
		margin-top: -4rem;
		line-height: 3rem;
	}
	.mobile-no-1040{
		display: none;
	}
	.form-two{
		display: flex;
		gap: 10%;
	}
}
@media(max-width: 880px){
	.form-two{
		display: block;
	}
	#page ul.account-nav{
		margin-top: -2rem;
	}
	h3.head{
		font-size: 1rem;
		padding-right: 3rem;
	}
	.content-grid .breakout.content-grid{
		padding: 1rem 0;
	}
	#meny {
		right: 0;
	}
	#burger {
		right: 2rem;
	}
	#page {
		margin-top: 2rem;
	}
	.footer-wrap{
		display: block;
	}
	.metanav{
		margin: 1rem 0;
	}
	.mobile-un-wrap{
		display: block;
	}
	.mobile-no-880{
		display: none;
	}
		
	.wrap-flex.wrap-space-evenly,
	.wrap-flex.wrap-space-around,
	.wrap-flex.wrap-space-between,
	.wrap-flex.wrap-space-center {
		flex-direction: column;
		align-items: stretch;
	}
	
	.wrap-flex.wrap-space-evenly,
	.wrap-flex.wrap-space-around,
	.wrap-flex.wrap-space-between,
	.wrap-flex.wrap-space-center{
		width: 100%;
	}
	.notification-pref-table{
		min-width: 50rem;
	}
	.notification-pref-type{
		min-width: 13rem;
	}
	.notification-pref-label{
		max-width: 26ch;
	}
	.notification-mode-cell{
		min-width: 4.2rem;
	}
	.notification-mode-switch,
	.notification-mode-switch span{
		width: 20px;
		height: 20px;
	}
	.notification-mode-switch span::after{
		width: 12px;
		height: 12px;
	}

}
@media(max-width: 680px){
	#page ul.account-nav, .mobile-no-680{
		display: none;
	}
}
@media screen and (max-width: 500px), screen and (max-height: 500px)
{
	textarea.wider{
		width: 14rem;
	}
	.start-buttons{
		display:block;
	}
	.background-hotel{
		background-position: right -11rem top 0;
	}
	.nav{
		width: 100%;
		min-height: 50svh;
	}
	.call-to-action span{
		display: inline;
	}
	.button-cta{
		margin-left: 0;
		width: 100%;
		text-align: center;
		min-width: 13.5rem;
	}
	.icon-cta{
		position: absolute;
		right: 1rem;
	}
	.icon-cta{
		display: inline;
		width: 1rem;
		height: 1rem;
		background-size: 1rem;
	}
	.container table td{
		display: block;
	}
	.container table tr td:first-child{
		padding-top: .5rem;
	}
	label{
		white-space: wrap;
	}
	.head-wrap .head em, .mobile-no-500{
		display: none;
	}
}

/* === CSS: k-sizes-mobile.css [root] === */
/* spaceing */
@media screen and (max-width: 500px), screen and (max-height: 500px)
{

.mobile-pad-400{
	padding: 4rem
}
.mobile-pad-300{
	padding: 3rem
}
.mobile-pad-200{
	padding: 2rem
}
.mobile-pad-100{
	padding: 1rem
}
.mobile-pad-50{
	padding: .5rem
}
.mobile-pad-25{
	padding: .25rem
}
.mobile-pad-20{
	padding: .2rem
}
.mobile-pad-10{
	padding: .1rem
}

.mobile-pad-top-400{
	padding-top: 4rem
}
.mobile-pad-top-300{
	padding-top: 3rem
}
.mobile-pad-top-200{
	padding-top: 2rem
}
.mobile-pad-top-100{
	padding-top: 1rem
}
.mobile-pad-top-50{
	padding-top: .5rem
}
.mobile-pad-top-25{
	padding-top: .25rem
}
.mobile-pad-top-20{
	padding-top: .2rem
}
.mobile-pad-top-10{
	padding-top: .1rem
}

.mobile-pad-left-400{
	padding-left: 4rem
}
.mobile-pad-left-300{
	padding-left: 3rem
}
.mobile-pad-left-200{
	padding-left: 2rem
}
.mobile-pad-left-100{
	padding-left: 1rem
}
.mobile-pad-left-50{
	padding-left: .5rem
}
.mobile-pad-left-25{
	padding-left: .25rem
}
.mobile-pad-left-20{
	padding-left: .2rem
}
.mobile-pad-left-10{
	padding-left: .1rem
}

.mobile-pad-right-400{
	padding-right: 4rem
}
.mobile-pad-right-300{
	padding-right: 3rem
}
.mobile-pad-right-200{
	padding-right: 2rem
}
.mobile-pad-right-100{
	padding-right: 1rem
}
.mobile-pad-right-50{
	padding-right: .5rem
}
.mobile-pad-right-25{
	padding-right: .25rem
}
.mobile-pad-right-20{
	padding-right: .2rem
}
.mobile-pad-right-10{
	padding-right: .1rem
}

.mobile-pad-bottom-400{
	padding-bottom: 4rem
}
.mobile-pad-bottom-300{
	padding-bottom: 3rem
}
.mobile-pad-bottom-200{
	padding-bottom: 2rem
}
.mobile-pad-bottom-100{
	padding-bottom: 1rem
}
.mobile-pad-bottom-50{
	padding-bottom: .5rem
}
.mobile-pad-bottom-25{
	padding-bottom: .25rem
}
.mobile-pad-bottom-20{
	padding-bottom: .2rem
}
.mobile-pad-bottom-10{
	padding-bottom: .1rem
}

.mobile-marg-400{
	margin: 4rem
}
.mobile-marg-300{
	margin: 3rem
}
.mobile-marg-200{
	margin: 2rem
}
.mobile-marg-100{
	margin: 1rem
}
.mobile-marg-50{
	margin: .5rem
}
.mobile-marg-25{
	margin: .25rem
}
.mobile-marg-20{
	margin: .2rem
}
.mobile-marg-10{
	margin: .1rem
}

.mobile-marg-top-400{
	margin-top: 4rem
}
.mobile-marg-top-300{
	margin-top: 3rem
}
.mobile-marg-top-200{
	margin-top: 2rem
}
.mobile-marg-top-100{
	margin-top: 1rem
}
.mobile-marg-top-50{
	margin-top: .5rem
}
.mobile-marg-top-25{
	margin-top: .25rem
}
.mobile-marg-top-20{
	margin-top: .2rem
}
.mobile-marg-top-10{
	margin-top: .1rem
}

.mobile-marg-left-400{
	margin-left: 4rem
}
.mobile-marg-left-300{
	margin-left: 3rem
}
.mobile-marg-left-200{
	margin-left: 2rem
}
.mobile-marg-left-100{
	margin-left: 1rem
}
.mobile-marg-left-50{
	margin-left: .5rem
}
.mobile-marg-left-25{
	margin-left: .25rem
}
.mobile-marg-left-20{
	margin-left: .2rem
}
.mobile-marg-left-10{
	margin-left: .1rem
}

.mobile-marg-right-400{
	margin-right: 4rem
}
.mobile-marg-right-300{
	margin-right: 3rem
}
.mobile-marg-right-200{
	margin-right: 2rem
}
.mobile-marg-right-100{
	margin-right: 1rem
}
.mobile-marg-right-50{
	margin-right: .5rem
}
.mobile-marg-right-25{
	margin-right: .25rem
}
.mobile-marg-right-20{
	margin-right: .2rem
}
.mobile-marg-right-10{
	margin-right: .1rem
}

.mobile-marg-bottom-400{
	margin-bottom: 4rem
}
.mobile-marg-bottom-300{
	margin-bottom: 3rem
}
.mobile-marg-bottom-200{
	margin-bottom: 2rem
}
.mobile-marg-bottom-100{
	margin-bottom: 1rem
}
.mobile-marg-bottom-50{
	margin-bottom: .5rem
}
.mobile-marg-bottom-25{
	margin-bottom: .25rem
}
.mobile-marg-bottom-20{
	margin-bottom: .2rem
}
.mobile-marg-bottom-10{
	margin-bottom: .1rem
}

/* sizeing */

.mobile-max-width-10{
	max-width: .1rem;
}
.mobile-max-width-20{
	max-width: .2rem;
}
.mobile-max-width-25{
	max-width: .25rem;
}
.mobile-max-width-50{
	max-width: .5rem;
}
.mobile-max-width-100{
	max-width: 1rem;
}
.mobile-max-width-200{
	max-width: 2rem;
}
.mobile-max-width-300{
	max-width: 3rem;
}
.mobile-max-width-400{
	max-width: 4rem;
}
.mobile-max-width-500{
	max-width: 5rem;
}
.mobile-max-width-600{
	max-width: 6rem;
}
.mobile-max-width-700{
	max-width: 7rem;
}
.mobile-max-width-800{
	max-width: 8rem;
}

.mobile-width-10{
	width: .1rem;
}
.mobile-width-20{
	width: .2rem;
}
.mobile-width-25{
	width: .25rem;
}
.mobile-width-50{
	width: .5rem;
}
.mobile-width-100{
	width: 1rem;
}
.mobile-width-200{
	width: 2rem;
}
.mobile-width-300{
	width: 3rem;
}
.mobile-width-400{
	width: 4rem;
}
.mobile-width-500{
	width: 5rem;
}
.mobile-width-600{
	width: 6rem;
}
.mobile-width-700{
	width: 7rem;
}
.mobile-width-800{
	width: 8rem;
}

/* flex helpers */

.mobile-wrap-flex, .mobile-wrap-flex-head{
	display: flex;
}
.mobile-wrap-flex-inline, wrap-inline-flex{
	display: inline-flex;
}
.mobile-wrap-gap{
	gap: 1rem;
}
.mobile-wrap-space-evenly{
	justify-content: space-evenly;
}
.mobile-wrap-space-around{
	justify-content: space-around;
}
.mobile-wrap-space-between{
	justify-content: space-between;
}
.mobile-wrap-space-center{
	align-items: center;
  justify-content: center;
}

.mobile-flex-dir-col{
	flex-direction: column;
}

.mobile-flex-width-100{
	flex-basis: 100%;
}
.mobile-flex-width-90{
	flex-basis: 90%;
}
.mobile-flex-width-80{
	flex-basis: 80%;
}
.mobile-flex-width-70{
	flex-basis: 70%;
}
.mobile-flex-width-60{
	flex-basis: 60%;
}
.mobile-flex-width-50{
	flex-basis: 50%;
}
.mobile-flex-width-40{
	flex-basis: 40%;
}
.mobile-flex-width-30{
	flex-basis: 30%;
}
.mobile-flex-width-20{
	flex-basis: 20%;
}
.mobile-flex-width-10{
	flex-basis: 10%;
}
.mobile-flex-width-5{
	flex-basis: 5%;
}

.mobile-wrap-content-2 div{
	width: calc((100% - 1rem) / 2);
}
.mobile-wrap-content-3 div{
	width: calc((100% - 1rem) / 3);
}
.mobile-wrap-content-4 div{
	width: calc((100% - 1rem) / 4);
}
.mobile-wrap-content-5 div{
	width: calc((100% - 1rem) / 5);
}
.mobile-wrap-content-6 div{
	width: calc((100% - 1rem) / 6);
}
.mobile-wrap-content-7 div{
	width: calc((100% - 1rem) / 7);
}

}
/* === CSS: l-grid.css [root] === */
/* grid */
.content-grid{
	--breackout-size: calc((var(--breackout-max-width) - var(--content-max-width)) / 2);
	
	display: grid;
	grid-template-columns:
		[full-width-start] minmax(var(--padding-inline), 1fr) 
		[breakout-start] minmax(0, var(--breackout-size)) 
		[content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) 
		[content-end] minmax(0, var(--breackout-size)) 
		[breakout-end] minmax(var(--padding-inline), 1fr)
		[full-width-end];
	@media (width <= 30rem) {
		grid-template-columns:
		[full-width-start] minmax(.5rem, 1fr) 
		[breakout-start] minmax(0, var(--breackout-size)) 
		[content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) 
		[content-end] minmax(0, var(--breackout-size)) 
		[breakout-end] minmax(.5rem, 1fr)
		[full-width-end];
	}
}

.content-grid > * {
	grid-column: content;
}

.content-grid > .breakout {
	grid-column: breakout;
}

.content-grid > .full-width {
	grid-column: full-width;
}

/* === CSS: z-account-public-edit.css [root] === */
.account-public-edit-page h1.head,
.account-public-edit-page h2.head,
.account-public-edit-page h3.head,
.account-public-edit-page p,
.account-public-edit-page li {
	max-width: none;
}

.account-public-edit-page input[type="text"],
.account-public-edit-page input[type="email"],
.account-public-edit-page input[type="url"],
.account-public-edit-page textarea,
.account-public-edit-page select {
	width: 100%;
	max-width: none;
}

#page .account-public-edit-page .members-list {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}

#page .account-public-edit-page .members-list > li {
	list-style: none;
	margin-left: 0;
	max-width: none;
	width: 100%;
}

.account-public-edit-page .public-members-panel {
	width: 100%;
	max-width: none;
}

.account-public-edit-page .member-row {
	align-items: flex-start;
	gap: 1rem;
	width: 100%;
	justify-content: space-between;
}

.account-public-edit-page .member-item {
	width: 100%;
	max-width: none;
}

.account-public-edit-page .member-meta {
	flex: 1 1 22rem;
	min-width: 14rem;
	max-width: none;
}

.account-public-edit-page .member-user-link {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	color: inherit;
	text-decoration: none;
}

.account-public-edit-page .member-user-link:hover .member-display-name {
	text-decoration: underline;
}

.account-public-edit-page .member-avatar {
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 0.45rem;
	overflow: hidden;
	flex: 0 0 auto;
	background: var(--white-bg-700);
}

.account-public-edit-page .member-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.account-public-edit-page .member-user-text {
	display: inline-flex;
	flex-direction: column;
	gap: 0.1rem;
}

.account-public-edit-page .member-display-name {
	line-height: 1.15;
}

.account-public-edit-page .member-email {
	line-height: 1.1;
	font-size: 0.92rem;
}

.account-public-edit-page .member-meta strong {
	word-break: break-word;
}

.account-public-edit-page .member-actions {
	margin-left: auto;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 0.6rem;
	flex: 1 1 38rem;
	width: 100%;
}

.account-public-edit-page .member-actions-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	flex: 1 1 auto;
}

.account-public-edit-page .member-actions form {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.account-public-edit-page .member-role-form {
	display: grid;
	grid-template-columns: minmax(10rem, 1fr);
	gap: 0.5rem;
	align-items: center;
	flex: 0 1 16rem;
	max-width: 16rem;
}

.account-public-edit-page .member-role-form select {
	min-width: 10rem;
}

.account-public-edit-page .member-resend-form button {
	white-space: nowrap;
}

.account-public-edit-page .member-remove-form {
	margin-left: auto;
	align-self: center;
	display: inline-flex;
}

.account-public-edit-page .members-inline-notice {
	min-height: 1.2rem;
}

.account-public-edit-page .button-danger {
	background: #c1302a;
	border: 1px solid #9f211c;
	color: #fff;
}

.account-public-edit-page .member-remove-btn {
	width: 2rem;
	min-width: 2rem;
	height: 2rem;
	font-size: 1rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
}

.account-public-edit-page .button-danger:hover {
	filter: brightness(0.92);
}

.account-public-edit-page .public-add-member-form {
	display: grid;
	grid-template-columns: minmax(16rem, 2fr) minmax(10rem, 1fr) auto;
	gap: 0.75rem;
	align-items: end;
}

.account-public-edit-page .public-add-member-form input[type="email"],
.account-public-edit-page .public-add-member-form select {
	width: 100%;
}

.account-public-edit-page .public-location-layout {
	display: grid;
	grid-template-columns: minmax(18rem, 2fr) minmax(12rem, 1fr);
	gap: 1rem;
	align-items: start;
}

.account-public-edit-page .public-location-help {
	margin-top: 0.45rem;
	margin-bottom: 0.35rem;
}

.account-public-edit-page .public-location-status {
	min-height: 1.2rem;
	margin-bottom: 0;
}

.account-public-edit-page .public-location-map-wrap {
	border: 1px solid var(--white-bg-600);
}

.account-public-edit-page .public-location-map {
	width: 100%;
	height: 11rem;
	border-radius: 0.4rem;
	overflow: hidden;
	background: linear-gradient(135deg, #f0f1f2 0%, #d4dae0 100%);
}

.account-public-edit-page .public-location-map-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-align: center;
	padding: 0.75rem;
}

.account-public-edit-page .publish-toggle-form {
	margin-top: 1rem;
}

.account-public-edit-page .publish-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.account-public-edit-page .publish-toggle-row .switch {
	margin: 0;
}

.account-public-edit-page .publication-layout {
	display: grid;
	grid-template-columns: minmax(18rem, 2fr) minmax(14rem, 1fr);
	gap: 1rem;
	align-items: start;
}

.account-public-edit-page .publication-status-card {
	border: 1px solid var(--white-bg-600);
}

.account-public-edit-page .publication-status-card p {
	margin-bottom: 0.45rem;
}

.account-public-edit-page .publication-status-card p:last-child {
	margin-bottom: 0;
}

.account-public-edit-page .member-section-title {
	font-size: 2rem;
	font-weight: 500;
	opacity: 0.95;
	line-height: 1.2;
}

.account-public-edit-page .head .member-count-inline {
	font-size: 0.9rem;
	font-weight: 400;
	opacity: 0.62;
	display: inline-block;
	margin-left: 0.15rem;
	vertical-align: baseline;
	line-height: 1;
}

.account-public-edit-page #profile-publish-toggle:disabled + label {
	opacity: 0.45;
	cursor: not-allowed;
}

.account-public-edit-page .public-delete-form {
	display: flex;
	justify-content: flex-end;
	margin-top: 1rem;
}

@media (max-width: 880px) {
	.account-public-edit-page .member-actions {
		justify-content: flex-start;
		margin-left: 0;
		flex: 1 1 100%;
	}

	.account-public-edit-page .member-actions-main {
		justify-content: flex-start;
		width: 100%;
	}

	.account-public-edit-page .member-role-form {
		max-width: none;
		flex: 1 1 100%;
	}

	.account-public-edit-page .member-remove-form {
		margin-left: 0;
	}

	.account-public-edit-page .publish-toggle-row {
		align-items: flex-start;
	}

	.account-public-edit-page .publication-layout {
		grid-template-columns: 1fr;
	}

	.account-public-edit-page .public-add-member-form {
		grid-template-columns: 1fr;
	}

	.account-public-edit-page .public-location-layout {
		grid-template-columns: 1fr;
	}

	.account-public-edit-page .public-location-map {
		height: 10rem;
	}
}

@media (prefers-color-scheme: dark) {
	.account-public-edit-page .button-danger {
		background: #ff5e57;
		border-color: #ff8b86;
		color: #181818;
	}
}

/* === CSS: z-admin.css [root] === */
.admin-page p,
.admin-page li,
.admin-page th,
.admin-page td,
.admin-page h1,
.admin-page h2,
.admin-page h3 {
	max-width: none;
}

.admin-page{
	--admin-surface: var(--white-bg-900);
	--admin-surface-strong: var(--white-bg-800);
	--admin-border: var(--white-800);
	--admin-text-muted: var(--white-500);
}

.admin-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	border-bottom: 1px solid var(--admin-border);
	padding-bottom: 0.4rem;
}
.admin-toolbar{
	align-items: center;
}
.admin-toolbar .admin-tabs{
	border-bottom: 0;
	padding-bottom: 0;
	margin: 0;
}
.admin-toolbar--section .admin-tabs{
	border-bottom: 1px solid var(--admin-border);
	padding-bottom: 0.4rem;
}

.admin-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.45rem 0.8rem;
	border-radius: 0.45rem;
	background: var(--admin-surface);
	border: 1px solid var(--admin-border);
	color: var(--content-text);
	font-weight: 600;
	gap: 0.35rem;
	box-shadow: 0 4px 10px -8px var(--dark-bg-900);
}
.admin-tab__badge{
	display: inline-flex;
	min-width: 1.4rem;
	height: 1.4rem;
	align-items: center;
	justify-content: center;
	padding: 0 .35rem;
	border-radius: 999px;
	background: var(--admin-border);
	color: var(--content-text);
	font-size: 0.82rem;
	line-height: 1;
}
.admin-tab__badge:empty{
	display: none;
}

.admin-tab.active {
	background: var(--color-bg-700);
	color: var(--dark);
	border-color: var(--color-bg-600);
	box-shadow: 0 6px 18px -12px var(--dark-bg-900);
}

.admin-section-switch{
	display: grid;
	gap: 0.4rem;
	width: min(100%, 24rem);
}
.admin-section-switch__label{
	font-weight: 700;
}
.admin-section-switch__control{
	position: relative;
}
.admin-section-switch__control::after{
	content: "";
	position: absolute;
	right: 0.85rem;
	top: 50%;
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-60%) rotate(45deg);
	pointer-events: none;
	opacity: 0.75;
}
.admin-section-switch__control select{
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.1rem;
	background: var(--admin-surface);
	border: 1px solid var(--admin-border);
}
.admin-section-switch__hint{
	margin: 0;
	font-size: 0.92rem;
	color: var(--admin-text-muted);
}
.admin-intro-note{
	padding: 0.65rem 0.75rem;
	border-radius: 0.45rem;
	background: var(--admin-surface-strong);
	border: 1px solid var(--admin-border);
	color: var(--admin-text-muted);
}
.admin-form-grid{
	display: grid;
	gap: 0.8rem;
}
.admin-form-grid--compact{
	margin-top: 0.9rem;
}
.admin-form-row{
	display: grid;
	grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
	gap: 0.5rem 1rem;
	align-items: start;
}
.admin-form-row__meta{
	display: grid;
	gap: 0.2rem;
	align-self: center;
	text-decoration: none;
	line-height: 1.3;
	color: var(--content-text);
}
.admin-form-row__title{
	font-weight: 700;
}
.admin-form-row__hint{
	font-size: 0.9rem;
	color: var(--admin-text-muted);
}
.admin-form-row__field{
	width: 100%;
}
.admin-form-row__field > input,
.admin-form-row__field > textarea,
.admin-form-row__field > select{
	width: 100%;
}
.admin-actions--right{
	justify-content: flex-end;
}

.admin-table-wrap {
	overflow-x: auto;
}

.admin-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 54rem;
	background: var(--admin-surface);
	border: 1px solid var(--admin-border);
	border-radius: 0.45rem;
	overflow: hidden;
}

.admin-table th,
.admin-table td {
	padding: 0.65rem 0.55rem;
	vertical-align: top;
	border-bottom: 1px solid var(--admin-border);
	text-align: left;
}

.admin-table thead th {
	font-size: 0.88rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.95;
	background: var(--admin-surface-strong);
}

.admin-table tbody tr:last-child td {
	border-bottom: 0;
}

.admin-table tbody tr:nth-child(2n) td {
	background: var(--admin-surface-strong);
}

.admin-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}
.admin-actions-grid{
	display:grid;
	grid-template-columns: minmax(190px, 220px) minmax(240px, 1fr) auto;
	grid-template-rows: auto;
	gap: 10px 12px;
	align-items: start;
}
.admin-actions-stack{
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	align-self: start;
}
.admin-actions-stack form{
	margin: 0;
}
.admin-actions-support{
	gap: .55rem;
}
.admin-actions-inline{
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	align-items: center;
}
.admin-actions-inline form{
	margin: 0;
}
.admin-actions-inline .ui-btn{
	width: auto;
	min-width: 8.4rem;
}
.admin-actions-grid .admin-actions-inline .ui-btn{
	width: auto;
	min-width: 8.4rem;
}
.admin-actions-grid .admin-actions-inline form{
	display: inline-flex;
}
.admin-actions-grid .ui-btn{
	width: 100%;
	justify-content: center;
}
.admin-actions-grid .block-reason{
	width: 100%;
	min-height: 110px;
}
.admin-actions-unblock{
	grid-column: 3;
	grid-row: 1;
	align-self: start;
}
.admin-actions-block{
	grid-column: 2 / span 2;
	grid-row: 1;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: stretch;
}
.admin-actions-block .block-reason{
	align-self: start;
}
.admin-actions-block .admin-actions-block__submit{
	width: auto;
	align-self: end;
	white-space: nowrap;
}
.admin-actions-grid a{
	text-decoration: none;
	outline: none;
}
.admin-actions-grid a:focus-visible{
	outline: 2px solid var(--color-bg-700);
	outline-offset: 2px;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-bg-700) 35%, transparent);
}

.message-filter__badge{
	display: inline-flex;
	min-width: 1.1rem;
	height: 1.1rem;
	align-items: center;
	justify-content: center;
	margin-left: 0.35rem;
	padding: 0 .35rem;
	border-radius: 999px;
	background: var(--admin-border, var(--white-800));
	color: var(--content-text);
	font-size: 0.78rem;
	line-height: 1;
}
.message-filter__badge:empty{
	display:none;
}

@media (max-width: 800px){
	.admin-actions-grid{
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	.admin-actions-grid > *{
		grid-column: 1 !important;
		grid-row: auto !important;
	}
	.admin-actions-block{
		grid-template-columns: 1fr;
	}
	.admin-actions-grid .ui-btn{
		width: 100%;
	}
	.admin-actions-inline .ui-btn{
		width: auto;
		min-width: 0;
	}
}

.admin-actions form,
.admin-actions a {
	display: inline-flex;
	align-items: center;
}

.admin-card{
	background: var(--admin-surface);
	border: 1px solid var(--admin-border);
	border-radius: 0.5rem;
	padding: 0.9rem 1rem;
	box-shadow: 0 6px 18px -14px var(--dark-bg-900);
}

.admin-chip{
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: var(--admin-surface-strong);
	color: var(--content-text);
	font-size: 0.85rem;
	border: 1px solid var(--admin-border);
}
.admin-chip--ok{
	color: #2f8f5b;
	background: #2f8f5b26;
	border-color: #2f8f5b55;
}
.admin-chip--warn{
	color: #c27b11;
	background: #f2a93a22;
	border-color: #f2a93a55;
}
.admin-chip--error{
	color: #c03f3f;
	background: #d84f4f26;
	border-color: #d84f4f55;
}

.admin-btn-danger {
	background: #8a3b3b;
	color: var(--white);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .admin-page{
		--admin-surface: var(--dark-bg-800);
		--admin-surface-strong: var(--dark-bg-700);
		--admin-border: var(--dark-bg-500);
		--admin-text-muted: var(--white-400);
	}
	:root:not([data-theme="light"]) .admin-tab{
		box-shadow: none;
	}
	:root:not([data-theme="light"]) .admin-tab.active{
		color: var(--dark);
	}
}

@media (max-width: 880px) {
	.admin-table {
		min-width: 44rem;
	}

	.admin-tab {
		font-size: 0.9rem;
	}
}

@media (max-width: 900px) {
	.admin-toolbar .admin-tabs {
		display: none;
	}
	.admin-toolbar--section .admin-tabs {
		display: flex;
	}

	.admin-toolbar {
		justify-content: flex-start;
	}

	.admin-toolbar .admin-box-tabs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		gap: 0.45rem;
	}

	.admin-toolbar .admin-box-tabs .message-filter {
		width: 100%;
		justify-content: center;
		min-width: 0;
	}
	.admin-section-switch{
		width: 100%;
	}
	.admin-form-row{
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}
	.admin-actions--right .ui-btn{
		width: 100%;
	}
}

/* === CSS: z-htmx-confirm.css [core] === */
.confirm-modal[hidden]{ display:none; }
  .confirm-modal{ position:fixed; inset:0; z-index:9999; }
  .confirm-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
  .confirm-modal__panel{
    position:relative; margin:auto; top:30vh; max-width:520px; width:calc(100% - 2rem);
    background:#111; color:#fff; border-radius:12px; padding:1.25rem; box-shadow:0 10px 40px rgba(0,0,0,.4);
  }
  .confirm-modal__title{ margin:0 0 .5rem; font-size:1.125rem; }
.confirm-modal__text{ margin:0 0 1rem; opacity:.9; white-space:pre-wrap; }
  .confirm-modal__actions{ display:flex; gap:.5rem; justify-content:flex-end; }
  .btn{ padding:.6rem .9rem; border-radius:.6rem; border:0; cursor:pointer; }
  .btn--ghost{ background:transparent; color:#fff; outline:1px solid rgba(255,255,255,.25); }
  .btn--danger{ background:#e5484d; color:#fff; }

/* === CSS: z-messages.css [root] === */
.message-center{
	margin-top: 0.75rem;
}
.message-center__grid{
	display: grid;
	grid-template-columns: minmax(300px, 340px) 1fr;
	gap: 1rem;
	align-items: start;
}
.message-toolbar{
	margin: 0.6rem 0 0.8rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.4rem;
}
.message-toolbar__group{
	display: inline-flex;
	gap: 0.35rem;
	align-items: center;
}
.message-filter{
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: #eceff5;
	border: 1px solid #cbd0dc;
	border-radius: 0.35rem;
	padding: 0.35rem 0.6rem;
	cursor: pointer;
	font-size: 0.9rem;
	text-decoration: none !important;
	color: #1f2430;
}
.message-filter.active{
	background: #b5c4e6;
	color: #0c1a3d;
	border-color: #a3b6e0;
}
.message-filter input[type="checkbox"]{
	appearance: none;
	width: 1rem;
	height: 1rem;
	border: 1px solid var(--admin-border, var(--white-800));
	border-radius: 0.25rem;
	background: transparent;
	position: relative;
	margin: 0;
}
.message-filter input[type="checkbox"]:checked{
	border-color: var(--color-bg-700);
	background: var(--color-bg-700);
}
.message-filter input[type="checkbox"]:checked::after{
	content: "";
	position: absolute;
	inset: 0.2rem;
	background: var(--dark);
	border-radius: 0.15rem;
}
.message-filter:hover{
	text-decoration: none;
	border-color: var(--color-bg-700);
}
.message-filter__badge{
	display: inline-flex;
	min-width: 1.1rem;
	height: 1.1rem;
	align-items: center;
	justify-content: center;
	margin-left: 0.2rem;
	padding: 0 .35rem;
	border-radius: 999px;
	background: #dfe4ef;
	color: #394153;
	font-size: 0.78rem;
	line-height: 1;
}
.message-filter__badge:empty{
	display: none;
}
.message-view-toggle,
.message-close{
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 0.35rem;
	border: 1px solid var(--admin-border, var(--white-800));
	background: var(--admin-surface, var(--white-bg-900));
	cursor: pointer;
	font-weight: 700;
	color: var(--content-text);
	display: grid;
	place-items: center;
}
.message-close:hover,
.message-view-toggle:hover{
	border-color: var(--color-bg-700);
	color: var(--dark);
}
.message-center__list{
	background: var(--white-bg-900);
	border: 1px solid var(--white-800);
	border-radius: .55rem;
	padding: .65rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.message-center__detail{
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	min-height: 18rem;
}

.message-row{
	width: 100%;
	text-align: left;
	background: #ffffff;
	border: 1px solid #dcdcdc;
	border-radius: .5rem;
	padding: .75rem .85rem;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	column-gap: .65rem;
}
.message-row:hover{
	border-color: var(--color-bg-600);
	box-shadow: 0 8px 22px -18px rgba(0,0,0,.25);
}
.message-row.is-active{
	border-color: var(--color-bg-700);
	box-shadow: 0 10px 26px -18px rgba(0,0,0,.28);
	background: #f3f5fb;
}
.message-row.is-unread .message-row__subject{
	font-weight: 700;
}
.message-row__unread-dot{
	position: absolute;
	left: .55rem;
	top: .95rem;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--color-bg-700);
	opacity: 0;
	transition: opacity .18s ease, transform .18s ease;
}
.message-row.is-unread .message-row__unread-dot{
	opacity: 1;
	transform: scale(1.05);
}
.message-row__summary{
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	flex-wrap: wrap;
	padding-left: 1.1rem;
	padding-right: 0;
	width: 100%;
	min-width: 0;
}
.message-row__subject{
	font-size: 1.02rem;
	line-height: 1.2;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.message-row__date{
	font-size: .86rem;
	color: var(--white-500);
	position: static;
	white-space: nowrap;
	line-height: 1.1;
	align-self: start;
	justify-self: end;
	background: #f3f5fb;
	padding: .12rem .4rem;
	border-radius: .28rem;
}
.message-row__meta{
	display: inline-flex;
	align-items: center;
}
.message-row__meta .badge{
	max-width: 100%;
	font-size: .74rem;
	padding: .12rem .5rem;
}
.message-row__hint{
	font-size: .88rem;
	color: var(--white-500);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.message-row__preview{
	display: none;
}

.badge{
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .2rem .55rem;
	border-radius: 999px;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
}
.badge--success{
	background: #2f8f5b26;
	color: #2f8f5b;
}
.badge--pending{
	background: #f2a93a22;
	color: #c27b11;
}
.badge--danger{
	background: #d84f4f26;
	color: #c03f3f;
}
.badge--muted{
	background: var(--white-800);
	color: var(--white-500);
}

:root:not([data-theme="light"]) .badge--muted{
	background: var(--dark-bg-600);
	color: var(--white-300);
}

.message-detail__card{
	background: #fdfdfd;
	border: 1px solid #dcdcdc;
	border-radius: .6rem;
	padding: 1.05rem 1.15rem;
}
.message-detail__header{
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: flex-start;
}
.message-detail__header-actions{
	display: inline-flex;
	align-items: flex-start;
	gap: .45rem;
}
.message-reply-icon-btn{
	width: 1.8rem;
	height: 1.8rem;
	border-radius: .35rem;
	border: 1px solid var(--admin-border, var(--white-800));
	background: var(--admin-surface, var(--white-bg-900));
	color: var(--content-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}
.message-reply-icon-btn__icon{
	width: 1.02rem;
	height: 1.02rem;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.message-reply-icon-btn:hover{
	border-color: var(--color-bg-700);
	color: var(--dark);
}
.message-inline-reply{
	margin-top: .7rem;
	border: 1px solid var(--white-800);
	background: #f8f9fd;
}
.message-inline-reply form{
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.message-inline-reply__meta{
	margin: 0;
	font-size: .9rem;
	color: var(--white-500);
}
.message-inline-reply__label{
	display: block;
	font-size: .88rem;
	opacity: .75;
}
.message-inline-reply textarea{
	width: 100%;
	min-height: 11rem;
	resize: vertical;
	background: #fff;
	color: var(--dark-100);
	border: 1px solid var(--white-700);
	border-radius: .45rem;
	padding: .6rem .7rem;
}
.message-inline-reply__actions{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
}
.admin-contact-popover{
	position: relative;
}
.admin-contact-popover > summary{
	list-style: none;
}
.admin-contact-popover > summary::-webkit-details-marker{
	display: none;
}
.admin-contact-popover[open]{
	z-index: 4;
}
.admin-contact-popover__form{
	position: absolute;
	right: 0;
	top: calc(100% + .35rem);
	width: min(28rem, 72vw);
	display: flex;
	flex-direction: column;
	gap: .55rem;
	background: #f3f3f3 !important;
	border: 1px solid var(--white-800);
	border-radius: .5rem;
	padding: .65rem;
	box-shadow: 0 16px 30px -20px rgba(0,0,0,.35);
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}
.admin-contact-popover__form textarea{
	width: 100%;
	min-height: 7rem;
	background: #ffffff !important;
	background-image: none !important;
	opacity: 1;
	color: var(--dark-100);
	border: 1px solid var(--white-700);
}
.message-detail__label{
	font-size: .85rem;
	color: var(--white-500);
	margin: 0 0 .2rem 0;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.message-detail__subject{
	margin: 0;
}
.message-detail__meta{
	margin: .25rem 0 0;
	color: var(--white-500);
	display: flex;
	gap: .5rem;
	align-items: center;
}
.message-detail__controls{
	flex-shrink: 0;
}
.message-detail__toolbar{
	margin-top: .35rem;
	padding: .45rem 0 .35rem;
	border-top: 1px solid var(--white-800);
	display: flex;
	gap: .75rem;
	align-items: center;
}
.message-detail__body{
	margin-top: 1rem;
	color: var(--dark-100);
}
.message-detail__body p{
	max-width: 80ch;
}
.message-thread{
	margin-top: 1rem;
	padding: .7rem .8rem;
	border: 1px solid var(--white-800);
	border-radius: .5rem;
	background: #f8f9fd;
}
.message-thread__label{
	margin: 0 0 .5rem 0;
	font-size: .82rem;
	color: var(--white-500);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.message-thread__list{
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.message-thread__item{
	border: 1px solid var(--white-800);
	border-radius: .45rem;
	background: #fff;
	padding: .5rem .6rem;
}
.message-thread__item--out{
	background: #eef5ff;
	border-color: #cfe0ff;
}
.message-thread__meta{
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	margin: 0 0 .3rem 0;
	font-size: .78rem;
	color: var(--white-500);
}
.message-thread__meta span{
	white-space: nowrap;
}
.message-thread__text{
	margin: 0;
	font-size: .92rem;
}
.message-thread--collapsed .message-thread__list{
	gap: .35rem;
}
.message-thread__entry{
	border: 1px solid var(--white-800);
	border-radius: .45rem;
	background: #fff;
	padding: .2rem .45rem;
}
.message-thread__entry-summary{
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}
.message-thread__entry-head{
	font-size: .78rem;
	color: var(--white-500);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.message-thread__entry-subject{
	font-size: .88rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.message-thread__entry-body{
	margin-top: .45rem;
	padding-top: .45rem;
	border-top: 1px solid var(--white-800);
}
.message-thread__entry-body p{
	margin: 0;
	font-size: .9rem;
}
.message-reply-form{
	margin-top: .85rem;
	display: flex;
	flex-direction: column;
	gap: .45rem;
}
.message-reply-form__label{
	font-size: .84rem;
	color: var(--white-500);
}
.message-reply-form textarea{
	width: 100%;
	min-height: 7rem;
	border-radius: .45rem;
	border: 1px solid var(--white-700);
	padding: .55rem .65rem;
	resize: vertical;
	background: #fff;
	color: var(--dark-100);
}
.message-reply-form__actions{
	display: flex;
	justify-content: flex-start;
}
.message-detail__footnote{
	margin-top: 1rem;
	font-size: .85rem;
	color: var(--white-500);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.message-detail__footnote--action{
	justify-content: flex-start;
}
.message-tiny-link{
	background: none;
	border: none;
	color: var(--white-500);
	font-size: .82rem;
	padding: 0;
	text-decoration: underline;
	cursor: pointer;
}
.message-tiny-link:hover{
	color: var(--color-800);
}

.message-load-more{
	width: 100%;
}

.message-row__mobile-detail{
	display: none;
	margin-top: .6rem;
}

.message-center--list-only .message-center__grid{
	grid-template-columns: 1fr;
}
.message-center--list-only .message-center__detail{
	display: none;
}
.message-center--list-only .message-row__mobile-detail{
	display: none;
}

.message-link-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--white-800);
	color: var(--white-500);
	padding: .28rem .6rem;
	border-radius: .35rem;
	font-size: .82rem;
	line-height: 1.1;
	cursor: pointer;
	white-space: nowrap;
	word-break: normal;
	overflow-wrap: normal;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}
.message-link-btn:hover{
	color: var(--color-800);
	border-color: var(--color-bg-700);
}

body.message-compose-modal-open{
	overflow: hidden;
}
.message-compose-modal[hidden]{
	display: none;
}
.message-compose-modal{
	position: fixed;
	inset: 0;
	z-index: 1600;
	display: grid;
	place-items: center;
	padding: .9rem;
	background: rgba(0,0,0,.56);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.message-compose-modal__panel{
	width: min(100%, 42rem);
	max-height: min(90vh, 48rem);
	overflow-y: auto;
}
.message-compose-modal__head{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .8rem;
}
.message-compose-modal__head h3.head{
	margin: 0;
}
.message-compose-modal__close{
	border: 1px solid var(--white-bg-700);
	background: var(--white-bg-800);
	color: var(--color);
	border-radius: .45rem;
	width: 2rem;
	height: 2rem;
	line-height: 1;
	font-size: 1.2rem;
	cursor: pointer;
}
.message-compose-modal__label{
	display: block;
	margin-top: .55rem;
	opacity: .72;
}
.message-compose-modal textarea{
	width: 100%;
	min-height: 14rem;
	resize: vertical;
	background: #fff;
	color: var(--dark-100);
	border: 1px solid var(--white-700);
	border-radius: .45rem;
	padding: .6rem .7rem;
}
.message-compose-modal__actions{
	margin-top: .7rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .6rem;
}

@media (max-width: 900px) {
	.message-center__grid{
		grid-template-columns: 1fr;
	}
	.message-center__detail{
		display: none;
	}
	.message-row{
		grid-template-columns: 1fr;
	}
	.message-row__summary{
		padding-right: 0;
	}
	.message-row__subject{
		white-space: normal;
	}
	.message-row__meta{
		display: none;
	}
	.admin-contact-popover__form{
		position: static;
		width: 100%;
		box-shadow: none;
	}
	.message-row__date{
		display: block;
		padding-left: 1.1rem;
		margin: .15rem 0 .35rem;
		justify-self: start;
	}
	.message-row__mobile-detail{
		display: block;
		max-height: 0;
		overflow: hidden;
		border-top: 1px solid var(--white-800);
		padding-top: 0;
		transition: max-height .25s ease, padding-top .2s ease;
	}
	.message-row__mobile-detail[data-open="1"]{
		max-height: 2000px;
		padding-top: .75rem;
	}
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .message-center__list{
		background: var(--dark-bg-900);
		border-color: var(--dark-bg-600);
	}
	:root:not([data-theme="light"]) .message-center__detail{
		background: transparent;
		border-color: transparent;
	}
	:root:not([data-theme="light"]) .message-row{
		background: var(--dark-bg-700);
		border-color: var(--dark-bg-500);
	}
	:root:not([data-theme="light"]) .message-row.is-active{
		background: var(--dark-bg-600);
		border-color: var(--color-bg-700);
	}
	:root:not([data-theme="light"]) .message-row__date,
	:root:not([data-theme="light"]) .message-row__hint{
		color: var(--white-400);
	}
	:root:not([data-theme="light"]) .message-row__date{
		background: var(--dark-bg-500);
	}
	:root:not([data-theme="light"]) .admin-contact-popover__form{
		background: #1f1f1f !important;
		border-color: var(--dark-bg-500);
	}
	:root:not([data-theme="light"]) .admin-contact-popover__form textarea{
		background: #121212 !important;
		background-image: none !important;
		color: var(--white-100);
		border-color: var(--dark-bg-500);
	}
	:root:not([data-theme="light"]) .message-detail__card{
		background: var(--dark-bg-800);
		border-color: var(--dark-bg-500);
	}
	:root:not([data-theme="light"]) .message-detail__toolbar{
		border-color: var(--dark-bg-400);
	}
	:root:not([data-theme="light"]) .message-thread{
		background: var(--dark-bg-700);
		border-color: var(--dark-bg-500);
	}
	:root:not([data-theme="light"]) .message-thread__item{
		background: var(--dark-bg-800);
		border-color: var(--dark-bg-500);
	}
	:root:not([data-theme="light"]) .message-thread__entry{
		background: var(--dark-bg-800);
		border-color: var(--dark-bg-500);
	}
	:root:not([data-theme="light"]) .message-thread__entry-head{
		color: var(--white-400);
	}
	:root:not([data-theme="light"]) .message-thread__entry-body{
		border-top-color: var(--dark-bg-500);
	}
	:root:not([data-theme="light"]) .message-thread__item--out{
		background: #1f2a38;
		border-color: #314664;
	}
	:root:not([data-theme="light"]) .message-reply-form textarea{
		background: var(--dark-bg-900);
		border-color: var(--dark-bg-500);
		color: var(--white-100);
	}
		:root:not([data-theme="light"]) .message-link-btn{
			border-color: var(--dark-bg-400);
			color: var(--white-400);
		}
		:root:not([data-theme="light"]) .message-link-btn:hover{
			color: var(--color-800);
		}
	:root:not([data-theme="light"]) .message-reply-icon-btn{
		border-color: var(--dark-bg-400);
		background: var(--dark-bg-700);
		color: var(--white-200);
	}
	:root:not([data-theme="light"]) .message-reply-icon-btn:hover{
		border-color: var(--color-bg-700);
		color: var(--white-100);
	}
	:root:not([data-theme="light"]) .message-inline-reply{
		background: var(--dark-bg-700);
		border-color: var(--dark-bg-500);
	}
	:root:not([data-theme="light"]) .message-inline-reply__meta{
		color: var(--white-300);
	}
	:root:not([data-theme="light"]) .message-inline-reply textarea{
		background: var(--dark-bg-900);
		border-color: var(--dark-bg-500);
		color: var(--white-100);
	}
		:root:not([data-theme="light"]) .message-close,
		:root:not([data-theme="light"]) .message-view-toggle{
			color: var(--white);
		border-color: var(--dark-bg-400);
		background: var(--dark-bg-700);
	}
	:root:not([data-theme="light"]) .message-close:hover,
	:root:not([data-theme="light"]) .message-view-toggle:hover{
		color: var(--dark);
		background: var(--color-bg-700);
		border-color: var(--color-bg-700);
	}
	:root:not([data-theme="light"]) .message-filter{
		background: var(--dark-bg-700);
		border-color: var(--dark-bg-400);
		color: var(--white);
	}
	:root:not([data-theme="light"]) .message-filter.active{
		background: var(--color-bg-700);
		color: var(--dark);
		border-color: var(--color-bg-600);
	}
	:root:not([data-theme="light"]) .message-filter input[type="checkbox"]{
		border-color: var(--dark-bg-400);
	}
		:root:not([data-theme="light"]) .message-filter input[type="checkbox"]:checked{
			border-color: var(--color-bg-700);
			background: var(--color-bg-700);
		}
		:root:not([data-theme="light"]) .message-compose-modal__close{
			border-color: var(--dark-700);
			background: var(--dark-800);
			color: var(--white-100);
		}
		:root:not([data-theme="light"]) .message-compose-modal textarea{
			background: var(--dark-bg-900);
			border-color: var(--dark-bg-500);
			color: var(--white-100);
		}
	}

/* === CSS: z-nsb-box.css [root] === */
.cms-edit{
	reset: all;
	float: right;
	background-color: #cccccc22;
	padding: 5px 2px 5px 10px;
	font-family: Arial, sans-serif;
	font-size: 16px;
	text-decoration: none!important;
	border-radius: 5px;
	box-shadow: 0 0 5px 5px #00000011;
	transform: scale(1);
	transition: all 0.1s linear;
}
.cms-edit::after{
	content: ' 🖋️';
	text-decoration: none;
}
.cms-edit:hover{
	transform: scale(0.95);
	box-shadow: 0 0 3px 2px #00000044;
	transition: all 0.2s linear;
}


/* =======================================================================
   NSB Box – Lightbox / Overlay
   Alle Variablen können später im :root überschrieben werden
   ======================================================================= */
:root {
  /* Overlay & Filter */
  --nsb-bg-overlay:   rgba(40,40,40,0.85);
  --nsb-bg-filter:    blur(4px);

  /* Content Container */
  --nsb-content-size: 90%;
  --nsb-border-type:  none;
  --nsb-border-radius: 5px;
  --nsb-shadow-type:  0 0 40px -10px #101010;

  /* Controls */
  --nsb-close-size:    2.4rem;
  --nsb-close-pos:     2rem;
  --nsb-close-shadow:  0 0 10px 0 #101010;

  --nsb-arrow-size:    2.8rem;
  --nsb-arrow-bg:      rgba(0,0,0,.35);
}

/* ==================== Grundlayout ==================== */
#nsbbox {
  position: fixed;
  inset: 0;
  display: flex;                 /* nur Flex */
  justify-content: center;
  align-items: center;
  z-index: 9999;

  background: var(--nsb-bg-overlay);
  backdrop-filter: var(--nsb-bg-filter);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
#nsbbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .3s ease;
}

/* ==================== Media Wrapper ==================== */
/* ==================== Media Wrapper ==================== */
#nsbbox .nsb-media {
  max-width:  var(--nsb-content-size);
  max-height: var(--nsb-content-size);
  border:     var(--nsb-border-type);
  border-radius: var(--nsb-border-radius);
  box-shadow: var(--nsb-shadow-type);
  background: #000;

  /* NEU: echtes Flex-Centering */
  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: transform .30s cubic-bezier(.22,.61,.36,1),
              opacity  .30s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}
#nsbbox.open .nsb-media {
  opacity: 1;
  transform: none;
}
#nsbbox.fade-out .nsb-media {
  opacity: 0;
  transform: translateX(var(--dir, 0));
}

/* ==================== Media Content ==================== */
#nsbbox .nsb-media > img,
#nsbbox .nsb-media > iframe {
  display: block;
  /* Neu: Bild streng auf Viewport begrenzen */
  max-width:  90vw;   /* statt 80vw – mehr Platz, aber nicht zu nah an Pfeilen */
  max-height: 90vh;
  margin: auto;       /* sichert horizontales + vertikales Zentrieren */
  border-radius: inherit;
  border: none;
  object-fit: contain;
}

/* ==================== Caption ==================== */
#nsbbox .nsb-caption {
  color: #fff;
  text-align: center;
  margin-top: 1rem;
  font-size: 1rem;
  max-width: 90%;
}

/* ==================== Buttons ==================== */
#nsbbox button {
  position: absolute;
  border: none;
  background: var(--nsb-arrow-bg);
  color: #fff;
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  box-shadow: var(--nsb-close-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

#nsbbox .nsb-close {
  top: var(--nsb-close-pos);
  right: var(--nsb-close-pos);
  width: var(--nsb-close-size);
  height: var(--nsb-close-size);
  font-size: calc(var(--nsb-close-size) * 0.6);
}

#nsbbox .nsb-prev,
#nsbbox .nsb-next {
  top: 50%;
  transform: translateY(-50%);
  width: var(--nsb-arrow-size);
  height: var(--nsb-arrow-size);
  font-size: calc(var(--nsb-arrow-size) * 0.6);
}
#nsbbox .nsb-prev { left:  clamp(1rem, 3vw, 3rem); }
#nsbbox .nsb-next { right: clamp(1rem, 3vw, 3rem); }

@media (prefers-reduced-motion: reduce) {
  #nsbbox,
  #nsbbox .nsb-media {
    transition: none !important;
  }
}
/* === CSS: z-public-profile-view.css [root] === */
.public-profile-view {
	margin-top: 0;
}

.public-profile-view h1.head,
.public-profile-view h2.head,
.public-profile-view h3.head,
.public-profile-view p,
.public-profile-view li {
	max-width: none;
}

.public-profile-hero {
	position: relative;
	margin-top: -10.3rem;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	min-height: 31rem;
	overflow: hidden;
	border-radius: 0;
}

.public-profile-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.public-profile-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 70%, rgba(0, 0, 0, 0.62) 100%);
}

.public-profile-hero__grid {
	position: relative;
	z-index: 2;
	min-height: 31rem;
	align-content: end;
	padding-bottom: 1rem;
}

.public-profile-hero__content {
	width: 100%;
}

.public-profile-identity {
	display: flex;
	gap: 1rem;
	align-items: center;
	min-height: 7rem;
	width: min(100%, 58rem);
	position: relative;
	background: none;
	padding: 0.35rem 1.1rem;
	border-radius: 0.5rem;
}

.public-profile-identity::before {
  backdrop-filter: blur(10px);
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--breackout-size));
	width: calc(100% + (var(--breackout-size) * 2));
	background: rgba(9, 1, 5, 0.7);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	mask-image: linear-gradient(
		90deg,
		transparent 0,
		transparent calc(var(--breackout-size) * 0.05),
		#000000 calc(var(--breackout-size) * 0.8),
		#000000 75%,
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0,
		transparent calc(var(--breackout-size) * 0.05),
		#000000 calc(var(--breackout-size) * 0.8),
		#000000 75%,
		transparent 100%
	);
	border-radius: 0.5rem;
	z-index: 0;
}

.public-profile-identity__avatar {
	width: 7rem;
	height: 7rem;
	border-radius: 0.4rem;
	overflow: hidden;
	background: var(--white-bg-700);
	flex: 0 0 auto;
	position: relative;
	z-index: 1;
  margin-left: -1rem;
}

.public-profile-identity__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.public-profile-identity__text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.2rem;
	position: relative;
	z-index: 1;
}

.public-profile-identity__type {
	display: block;
	width: auto;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: var(--white-100) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	font-size: 1rem;
	letter-spacing: 0.01em;
	text-transform: none;
	margin: 0;
	position: relative;
	z-index: 2;
}

.public-profile-identity h1.head {
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
	margin: 0;
}

.public-profile-identity__subline,
.public-profile-identity__location {
	color: var(--white-100) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
	position: relative;
	z-index: 2;
	margin: 0.35rem 0 0;
}

.public-profile-identity h1.head + .public-profile-identity__subline,
.public-profile-identity h1.head + .public-profile-identity__location {
	margin-top: 0.25rem;
}

.public-profile-identity__subline + .public-profile-identity__location {
	margin-top: 0.2rem;
}

.public-profile-hint {
	margin-top: 1.5rem;
}

.public-profile-tabs-wrap {
	display: flow-root;
	margin-top: -1px;
}

.public-profile-view .public-profile-tabs.account-nav,
#page ul.public-profile-tabs.account-nav {
	position: relative;
	z-index: 4;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	line-height: normal;
	margin: 0 0 3rem 0;
}
#page ul.public-profile-tabs.account-nav > li{
	float: none;
	display: block;
	align-self: flex-start;
	margin: 0;
	padding: 0;
}
#page ul.public-profile-tabs.account-nav > li > a,
#page ul.public-profile-tabs.account-nav .public-profile-admin-menu__trigger{
	display: block;
	line-height: 1.2;
	margin: 0;
	padding-top: 1rem;
	padding-bottom: 1rem;
}
#page ul.public-profile-tabs.account-nav .public-profile-admin-menu__trigger{
	padding-left: 1rem;
	padding-right: 2.35rem;
}
.public-profile-admin-menu{
	position: relative;
	display: block;
	align-self: flex-start;
	margin: 0;
	padding: 0;
}
.public-profile-admin-menu__trigger{
	padding: 1rem 2.2rem 1rem 1rem;
	color: var(--color);
	background-color: var(--white-900);
	border: 0;
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
	text-decoration: none;
	margin: 0;
	box-shadow: inset 0 2px 4px -2px var(--dark-bg-900);
	cursor: pointer;
	position: relative;
	user-select: none;
	font: inherit;
	white-space: nowrap;
	top: 0;
	appearance: none;
	-webkit-appearance: none;
}
.public-profile-admin-menu__trigger::after{
	content: "";
	position: absolute;
	right: .85rem;
	top: 50%;
	width: .45rem;
	height: .45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-58%) rotate(45deg);
	transition: transform .16s ease;
	pointer-events: none;
}
.public-profile-admin-menu__trigger[aria-expanded="true"]{
	background-color: var(--white-800);
	box-shadow: inset 0 2px 5px -1px var(--dark-bg-900);
}
.public-profile-admin-menu__trigger[aria-expanded="true"]::after{
	transform: translateY(-38%) rotate(-135deg);
}
.public-profile-admin-menu__list{
	position: absolute;
	left: 0;
	top: calc(100% + .35rem);
	min-width: 15.6rem;
	background: var(--background);
	border: 1px solid var(--white-700);
	border-radius: .45rem;
	box-shadow: 0 10px 26px -20px rgba(0,0,0,.45);
	padding: .25rem 0;
	display: grid;
	gap: 0;
	z-index: 14;
}
.public-profile-admin-menu__list[hidden]{
	display: none;
}
.public-profile-admin-menu__item{
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	text-align: left;
	padding: .56rem 1rem;
	border-radius: 0;
	text-decoration: none !important;
	color: var(--color);
	font-size: 1.04rem;
	line-height: 1.2;
	cursor: pointer;
}
.public-profile-admin-menu__item:hover,
.public-profile-admin-menu__item:focus-visible{
	background: var(--nav-hover);
	outline: 0;
}

:root:not([data-theme="light"]) .public-profile-admin-menu__trigger,
:root[data-theme="dark"] .public-profile-admin-menu__trigger{
	background-color: var(--dark-900);
	box-shadow: inset 0 2px 4px -2px #000;
}

:root:not([data-theme="light"]) .public-profile-admin-menu__trigger[aria-expanded="true"],
:root[data-theme="dark"] .public-profile-admin-menu__trigger[aria-expanded="true"]{
	background-color: var(--dark-700);
	box-shadow: inset 0 2px 5px -1px #000;
}

:root:not([data-theme="light"]) .public-profile-admin-menu__list,
:root[data-theme="dark"] .public-profile-admin-menu__list{
	border-color: var(--dark-700);
}

body.public-profile-admin-modal-open {
	overflow: hidden;
}

.public-profile-admin-modal[hidden] {
	display: none;
}

.public-profile-admin-modal {
	position: fixed;
	inset: 0;
	display: grid;
	align-items: center;
	justify-items: center;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.54);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 1500;
}

.public-profile-admin-modal__panel {
	width: min(100%, 36rem);
	max-height: min(92vh, 44rem);
	overflow-y: auto;
}

.public-profile-admin-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .8rem;
}

.public-profile-admin-modal__head h3.head {
	margin: 0;
}

.public-profile-admin-modal__close {
	border: 1px solid var(--white-bg-700);
	background: var(--white-bg-800);
	color: var(--color);
	border-radius: .45rem;
	width: 2rem;
	height: 2rem;
	line-height: 1;
	font-size: 1.2rem;
	cursor: pointer;
}

.public-profile-admin-modal textarea {
	background: var(--white-bg-900);
	border: 1px solid var(--white-700);
	color: var(--color);
	width: 100%;
	min-height: 8.2rem;
	resize: vertical;
	box-shadow: inset -1px -1px 2px var(--white-800),
							inset 1px 1px 2px var(--color-800),
							0 0 0 1px transparent;
}

.public-profile-admin-modal textarea:focus{
	outline: none;
	box-shadow: inset -1px -1px 2px var(--white-500),
							inset 1px 1px 2px var(--white-500),
							0 0 0 2px color-mix(in srgb, var(--color-bg-700) 45%, transparent);
}

.public-profile-admin-modal textarea::placeholder{
	color: var(--dark-300);
	opacity: .95;
}

.public-profile-admin-modal__actions {
	margin-top: .7rem;
	display: flex;
	justify-content: flex-end;
}

:root:not([data-theme="light"]) .public-profile-admin-modal__close,
:root[data-theme="dark"] .public-profile-admin-modal__close{
	border-color: var(--dark-700);
	background: var(--dark-800);
	color: var(--white-100);
}

:root:not([data-theme="light"]) .public-profile-admin-modal textarea,
:root[data-theme="dark"] .public-profile-admin-modal textarea{
	background: var(--dark-bg-900);
	border-color: var(--dark-700);
	color: var(--white-100);
	box-shadow: inset -1px -1px 2px var(--color-500),
							inset 1px 1px 2px var(--dark),
							0 0 0 1px transparent;
}

:root:not([data-theme="light"]) .public-profile-admin-modal textarea:focus,
:root[data-theme="dark"] .public-profile-admin-modal textarea:focus{
	box-shadow: inset -1px -1px 2px var(--color-900),
							inset 1px 1px 2px var(--dark),
							0 0 0 2px color-mix(in srgb, var(--color-bg-700) 58%, transparent);
}

:root:not([data-theme="light"]) .public-profile-admin-modal textarea::placeholder,
:root[data-theme="dark"] .public-profile-admin-modal textarea::placeholder{
	color: var(--dark-100);
}

.public-profile-tab-content {
	margin-top: 1.5rem;
	display: grid;
	gap: 0.8rem;
}

.public-profile-hint,
#public-profile-tab-content {
	clear: both;
}

.public-profile-post h3.head {
	font-size: 1.4rem;
	margin-bottom: 0.35rem;
}

.public-profile-details {
	margin-top: 1rem;
	display: grid;
	gap: 0.55rem;
}

.public-profile-details__row {
	display: grid;
	grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
	gap: 0.55rem;
}

.public-profile-details dt {
	opacity: 0.72;
	font-weight: 600;
}

.public-profile-details dd {
	margin: 0;
	word-break: break-word;
}
.public-profile-contact-label{
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.public-profile-contact-label__icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.7rem;
	height: 1.2rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: #dbe2ee;
	color: #26324d;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}
.public-profile-contact-form-wrap{
	border-top: 1px solid var(--white-800);
	padding-top: 0.9rem;
}
.public-profile-contact-form{
	display: grid;
	gap: 0.6rem;
	width: 100%;
}
.public-profile-contact-form fieldset{
	margin: 0;
}
.public-profile-contact-form input,
.public-profile-contact-form textarea{
	width: 100%;
	min-height: 7.5rem;
}
.public-profile-contact-form input{
	min-height: 2.6rem;
}
.public-profile-contact-form__label{
	opacity: 0.68;
	font-weight: 500;
}
.public-profile-contact-form__honeypot{
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.public-profile-social-wrap{
	border-top: 1px solid var(--white-800);
	padding-top: 0.8rem;
	margin-top: 0.9rem;
}
.public-profile-social-links{
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.55rem;
}
.public-profile-social-link{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	border-radius: 999px;
	background: var(--white-900);
	border: 1px solid var(--white-700);
	font-size: 0.72rem;
	font-weight: 700;
	text-decoration: none;
}
.public-profile-social-link:hover{
	background: var(--white-800);
}

.public-profile-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.public-profile-gallery__item {
	margin: 0;
}

.public-profile-gallery__item img {
	width: 100%;
	height: 13rem;
	object-fit: cover;
	border-radius: 0.4rem;
	display: block;
}

.public-profile-gallery__item figcaption {
	margin-top: 0.45rem;
	font-size: 0.92rem;
	opacity: 0.78;
}

.public-profile-contact {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr);
	gap: 0.8rem;
}

.public-profile-contact__map-frame {
	display: block;
	width: 100%;
	height: 24rem;
	border: 0;
	border-radius: 0.4rem;
}

.public-profile-contact__map-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 24rem;
	border-radius: 0.4rem;
	background: linear-gradient(135deg, #f0f1f2 0%, #d4dae0 100%);
}

.public-profile-contact__details .public-profile-details {
	margin-top: 0.7rem;
}

@media (max-width: 880px) {
	.public-profile-hero,
	.public-profile-hero__grid {
		min-height: 21rem;
	}

	.public-profile-hero {
		margin-top: -9.5rem;
	}

	.public-profile-hero__grid {
		padding-bottom: 1rem;
	}

	.public-profile-hero__overlay {
		background: linear-gradient(180deg, rgba(20, 0, 0, 0.18) 70%, rgba(0, 0, 0, 0.62) 100%);
	}

	.public-profile-identity {
		align-items: center;
		min-height: 5rem;
	}

	.public-profile-identity::before {
		mask-image: linear-gradient(
			90deg,
			transparent 0,
			transparent calc(var(--breackout-size) * 0.05),
			#000 calc(var(--breackout-size) * 0.8),
			#000 75%,
			transparent 100%
		);
		-webkit-mask-image: linear-gradient(
			90deg,
			transparent 0,
			transparent calc(var(--breackout-size) * 0.05),
			#000 calc(var(--breackout-size) * 0.8),
			#000 75%,
			transparent 100%
		);
	}

	.public-profile-identity__avatar {
		width: 5rem;
		height: 5rem;
	}

	.public-profile-gallery {
		grid-template-columns: 1fr;
	}

	.public-profile-gallery__item img {
		height: 11rem;
	}

	.public-profile-contact {
		grid-template-columns: 1fr;
	}

	.public-profile-contact__map-frame,
	.public-profile-contact__map-placeholder {
		min-height: 16rem;
		height: 16rem;
	}

	.public-profile-details__row {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}
}

@media (max-width: 680px) {
	.public-profile-view .public-profile-tabs.account-nav,
	#page ul.public-profile-tabs.account-nav {
		display: block !important;
		white-space: nowrap;
		overflow-x: auto;
		margin: 0 0 1rem 0;
	}

	#page ul.public-profile-tabs.account-nav li {
		float: none;
		display: inline-block;
		vertical-align: top;
	}
	.public-profile-admin-menu__list{
		left: auto;
		right: 0;
		min-width: 13rem;
	}

	.public-profile-admin-modal {
		padding: .6rem;
	}

	.public-profile-admin-modal__panel {
		width: 100%;
	}
}

/* === CSS: zz-anim-preview.css [core] === */
#slow-anim * {
  transition-duration: 2.5s !important;
}