/* ==========================================================================
   babyforum.at — Consolidated Design Tokens & Styles
   Merged from themes/default/design/style.css + themes/babyforum/design/custom.css
   ========================================================================== */

:root {
  /* ── Colours ─────────────────────────────────────────────────── */
  --color-primary: #344254;
  --color-accent: #EA6D86;
  --color-accent-light: #ffeaee;
  --color-link: #4fc6de;
  --color-link-light: #ddf5fb;
  --color-text: #2b2e3d;
  --color-surface: #ffffff;
  --color-bg: #f6f9fc;
  --color-border: #BFCAD9;
  --color-muted: #7e96b3;

  /* Muted opacity scale */
  --color-muted-5: rgba(126, 150, 179, 0.05);
  --color-muted-10: rgba(126, 150, 179, 0.1);
  --color-muted-12: rgba(126, 150, 179, 0.12);
  --color-muted-15: rgba(126, 150, 179, 0.15);
  --color-muted-20: rgba(126, 150, 179, 0.2);
  --color-muted-30: rgba(126, 150, 179, 0.3);
  --color-muted-50: rgba(126, 150, 179, 0.5);
  --color-muted-60: rgba(126, 150, 179, 0.6);
  --color-muted-75: rgba(126, 150, 179, 0.75);

  /* Primary opacity scale */
  --color-primary-10: rgba(50, 66, 93, 0.1);
  --color-primary-8: rgba(50, 66, 93, 0.08);
  --color-primary-15: rgba(50, 66, 93, 0.15);
  --color-primary-55: rgba(50, 66, 93, 0.55);
  --color-primary-60: rgba(50, 66, 93, 0.6);
  --color-primary-70: rgba(50, 66, 93, 0.7);

  /* Category pastels */
  --cat-yellow: #faf2da;
  --cat-pink: #ffeaee;
  --cat-red: #ffe4e4;
  --cat-peach: #fbe5d8;
  --cat-purple: #e5e1ff;
  --cat-magenta: #f9ddf1;
  --cat-green: #ebf5d8;
  --cat-mint: #e2f4e3;
  --cat-blue: #daedff;

  /* ── Typography ──────────────────────────────────────────────── */
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Fraunces', serif;

  --text-xs: 0.7rem;
  --text-sm: 0.8rem;
  --text-base: 0.9rem;
  --text-md: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.8rem;
  --text-hero: 5rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.4em;
  --leading-normal: 1.5rem;
  --leading-relaxed: 1.8rem;

  /* ── Border Radius ───────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(50, 66, 93, 0.06);
  --shadow-md: 0 5px 12px rgba(56, 65, 103, 0.1);
  --shadow-lg: 0 15px 35px rgba(50, 66, 93, 0.1);

  /* ── Transitions ─────────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.5s ease;
  --fadein-duration: 0.25s;

  /* ── Z-index scale ───────────────────────────────────────────── */
  --z-local: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-header: 200;
  --z-fixed: 300;          /* GuestBox, BoxFilter, scrollToTop */
  --z-drawer-backdrop: 400;
  --z-drawer: 410;
  --z-drawer-toggle: 420;
  --z-modal-backdrop: 500;
  --z-modal: 510;
  --z-toast: 600;
  --z-app-overlay: 700;    /* Messenger drawer */
  --z-tooltip: 800;

  /* ── Semantic (shared by frontend extensions) ───────────────── */
  --color-success: #2f7d43;
  --color-success-bg: #e2f4e3;
  --color-warning: #b8860b;
  --color-warning-bg: #fff8e8;
  --color-danger: #e23d5a;
  --color-danger-strong: #c92a45;
  --color-danger-bg: #ffeaee;
  --color-text-soft: #5b6b80;
}

/* ── Reset ─────────────────────────────────────────────────────── */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}
body { line-height: 1; color: #000; background: #fff; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
blockquote, q { quotes: "" ""; }

/* ── Vanilla Framework Structural Rules ────────────────────────── */
body.NoPanel #Panel, body.Entry #Panel, body.Conversations.add #Panel, body.Vanilla.Post #Panel { display: none; }
body.NoPanel #Content, body.Conversations.add #Content, body.Vanilla.Post #Content { margin: 0; }
a { text-decoration: none; }
.Hidden { display: none; }
.Invisible { opacity: 0; }
.ClearFix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.ClearFix { display: block; }
.nowrap { white-space: nowrap; }

/* Sprite / icon containers — hide label text, show background icon only */
.OptionsTitle { user-select: none; height: 18px; width: 21px; padding: 0; overflow: hidden; display: inline-block; vertical-align: top; line-height: 999px; font-size: 0; cursor: pointer; }
.Item .OptionsTitle { visibility: hidden; }
.Item:hover .OptionsTitle, .Item.Open .OptionsTitle { visibility: visible; }
a.Bookmark, a.Bookmarked, a.Bookmarking { display: inline-block; height: 18px; width: 18px; vertical-align: top; overflow: hidden; text-indent: -1000px; font-size: 1px; }
.Sprite16 { display: inline-block; height: 16px; width: 16px; vertical-align: top; overflow: hidden; }

/* Admin checkbox */
.AdminCheck { vertical-align: top; line-height: 1; }
.ControlOptions .AdminCheck { display: block; padding: 6px 8px 0; }
.Opts .ControlOptions .AdminCheck { padding: 0; }
td.CheckBoxColumn { text-align: center; }

/* MeBox / MeMenu (header flyout) */
.MeBox-SignIn { display: none; }
.Profile .MeBox { display: none; }
.MeMenu { line-height: 24px; }
.MeMenu em { display: none; }
.MeButton { padding: 3px 5px; border: solid 1px transparent; position: relative; line-height: 1; display: inline-block; }
.MeButton .Alert { position: absolute; top: -2px; right: -1px; font-size: 9px; line-height: 1; padding: 2px; }
.MeBox .Flyout { right: inherit; left: -4px; top: 150%; }
.MeBox.FlyoutRight .Flyout { left: inherit; right: -4px; }

/* Button base padding (themed buttons override these) */
.Button { display: inline-block; cursor: pointer; padding: 4px 6px; line-height: 1; white-space: nowrap; }
.Button.Hidden { display: none; }
.Button.Disabled { opacity: .5; }
.BigButton { display: block; text-align: center; margin: 0 0 10px; padding: 8px 10px; }
.Buttons { margin-top: 10px; }

/* Default-hidden UI chrome (revealed contextually or by JS) */
.PanelColumn .Options { display: none; }
.JustNew { display: none; }
.MeAction .Message { display: none; }
.Form-Header .Username { display: none; }
.ContentColumn .About h2 { display: none; }
.DataList a.Delete { visibility: hidden; }
.Item:hover a.Delete { visibility: visible; }

/* Author / activity / notification item layout */
.Author .PhotoWrap { margin: 0 9px 3px 0; float: left; }
.CommentInfo { line-height: 1.5; }
.Item .AuthorInfo { font-size: 11px; }
.Activities ul.DataList { margin-left: 50px; }
.Activities .ItemContent { margin: 0 0 0 53px; }
.Activities .ActivityComments .ItemContent { margin: 0 0 0 42px; }
.Condensed .Title, .Condensed a.Title { display: inline; padding: 0; }
.Condensed .Excerpt { display: inline; }

/* Dropdowns & Flyouts — hidden by default, shown via .Open */
.ButtonGroup { position: relative; display: inline-block; }
.ButtonGroup .Dropdown { display: none; font-size: 12px; position: absolute; top: 100%; left: 0; margin-top: 1px; z-index: var(--z-dropdown); }
.ButtonGroup.DropRight .Dropdown { right: 0; left: auto; }
.ButtonGroup.Open .Dropdown { display: block; }
.ToggleFlyout { position: relative; }
.ToggleFlyout.Open { z-index: var(--z-dropdown); }
.ToggleFlyout .Flyout { position: absolute; top: 100%; display: none; }
.ToggleFlyout.Open .Flyout { display: block; }
.OptionsMenu .Flyout { top: 18px; right: -9px; }
.SelectFlyout .Flyout:before, .SelectFlyout .Flyout:after { display: none; }

/* Panel layout */
#Panel .ButtonGroup .Dropdown { right: 0; }
.ProfileOptions .ButtonGroup .Dropdown { left: auto; right: 0; }
#Panel .PanelInfo li { text-align: left; }
#Panel .FilterMenu li, .PanelInfo li { border-bottom: 1px solid rgba(0,0,0,0.1); padding: 2px 4px; }
#Panel .FilterMenu li:first-child, .PanelInfo li:first-child { border-top: 1px solid rgba(0,0,0,0.1); }
#Panel .FilterMenu .Aside, .PanelInfo .Aside, .Item .Aside { float: right; }
.PanelInfo .Heading { font-weight: 700; }
.PanelInfo li strong { font-weight: 400; text-align: left; }
#Panel .FilterMenu .Active, .PanelInfo .Active { background: rgba(0,0,0,0.03); font-weight: 700; }

/* PanelCategories depth indentation */
.PanelCategories .Depth2 { padding-left: 8px; }
.PanelCategories .Depth3 { padding-left: 12px; }
.PanelCategories .Depth4 { padding-left: 16px; }
.PanelCategories .Depth5 { padding-left: 20px; }
.PanelCategories .Depth6 { padding-left: 24px; }

/* DataTable layout */
.DataTable { width: 100%; table-layout: fixed; }
.DataTable td { padding: 4px; border-bottom: 1px solid rgba(0,0,0,0.1); vertical-align: top; }
.DataTable thead td { font-weight: 700; vertical-align: bottom; }
td.BigCount { width: 90px; text-align: center; font-weight: 700; }
.DiscussionsTable td.BigCount { width: 70px; }
tbody td.BigCount { font-size: 16px; padding: 8px 4px; }

/* DataList layout */
.DataList .Item, .NarrowList .Item { margin: 0; padding: 8px; border: 0 solid rgba(0,0,0,0.1); border-bottom-width: 1px; position: relative; }
.Item-Icon { float: left; margin: 0 10px 10px 0; }
.Item h2, .Item h3, .Item h4, .Item h5 { margin: 0; }
.DataList .Title { font-size: 14px; display: block; font-weight: 700; margin: 0; }

/* Menu items */
.MenuItems { line-height: 100%; font-size: 11px; border: 1px solid #999; border-radius: 2px; background: #fff; padding: 5px 0; box-shadow: 0 5px 10px rgba(0,0,0,0.2); }
.MenuItems a, .MenuItems a:link, .MenuItems a:visited, .MenuItems a:active { display: block; text-decoration: none; white-space: nowrap; color: #333 !important; padding: 3px 15px; line-height: 18px; }
.MenuItems a:hover { color: #fff !important; text-decoration: none; background-color: #004D9F !important; }
.MenuItems hr { border: 0; border-bottom: 1px solid #ddd; }

/* Inform messages dismiss */
.InformMessages .InformMessage a.Close { display: none; }
.InformMessages .InformMessage:hover a.Close { display: block; }

/* Item read states */
.Item.Read { opacity: .9; }
.Item.Read:hover { opacity: 1; }
.Item.Read .Title, .Item.Read .BlockTitle { font-weight: 400; }

/* Form elements */
/* Keep all text inputs at >=16px: iOS/Android auto-zoom the whole page on
   focus when a form control renders below 16px, which is what made tapping
   into any textarea (comment box, PM composer, search, etc.) jump-zoom the
   viewport and made it hard to zoom back out. */
textarea, input, select {
	font-size: 16px;
}
textarea.TextBox { width: 500px; height: 100px; min-height: 100px; }
.TextBoxWrapper { width: auto;}
.TextBoxWrapper textarea, .TextBoxWrapper input { width: 100%; }
#Popup textarea.TextBox { width: 100%; }
input.BigInput { width: 100%; }

/* Pager */
.Pager { font-weight: 700; float: right; }
.Pager a, .Pager span { display: inline-block; margin: 0 3px; }
.MoreWrap { float: right; }

/* Photos */
.PhotoWrap { position: relative; line-height: 1; }
.ProfilePhoto { height: 40px; width: 40px; vertical-align: bottom; }
.ProfilePhotoSmall { height: 24px; width: 24px; vertical-align: bottom; }
.ProfilePhotoMedium { height: 40px; width: 40px; }
.ProfilePhotoLarge { width: 200px; }

/* Overlay / Popup */
.Overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--z-modal-backdrop); }
div.Popup { position: absolute; width: 100%; top: 0; left: 0; text-align: center; }
div.Popup .Border { margin: 0 auto; text-align: left; position: relative; max-width: 600px; display: inline-block; }
div.Popup .Body { background: #fff; padding: 10px; float: left; }
a.Close { position: absolute; top: 16px; right: 20px; line-height: 1; color: #000; cursor: pointer; font-family: arial; font-size: 22px; font-weight: 700; padding: 0; }

/* Errors */
.Errors ul { border: 1px solid #a00 !important; background: #d50a0a !important; padding: 6px 10px; display: block; border-radius: 2px; }
.Errors ul li { color: #fff !important; background: #d50a0a !important; text-align: left; }
.Errors a { color: #fff; text-decoration: underline; }

/* InformMessages positioning */
.InformMessages { text-align: left; position: fixed; top: auto; bottom: 0; left: 0; z-index: var(--z-toast); margin: 0; padding: 0; list-style: none; font-size: 12px; display: block; width: auto; }


/* ── Theme Styles ──────────────────────────────────────────────── */

.webinar { padding: 8px 20px 10px 45px; margin-right: 0; color: #FFF; box-shadow: 0 3px 6px 0 rgb(20 20 96 / 10%), inset 0 -4px 0 0 #dd5f5f; border: none;
background: #ff7979 url(/themes/babyforum/design/images/iconStreamLiveWhite.svg) 15px 8px no-repeat;
background-size: 3%; border-radius: var(--radius-full); display: block; margin-top: 30px; margin-bottom: -30px;}
.webinar br {display: none;}
.webinar:hover {color: #000;}

.banner-top {text-align: center; max-width: 1070px; height: auto; margin: -30px auto 0;}
.bannerTop {margin: -10px 0 25px 0; text-align: center; }

/* Static Banner */
.linkwrap {position:relative; display:inline-block;}
.blocker {position:absolute; height:100%; width:100%; z-index:1; background: transparent;}
.linkwrap iframe {z-index: 2; overflow:hidden; border: none; pointer-events: auto;}

* {margin: 0; padding: 0; box-sizing: border-box;}
body {
	margin: 0;
	font-family: var(--font-body);
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIGhlaWdodD0iMjQxIiB2aWV3Qm94PSIwIDAgMTE3MSAyNDEiIHdpZHRoPSIxMTcxIj48ZyBmaWx0ZXI9InVybCgjZmlsdGVyMF9mKSIgb3BhY2l0eT0iMC4xIj48cGF0aCBkPSJNNzMxLTE3OWMtMTM1IDIxLjctMjE1IDEwNS0xNzkgMTg2IDM2LjIgODEuMyAxNzUgMTI5IDMxMCAxMDcgMTM1LTIxLjcgMjE1LTEwNSAxNzktMTg2LTM2LjItODEuMy0xNzUtMTI5LTMxMC0xMDd6IiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXIpIi8+PHBhdGggZD0iTTM3OCAxMTRjMTQyIDAgMjU4LTY4LjIgMjU4LTE1MiAwLTg0LjEtMTE1LTE1Mi0yNTgtMTUyLTE0MiAwLTI1OCA2OC4yLTI1OCAxNTIgMCA4NC4xIDExNSAxNTIgMjU4IDE1MnoiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcikiLz48L2c+PGRlZnM+PGZpbHRlciBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIgaGVpZ2h0PSI1NTAiIGlkPSJmaWx0ZXIwX2YiIHdpZHRoPSIxMTcwIiB4PSIwIiB5PSItMzEwIj48ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNjAiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1ciIvPjwvZmlsdGVyPjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhciIgeDE9IjU2NyIgeTE9IjEuMDMiIHgyPSIxMDI5IiB5Mj0iNjQuNiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiMwMDFBRkYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM2RUU1QzIiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQxX2xpbmVhciIgeDE9IjE1NSIgeTE9Ii0xMS4wIiB4Mj0iNTExIiB5Mj0iLTE2MiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkM4M0EiLz48c3RvcCBvZmZzZXQ9IjAuNTAiIHN0b3AtY29sb3I9IiNGRjAwOEEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM2MTAwRkYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4=");
	background-repeat: no-repeat;
	background-size: 100%;
	background-color: var(--color-bg);
}
h1, h2, h3, h4, h5, h6 {font-family: var(--font-heading);}
iframe {border: none;}
figure {margin: 0;}

p, div, td {font-family: var(--font-body); font-size: var(--text-base); font-style: normal; line-height: 1.4em; color: var(--color-text);}
.clear {clear: both; visibility: hidden; height: 0;}
.center {text-align: center;}
.marginAuto {margin: 0 auto;}
sup {vertical-align: super; font-size: 55%;}

.scrollToTop, .profileInHeader a {z-index: var(--z-fixed); width: 30px; height: 30px; padding: 10px; border-radius: var(--radius-full); text-align: center; font-weight: var(--weight-bold); color: #FFF; text-decoration: none; position: fixed; bottom: calc(23px + env(safe-area-inset-bottom)); right: calc(21px + env(safe-area-inset-right)); display: none; border: 2px solid var(--color-primary); background: #FFF url(../../_icons/arrowUpDark.svg) center center no-repeat; background-size: 16px !important;}
	.scrollToTop {z-index: var(--z-fixed);}
	.scrollToTop:hover {text-decoration:none;}
	.profileInHeader a {bottom: 35px; display: block; background: var(--color-primary) url(/themes/_icons/SpNotifications.svg) 5px 5px no-repeat; background-size: 100%; display: none;}
	.profileInHeader a span {background: var(--color-accent); left: 14px; top: -11px; border-radius: var(--radius-full); width: 25px; height: 25px; text-align: center; font-size: 0.7em; z-index: var(--z-raised); position: absolute; padding: 2px 0;}


#Panel .roundpicture {margin-top: 10px; display: block;}
#Panel .roundpicture img {border-radius: var(--radius-sm);}

input[type=submit] {-webkit-appearance: none;}

/* mastermenu */

.mastermenu {position: relative; margin: 0 auto; text-align: left; white-space: nowrap; background: #FFF;}
	.mastermenu ul {margin: 0 auto 0 auto;}
	.mastermenu li {	display: inline-block;
		color: #FFF;
		margin: 0 3vw 0 0;
		vertical-align: top;
		margin-top: 20px;	transition: all var(--transition-base);}
	.mastermenu li > a:link, .mastermenu li > a:visited {height: 50px; display: table-cell; vertical-align: middle; color: var(--color-primary);}
	.mastermenu li > a em {position: relative; top: 35px; font-style: normal; font-size: var(--text-base); padding-bottom: 6px;}
	.mastermenu li > a:hover em {color: var(--color-accent); padding-bottom: 6px;}

.isUser .headerLogo {z-index: var(--z-header);}

body > #Frame > .Head {padding: 0; margin: 0; height: 0px;}

p, div {font-size: var(--text-base); font-style: normal; line-height: 1.4em; color: var(--color-text);}


#Body {font-family: var(--font-body); padding-top: 110px; margin: 0 11vw;}
	.bodyInside {display: flex; justify-content: center; flex-wrap: initial;}

#header {background: none;}
	#header .inside {max-width: 1085px; height: 5px; margin: 0 auto; padding: 0; position: relative;}

#Panel {width: 300px; margin-top: 50px; margin-left: 40px;}
	#Content {flex: 1;}
	.PanelColumn {min-width: 300px; max-width: 300px; }
	#Body .ContentColumn {animation: fadein var(--fadein-duration); flex: 1;}

h1 {font-family: var(--font-heading);}

.DataList.Discussions {width: 100%; clear: both; position: relative;}

.breadcrumbu {text-align: left;}
	.BreadcrumbsWrapper {margin: 0px auto 30px auto;}
	.breadcrumbu a {color: var(--color-muted-50); letter-spacing: 0px; display: inline-block; margin-right: 7px; font-size: var(--text-sm);}
	.breadcrumbu a:hover {color: #000;}
	.Crumb {color: var(--color-border);
		font-weight: var(--weight-bold);
		margin: 0px 3px 0 0;
		font-size: var(--text-xs);
		position: relative;
		top: -1px;}

	#footer .inside {max-width: 1085px; text-align: center; padding: 30px 0 50px; margin: 0 auto;}

.clear {clear: both; visibility: hidden; height: 0; border: none;}

a {color: var(--color-link);}
a:hover {color: var(--color-accent);}
input, button {font-family: var(--font-body);}
input.submit {-webkit-appearance: none;}

.Box {margin: 0; font-size: var(--text-md);}
	.Box p {font-size: var(--text-md);}
	.Box h4, .aktionen h4, #footer h4 {text-align: left;margin-bottom: 10px;padding-left: 8px;font-weight: var(--weight-normal);line-height: 2rem;color: var(--color-muted-50);letter-spacing: 0px;margin-top: 38px;font-size: var(--text-base);}
.aktionen h4 {margin-top: 5px}
.nomargin h4 {
	margin-top: 0;
}

.Box h4, .aktionen h4, h2.CommentHeading, h2.H {
	text-align: left;
	margin-bottom: 10px;
	line-height: 2rem;
	letter-spacing: 0px;
	margin-top: 10px;
	color: var(--color-primary);
    background: #ffffff;
    border-radius: 5px 20px;
    width: fit-content;
    padding: 0px 15px;
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
}

h2.CommentHeading {text-align: left !important; margin-bottom: 20px !important; color: var(--color-muted-75) !important;}

/* AdBoxes */

#produkttestBanner {box-shadow: var(--shadow-md); line-height: 0; border-radius: var(--radius-md); animation: fadein var(--fadein-duration);}
.produkttestbanner img {border-radius: 5px;}

.adBox {margin-bottom: 30px; border-radius: var(--radius-sm); text-align: center;}
	.adBox img {border-radius: var(--radius-sm);}
	.adBox p {margin-bottom: 25px;}
	.adBox.Three {background: #EECA66;}

	.themaDerWoche, .ratgeber {display: block; width: 100%; margin-bottom: 55px; border-radius: var(--radius-md); overflow: hidden;}
		.themaDerWoche img, .ratgeber img {display: block; width: 100%; border-radius: var(--radius-md); transition: transform 1s;}
		.themaDerWoche:hover img, .ratgeber:hover img {transform: scale(1.1) rotate(2deg); transition: transform 1s;}

.visualBoxes {height: 50px; border-radius: var(--radius-sm); text-align: center; background: rgba(52,152,219,.6); margin: 0 10px 20px 10px;}

/* Pagination */
.PageControls.Top {float: right;}

.Pager {margin-top: 5px; float: left;}
.PagerBefore {display: none;}
	.Pager a:link, .Pager a:visited {	color: var(--color-muted); border-radius: var(--radius-sm); padding: 3px 9px 3px 9px; text-align: center; min-width: 29px; font-weight: var(--weight-normal);opacity: 1; margin: 0 1px; font-size: var(--text-sm); background: #fff; margin: 0 3px;}
	.Pager a:hover {background: var(--color-primary); color: #fff; opacity: 1; transition: background var(--transition-base); }
	.Pager a.Highlight {background: var(--color-primary); color: #FFF;}
	.Pager a.Previous, .Pager a.Next {background: none;}
	.Pager a.Previous:hover, .Pager a.Next:hover {background: #FFF; color: var(--color-text);}

#PagerAfter {margin: 10px 0 40px;}

#vanilla_discussions_index.Section-DiscussionList #PagerBefore {display: none;}

/* OnTopBaby */

.SearchForm {background: #FFF; border-radius: var(--radius-sm); padding: 20px 20px 10px 20px;}
.SearchForm .SiteSearch.InputAndButton {width: 95%;}

.SiteSearch {display: inline-block; height: 40px; position: relative;}
.SiteSearch .InputBox {padding-left: 12px;}

.DataList.DataList-Search .Item {padding: 15px;margin-bottom: 18px;background: #FFF;box-shadow: 0 15px 35px 0 var(--color-primary-10);border: 1px solid #fff;}
	.DataList.DataList-Search .Item  h3 a:link, .DataList.DataList-Search .Item  h3 a:visited {color: rgb(42, 53, 57); font-size: var(--text-md); font-weight: var(--weight-medium); line-height: 1.4rem;}
	.DataList.DataList-Search .Item  h3 a:hover {color: #FF5055;}
	.DataList.DataList-Search .Item .ProfilePhoto {display: none;}
	.DataList.DataList-Search .Item .Meta {font-size: var(--text-base);
    margin: 3px 0 10px;}
    .DataList.DataList-Search .Item .Media {margin-bottom: 0;}
	.DataList.DataList-Search .Item .Summary {font-size: var(--text-base);}

.SiteSearch input {border: none; border-radius: var(--radius-sm); padding: 8px; background: #FFF; font-size: 16px; line-height: 28px;}
	.SiteSearch input:active, .SiteSearch input:focus {background-color: #F3F2EE;}
.SiteSearch input#Form_Go.Button {margin: 8px 8px 0 0; height: 15px;}
	.SiteSearch input#Form_Go.Button:hover {margin: 8px 8px 0 0; height: 15px; border: none; background:  #DDD url(images/sprites.png) 0 -196px no-repeat; padding: 4px;}
.SiteSearch .InputBox {font-size: 16px;}

.SearchNachricht {color: #FFF; font-size: 1em; display: inline-block; float: right; background: rgba(0, 0, 0, 0.3); padding: 4px 8px; border-radius: var(--radius-sm);}
	.SearchNachricht a:link, .SearchNachricht a:visited {padding: 3px 8px; color: var(--color-text); background: #FFF; border-radius: var(--radius-sm); }

/* Suchergebnisse */

.DataList.SearchResults {margin-top: 50px;}
	.DataList.SearchResults .MItem {line-height: 1.3rem; white-space: normal;}

.somebox {display: inline-block; padding: 5px; color: #FFF; margin-left: 30px;}
.userMeModule {margin: 15px 0;}
#Panel .userMeModule .WhoIs a.Username {display: none;}

.MeBox {margin: 5px 0 0 0; z-index: var(--z-dropdown); height: 47px; width: 220px; border-radius: var(--radius-sm); background: #fff;}
	.MeBox img {position: relative;}
	.MeBox .MeMenu {position: absolute;
		left: 50px;
		top: 3px;}
	.MeBox .ProfilePhoto.ProfilePhotoMedium {width: 46px; height: 46px; border-radius: 3px 0 0 3px;}


a.MeButton.FlyoutButton, a.MeButton.FlyoutButton:visited {margin-right: 10px; padding: 7px; background-position: center center; border-radius: var(--radius-full);}
	a.MeButton.FlyoutButton:hover {background: var(--color-primary);}

.WhoIs a.Username {font-size: 0rem; font-weight: var(--weight-normal); display: inline-block; width: 46px; height: 46px; white-space: nowrap; max-width: 46px; margin-left: -46px; overflow: hidden; }
#Panel .WhoIs a.Username {max-width: 100px;}

.ToggleFlyout .MeButton .Alert { background: var(--color-accent);left: 17px;top: 22px;border-radius: var(--radius-full);width: 25px;height: 25px;text-align: center;font-size: 0.7em;z-index: var(--z-raised);position: absolute;padding: 8px 0; color: var(--color-surface);}


/* Flyout */

.Flyout.FlyoutMenu {box-shadow: var(--shadow-md); border: none; border-radius: var(--radius-sm); position: absolute; top: 35px; right: 0; left: auto; max-width: calc(100vw - 16px); margin-left: 4px; animation: fadein var(--fadein-duration); background: #fff;}
.Flyout.FlyoutMenu a {color: var(--color-accent);}
.Flyout:after {border-bottom: 7px solid #fff;}
.Flyout .Author .PhotoWrap {float: right; margin: 0;}
.Flyout .Author .PhotoWrap img {border-radius: 50% !important; width: 28px;}
.Flyout.MenuItems.list-reset {top: 34px; left: 0px; width: 150px;}

.PopList {background: #fff;}
.PopList .Item {border-bottom: 1px solid var(--cat-blue); padding: 6px; margin-bottom: 3px; transition: background var(--transition-base);}
.PopList .ItemContent {margin: 0 6px; white-space: normal; cursor: pointer;}
.PopList .Item:hover {background: var(--color-muted-10);}
.PopList .Item .ProfilePhoto.ProfilePhotoMedium {border-radius: 50% !important; margin: 0; float: right;}
.PopList .Item.Title {    font-size: var(--text-base);
    padding: 5px 15px;
    background: var(--color-primary);
    color: #fff;
    font-weight: var(--weight-medium); border-radius: 4px 4px 0 0;
    display: flex; align-items: center;}
.PopList .Item.Title a {color: #FFF; order: 1; font-size: 0; width: 20px; height: 20px; flex-shrink: 0; display: block; opacity: 0.85;}
.PopList .Item.Title a:hover {opacity: 1;}
.PopList .Item.Title:hover {background: var(--color-primary);}
.PopList .Item.Title strong {font-weight: var(--weight-medium); flex: 1;}
.PopList .Item .Author.Photo {float: right;}

.PopList.Activities .Item.Title a {background: url(../../_icons/cogwheel.svg) center center no-repeat; background-size: contain;}
.PopList.Conversations .Item.Title a {background: url(../../_icons/plusCircle.svg) center center no-repeat; background-size: contain;}

.PopList .Item.Center {padding: 0 !important; border: none; margin-bottom: 0;display: flex;
    text-align: center;}
	.PopList .Item.Center a:link, .PopList .Item.Center a:visited {background: var(--color-accent); color: #FFF; width: 100%; border-radius: 0 0 5px 5px !important; padding: 8px 0;}
	.PopList .Item.Center a:hover {background: var(--color-text);}

.PopList.Activities .ItemContent, .PopList .Subject, .PopList .Excerpt, .PopList .Meta, .PopList a, .PopList p, .PopList div {font-size: var(--text-base);}

.Flyout.FlyoutMenu a {font-weight: var(--weight-normal);}

/* Discussion List */

h1.H {visibility: hidden; height: 0; width: 0; margin: 0; padding: 0; display: none; width: 100%; position: relative; left: -9999px;}
#vanilla_categories_index h1.H {display: block; visibility: visible; margin: 20px 0;}
#vanilla_categories_index .PageDescription, body.alltags .PageDescription {margin: 0px auto 50px 0;
	font-size: var(--text-base);
	padding: 0px;
	border-radius: var(--radius-sm);
	line-height: 1.5rem;
	color: #565b70;
	padding-left: 60px;
	width: 80%;
	text-align: left;
	font-family: sans-serif;
	background: transparent url(/themes/_icons/description.svg) 0px 3px no-repeat;}
#vanilla_categories_index .PageControls.Top {top: -83px;}

#vanilla_categories_index #PagerBefore {position: relative; top: 45px;}
#vanilla_categories_index .Pager {margin-top: 35px;}


.PageControls .NewDiscussion {display: none;}

/* - - DATA LIST ITEMs - - */

ul.DataList.Discussions {position: relative;}

ul.DataList li.Item {padding: 15px 15px 14px 16px; margin-bottom: 12px; background: #FFF; border: 1px solid #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md); display:block}

ul.DataList.Discussions li.Item {min-height: 80px;}

    ul.DataList.Discussions li.Item.Announcement {border-left: 0px solid var(--color-link); position: relative;}
    ul.DataList.Discussions li.Item:before {content: ""; display: block; width: 13px; height: 12px; position: absolute; border-radius: 7px 0 100% 0; left: -1px; top: -1px;}
		ul.DataList.Discussions li.Item.Participated:before {background: #a2dba2;}    
		ul.DataList.Discussions li.Item.Mine:before {background: rgba(251,242,79,1);}
		ul.DataList.Discussions li.Item.Bookmarked:before {background: #d60a7b;}
		ul.DataList.Discussions li.Item.Announcement:before {display: none;}
		ul.DataList.Discussions li.Item.Read.Announcement:before {background: var(--color-muted-60);}		
		ul.DataList.Discussions li.Item.Closed:before {background: #555;}	

li.Item.Announcement .Title, li.Item.Announcement .Meta, ul.DataList.Discussions li.Item.produkttest .Title, ul.DataList.Discussions li.Item.produkttest .ItemContent .Meta, ul.DataList.Discussions li.Item.umfrage .Title, ul.DataList.Discussions li.Item.umfrage .ItemContent .Meta {
			margin-left: 60px;
			width: 70% !important;
		}


.Tag.Tag-Announcement {
		background: none;
		border-bottom: none;
		border-radius: 0;
		position: relative;
		display: block;
		width: 55px;
		float: left;
		height: 64px;
		border-radius: var(--radius-md);
		top: 8px;
		left: 8px;
		position: absolute;
		text-indent: -9999px;
		background: #D2EFF6 url(../../_icons/announcementDark.svg) center center no-repeat;
	}

ul.DataList.Discussions li.Item.Announcement.Read .Tag.Tag-Announcement {
	background: rgb(209 218 227 / 100%) url(../../_icons/announcementWhite.svg) center center no-repeat;
}

ul.DataList.Discussions li.Item.produkttest:before {content: ""; background: none; border-bottom: none; border-radius: 0; position: relative; display: block; width: 55px; float: left; height: 64px; border-radius: var(--radius-md); top: 8px; left: 8px; position: absolute; text-indent: -9999px; background: #fad7de url(../../_icons/produkttestDark.svg) center center no-repeat;}
ul.DataList.Discussions li.Item.Read.produkttest:before {background: rgb(209 218 227 / 100%) url(../../_icons/produkttestWhite.svg) center center no-repeat;}
ul.DataList.Discussions li.Item.produkttest .Tag, ul.DataList.Discussions li.Item.umfrage .Tag {display: none;}

ul.DataList.Discussions li.Item.umfrage:before {content: ""; background: none; border-bottom: none; border-radius: 0; position: relative; display: block; width: 55px; float: left; height: 64px; border-radius: var(--radius-md); top: 8px; left: 8px; position: absolute; text-indent: -9999px; background: #e3fddd url(../../_icons/umfrageDark.svg) center center no-repeat;}
ul.DataList.Discussions li.Item.Read.umfrage:before {background: rgb(209 218 227 / 100%) url(../../_icons/umfrageWhite.svg) center center no-repeat;}


ul.DataList li.Item .Title {padding-left: 2px; margin-bottom: 5px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 80%;}
	ul.DataList li.Item .Title a {color: var(--color-primary);
		line-height: 1.4rem;
		width: 100%;
		display: block;
		font-family: var(--font-heading);
		font-size: var(--text-md);
		font-weight: var(--weight-medium);
		letter-spacing: 0.2px;
	-webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 95%);}
	ul.DataList li.Item .Title a:hover {color: var(--color-accent);}

ul.DataList li.Item.Read {background: rgba(255, 255, 255, 1); box-shadow: none;}
		ul.DataList li.Item.Read .Title a {color: var(--color-muted-60);}
		ul.DataList li.Item.Read .Title a:hover {color: var(--color-accent);}
		
		ul.DataList li.Item.Read h3 a, ul.DataList li.Item.Read .Excerpt a, ul.DataList li.Item.Read .Meta span {color: #fff;}
		ul.DataList li.Item.Read .Meta span {color: var(--color-muted-60);}
		ul.DataList li.Item.Read .Meta span.DMarker {background: none; color: var(--color-muted-60);}

		ul.DataList li.Item.Read:hover {background: rgba(255, 255, 255, 1);}
		ul.DataList li.Item.Read:hover .ItemContent.Discussion {opacity: 1;}
		
		ul.DataList li.Item.Read .StatsBox {opacity: 0.5;}
		ul.DataList li.Item .StatsBox {text-align: center; position: absolute; right: 4px; top: 16px; font-size: var(--text-sm); top: 0;
			height: 100%; background-color: #FFF; top: 4px; height: 90%; padding-top: 40px;
			border-radius: var(--radius-md);
		width: 50px; border: 1px solid #f1f4f9;}
		ul.DataList li.Item .StatsBox.ViewsBox {right: 60px;top: 4px; height: 90%; padding-top: 40px;}
			
			body.isUser ul.DataList li.Item .StatsBox {right: 37px;}
			body.isUser ul.DataList li.Item .StatsBox.ViewsBox {right: 91px;}	
				
		ul.DataList li.Item .Bookmark {top: 3px;}		

#vanilla_discussions_mine .DataList.Discussions {top: 15px;}

.ItemDiscussion .Meta, .DataList .Meta {margin-left: 2px;}

.CommentsWrap ul.DataList li.Item.Mine .Item-BodyWrap {border-left: 2px solid rgba(251,242,79,1); /* yellow */}		

.isOriginalPoster .Item-BodyWrap {border: 1px solid rgba(251,242,79,1); /* yellow */}

ul.DataList li.Item.Read .Meta span.Tag.Tag-Closed  {color: #FFF; background: #555;}
 ul.DataList li.Item.Read .ReactionCount  {color: var(--color-muted-60) !important; border-color: var(--color-muted-60);}

ul.DataList.Discussions .AdminCheck {position: absolute; top: 0px; right: 2px; opacity: 0.5;}

.HasNew {margin-right: 5px; font-size: var(--text-xs); padding: 3px 5px 3px 5px; font-weight: var(--weight-normal); background: #ffff75; color: #dea115;}
.HasNew .Number {position: relative; top: 0px;}
.ItemComment .AdminCheck {position: absolute; padding: 5px; right: 6px; top: 30px;}

.MItem {margin-left: 0; margin-right: 2%; color: var(--color-border); font-size: var(--text-sm);}
.MItem:hover {/* opacity: 1; */ }
.MItem a:link, .MItem a:visited {color: var(--color-border);}
.MItem a:hover {color: var(--color-primary);}
.MItem.MCount.ViewCount {visibility: hidden; width: 0; height: 0; margin: 0; padding: 0; position: absolute; right: 0;}


/* Options */

.Item .OptionsTitle, .OptionsTitle {visibility: visible;}
	.OptionsTitle {background: url(../../_icons/options.svg) center right no-repeat; background-size: 15px; opacity: 0.5;}    
	.OptionsTitle:hover {opacity: 1;}

ul.DataList li.Item .OptionsMenu {top: 0px; right: -10px;}
ul.DataList.Discussions .Item .OptionsTitle {position: relative; top: 2px;}

ul.DataList li.Item.ItemComment .OptionsMenu {right: 11px; top: 4px;}


.DataList.Discussions .Button-Options {position: relative; top: 25px; right:  -6px;}

.DataList.Discussions .OptionsMenu .Flyout {top: 47px; right: -17px;}


/* Discussion View */
.Discussion .PageTitle h1, body.alltags h1 {margin: 35px auto 45px; color: var(--color-primary); font-size: var(--text-2xl); line-height: 3rem; font-weight: var(--weight-medium); text-align: center; width: 75%;}

.MessageList.Discussion .Discussion {padding: 7px 15px 18px 15px; border-radius: var(--radius-sm); box-shadow: 0 15px 35px 0 var(--color-primary-10); background: #FFF; position: relative; 	border-bottom: 3px solid rgba(50 66 93 / 40%);}
.MessageList.Discussion .ItemDiscussion .Item-Body {padding: 0 8px;}
.Item-Header .ProfilePhoto.ProfilePhotoMedium, .Comments .Item-Header a img {border-radius: var(--radius-full); background: var(--color-border);}
.Item-Header .Meta.DiscussionMeta {position: absolute; top: 4px; right: 52px; width: 30%; text-align: right;}
.Item-Header .Category, .MessageList.Discussion .ItemDiscussion .Item-Header .IPAddress {display: none;}
.Item-Header .DateCreated {position: absolute; top: 21px; font-size: var(--text-xs);}

.Item-Body, .MessageList.DataList.Comments {background: none;}
.ItemDiscussion .Item-Body {padding: 0 15px 15px 15px;}
.ItemDiscussion .Item-Body .Message {font-size: var(--text-base); line-height: 1.5rem; margin-top: 20px;}
.Message {font-size: var(--text-base); line-height: 1.5rem; color: var(--color-primary);}
	.Message img {border-radius: var(--radius-sm); margin: 15px 0 10px;}
	.Message a:link, .Message a:visited {color: var(--color-accent); background: transparent; border-bottom: 1px solid var(--cat-red); box-shadow: inset 0 -1px 0 var(--cat-red); font-weight: var(--weight-normal);}
	.Message a:hover {color: var(--color-text);}
	
	#dashboard_profile_comments .Message {margin: 0 0 5px 0;}

.MessageList a.Bookmark, .MessageList a.Bookmarked, .MessageList a.Bookmarking {top: 0 !important; position: absolute;
right: 8px;}

.DataList .Item, .NarrowList .Item {background: transparent; border-radius: var(--radius-sm); border: none;}

.Item-Header a.Username {font-weight: var(--weight-normal); position: relative; top: 6px; left: 2px; font-size: var(--text-base); color: var(--color-primary);}

blockquote {margin: 1em 0 1.2em 0; background: rgba(40, 94, 212, 0.16); padding: 6px 12px 6px 12px; border-radius: 0 0 3px 3px;}
	blockquote.Quote {background: #F3F6F9; border-left: 2px solid var(--color-primary); padding: 15px 20px; min-width: 200px; overflow-y: auto; margin: 0px;}
	blockquote.Quote br:first-child {display: none;}
	blockquote .QuoteAuthor.blockquote-content {margin-bottom: 10px; font-style: italic;}
	blockquote:before {content: "↳ "; float: left; margin-right: 4px;} 
	blockquote br:first-of-type, blockquote br:last-of-type {display:  none;}


.CommentForm .FormWrapper {    background: var(--color-muted-20) !important; border-radius: 4px 4px 35px 35px;}

.MessageFormWrap .CommentForm .FormWrapper {padding: 10px;}
/* Comments List */

.CommentsWrap ul.DataList li.Item {background: none; margin-bottom: 20px; border: none; padding: 0;}
.CommentsWrap ul.DataList li.Item:hover {margin-left: 0;}

.CommentHeader {background: none; /* float: right; background: rgb(42, 53, 57); width: 50px; */}
.Comments .Item-Header {    margin: 0 0 0 15px;}
	.Item-Header a {color: var(--color-muted-75);}
	 	.Item-Header a:hover {color: #00B5FF;}

.Comments .AuthorWrap {    display: inline-block;
    background: #ffffff99;
    padding: 7px 15px 5px 9px;
    border-radius: 5px 5px 0 0;}
.Comments .Meta {display: inline-block; font-size: var(--text-sm); }
.Item-Header .MItem {display: inline-block; top: 11px;}
.Comment .Options {display: inline-block;
    position: absolute;
    top: 10px;
    right: -5px;}

.MItem.Category {display: none;}

.postcount {background: url(../../_icons/iconPostcount.svg) 0 2px no-repeat; background-size: 10px;}
.Item-Header p.postcount {color: var(--color-border);
    padding: 2px 9px 1px 24px;
    text-align: left;
    position: absolute;
    top: 11px;
    left: 200px;
    border-right: 0px solid #DDD;
    background-position: 7px 4px;
    font-size: var(--text-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);}

.ItemDiscussion .Item-Header {height: 50px; z-index: 1;}
.ItemDiscussion .Item-Header p.postcount {top: 19px;}

.Item-Header .MItem .DateUpdated {display: none;}
.Item-Header .MItem.CommentFlag {text-indent: -9999px;width: 20px;height: 20px; position: absolute; top: 13px; right: 45px;}

.Comments .Item-BodyWrap {display: inline-block; vertical-align: top; padding: 18px 23px 18px 23px; width: 100%; background: #FFF; border-radius: var(--radius-sm);}
.Comments .MItem.IPAddress {display: none;}

.Comments .ProfilePhotoMedium {width: 30px; height: 30px;}
.Comments .Item .AuthorInfo img {width: 30px; top: 60px; right: -45px; position: absolute;}
	
.Item-Header .MItem.DateCreated {margin-right: 0;font-size: var(--text-xs); position: absolute;  top: 15px; right: 100px; padding-left: 10px; border-left: 0px solid #DDD;}
.ItemDiscussion {padding: 0;}
.ItemDiscussion .Item-Header .MItem.DateCreated {top: 20px;}
.Item-Header .MItem.CommentFlag a {position: absolute; top: 0px; right: -2px; height: 20px; width: 20px; opacity: 0.5; color: #FFF; font-size: 0; background: url(../../_icons/flagging.svg) center right no-repeat; background-size: 15px;}	
	.Item-Header .MItem.CommentFlag a:hover {opacity: 1;}
	
	.Item-Header.DiscussionHeader .MItem.CommentFlag {right: 45px; top: 15px;}
		.MessageList.Discussion .OptionsMenu {right: 36px;
			top: -1px;
			z-index: var(--z-raised);
			position: absolute;}
	
	.MessageList.Discussion .AdminCheck {position: relative; top: -28px; right: 12px;}
	
.userContent.Message {margin-top: 14px;}	
.Comments .userContent.Message {margin-top: 4px; font-size: var(--text-base); line-height: 1.6rem;}

.EditCommentForm .Buttons, .CommentForm .Buttons {padding: 0 8px 0 0;}
.editor-help-text {display: none;}

/* ChildCategories */

ul.DataList.ChildCategoryList li.Item {width: 49%; margin-right: 13px;}
ul.DataList.ChildCategoryList .Item:nth-child(even) {margin-right: 0;}
ul.DataList.ChildCategoryList li.Item h3 {float: left; padding-top: 5px;}
ul.DataList.ChildCategoryList li.Item .Meta span {opacity: 1;}
ul.DataList.ChildCategoryList li.Item .Meta.Hidden {display: inline-block; float: right; text-align: right; width: 115px;}
ul.DataList.ChildCategoryList li.Item .Meta.Hidden .MItem {width: auto; display: inline-block;}

ul.DataList.ChildCategoryList .ItemContent {padding: 0;}

h2.ChildCategories-Title.Hidden {display: none;}


ul.DataList.ChildCategoryList #Category_24 {width: 100%; margin-right: 0; display: block;}


/* Thema erstellen */

#vanilla_post_discussion .ContentColumn,
#dashboard_entry_register .ContentColumn,
#vanilla_post_editdiscussion .ContentColumn,
#dashboard_home_filenotfound .ContentColumn {width: 100%;}
#vanilla_post_discussion .FormWrapper .Button.PreviewButton,
#vanilla_post_discussion .FormWrapper .Button.Cancel,
#vanilla_post_discussion .FormWrapper .Button.WriteButton {font-size: var(--text-md); width: auto; padding: 3px 7px; margin: 3px 5px 5px 0;}

.DiscussionForm .Category, .DiscussionForm input.InputBox {border: none; border-radius: var(--radius-sm);}
.DiscussionForm input.InputBox {padding: 8px 12px;}

/* Beitrag erstellen Hashtags */
.DiscussionForm .Form-Tags.P {display: none;}
.InlineTags.Meta {display: none;}

.Box.Tags {margin-bottom: 55px; animation: fadein var(--fadein-duration); 
	background: linear-gradient(224deg,transparent,hsla(0,0%,95%,.29) 47.39%,#fff 65%),linear-gradient(336deg,#f9ddf1 .07%,#e5e1ff 16.73%,#daedff 34.48%,#e2f4e3 49.98%,#ebf5d8 66.12%,#faf2da 81.95%,#fbe5d8 99.9%);
	padding: 1px 20px 20px 20px;
	border-radius: var(--radius-md);
}
.Box.Tags h4 {margin-top: 18px; background-color: transparent; color: var(--color-primary); font-weight: var(--weight-bold); font-size: var(--text-base); position: relative;}

.Box.Tags .TagCloud li {border: none; margin-bottom: 5px; background: none;}
.Box.Tags .TagCloud li a:link, .Box.Tags .TagCloud li a:visited {	border-radius: var(--radius-full);
	padding: 7px 10px;
	background: rgba(255, 255, 255, 0.7);
	color: var(--color-primary);
	margin-bottom: -6px;
	display: block;
	font-size: var(--text-sm);
	box-shadow: var(--shadow-md);}
.Box.Tags .TagCloud li a:hover {background: var(--color-muted-10); color: var(--color-primary);}
.Box.Tags .TagCloud li .Count {position: relative; top: -1px; font-size: 0.6rem; font-weight: var(--weight-normal); padding: 2px 4px; margin-left: 4px; background: var(--color-primary); display: none;}
.Box.Tags .TagCloud li a:hover .Count {color: var(--color-primary); color: #FFF;}

.InlineTags ul, .InlineTags li {display: inline;}
.InlineTags li:after {content: ', ';}
.InlineTags li:last-child:after {content: '';}
.MessageList .Meta.InlineTags {min-height: 0;}

.TagCloud {padding: 0; list-style: none;}
.TagCloud li {display: inline-block; background: #F7F7F7; background: rgba(255, 255, 255, .5); padding: 3px; line-height: 100%; margin: 2px 0;}

.AvailableTag {padding: 2px 5px;}


.BarWrap {border: none; background: none;}

/* Write Comment */

.MessageForm.CommentForm.FormTitleWrapper {clear: both; margin-top: 50px;}
.Form-Body, .MessageForm, body.Profile.EditMode #Content form {border-radius: 4px 4px 35px 35px;}

h1 {margin: 20px 0 14px 0;}

.ProfilePhoto.ProfilePhotoMedium {border-radius: var(--radius-full);}

.EditCommentForm textarea.TextBox, .CommentForm textarea.TextBox {min-height: 160px; padding: 15px; border-radius: 0 0 5px 5px;}


.Form-Body .Buttons {font-size: 1em; display: flex; justify-content: space-between;}
.Form-Body .Buttons a {background: #16768D; padding: 3px 14px; border-radius: var(--radius-sm);}
.Form-Body .Buttons a:hover {background: #FBF06C; color: rgb(42, 53, 57);}

.Form-Body .Buttons a.Cancel, .FormWrapper .Button.PreviewButton, .FormWrapper .Button.Cancel {background: none; border: none; padding: 5px; color: var(--color-text); font-size: var(--text-base);}
.Form-Body .Buttons a.Cancel:hover, .FormWrapper .Button.PreviewButton:hover, .FormWrapper .Button.Cancel:hover {color: var(--color-accent);}

.Form-Body .Buttons .Back {display: none;}
.Form-Body .Buttons .Back a {color: #FFF;}
.Form-Body .Buttons .Back a:hover {color: rgb(42, 53, 57);}

.MessageForm .Button.PreviewButton:link,
.MessageForm .Button.PreviewButton:visited,
.MessageForm .Button.WriteButton:link,
.MessageForm .Button.WriteButton:visited {background: none; border: none; color: var(--color-text); font-size: 1.2em; padding: 0 10px;}
.MessageForm .Button.PreviewButton:hover {color: var(--color-accent);}
.MessageForm .Button.PreviewButton {padding-right: 0 !important;}
.MessageForm h2.H {display: none;}

/* Profile Notifications */

#dashboard_profile_notifications .About,
#dashboard_profile_discussions .About,
#dashboard_profile_activity .About,
#dashboard_profile_comments .About,
#dashboard_profile_notifications .Yaga.ReactionsWrap,
#dashboard_profile_discussions .Yaga.ReactionsWrap,
#dashboard_profile_activity .Yaga.ReactionsWrap,
#dashboard_profile_comments .Yaga.ReactionsWrap {display: none;}

#dashboard_profile_comments .DataList.SearchResults {margin-top: 20px;}
#dashboard_profile_comments h2.H {margin-top: 13px;}

.FormWrapper-Condensed {margin-bottom: 20px;}
#Form_Share {font-size: var(--text-base); font-family: var(--font-body); letter-spacing: 0.5px;}

#dashboard_profile_discussions .DataList.Discussions {top: 0px;}

.ContentColumn .BoxProfileFilter {display: none;}

/* Add Pagespecific Fixes */

/* Neue Nachricht-Seite */

#conversations_messages_add #Body .ContentColumn {width: auto;}
#conversations_messages_add #Content {float: none;}

.Button.NewConversation, .Button.ClearConversation, .Button.Danger {width: 100%; font-weight: var(--weight-normal);}

.AddPeople form div {text-align: center;}
.token-input-token p {color: #FFF; display: inline-block;}
.token-input-token span {display: inline-block; background: rgba(255, 255, 255, 1); color: #000; width: 20px; border-radius: var(--radius-full); margin-left: 10px; cursor: pointer; font-weight: var(--weight-bold);}
.token-input-token span:hover {background: var(--color-accent); color: #FFF;}
.token-input-input-token input {width: 100% !important; height: 40px; margin-bottom: 20px;}
#Form_AddPeople .Buttons input {width: 150px;}

div.AttachFileWrapper {margin: 0 0 0 -4px; padding: 5px; text-align: left;}
.AttachFileLink a {color: #FFF !important; background: var(--color-accent) !important; padding: 5px 11px; border-radius: var(--radius-sm); display: inline-block;}
.AttachFileLink a:hover {background: #444 !important; color: #FFF !important;}
.CurrentUploader {display: inline-block; padding: 10px 0 0 5px; height: 30px;}

/* Nachrichten Inbox */

#conversations_messages_inbox h1.H {text-align: center; height: auto; display: block; visibility: visible;}
	
.BoxButtons.BoxNewConversation	{display: table-cell;}

.DataList.Conversations {padding-bottom: 50px;}
	ul.DataList.Conversations li.Item .Title {padding: 0;}
	ul.DataList.Conversations li.Item h3 > a {color: var(--color-primary); margin: 2px 0 3px; font-size: var(--text-md); position: absolute; left: 60px; top: 20px;}
	ul.DataList.Conversations .ProfilePhotoMedium {width: 30px; height: 30px; margin-top: 3px; }
	ul.DataList.Conversations .Meta {text-align: right; margin-top: 8px;}
	
	ul.DataList.Conversations li.Item.Read  {opacity: 0.6;}
	ul.DataList.Conversations li.Item.Read .ProfilePhotoMedium {filter: grayscale(100%);}
	ul.DataList.Conversations li.Item:hover a.Delete {visibility: visible; position: absolute; top: -50px; background: #DDD; width: 23px; height: 23px; border-radius: var(--radius-full); padding: 3px 3px 3px 4px; text-align: center;}
	
	.DataList.MessageList.Conversation .Item {padding: 5px 15px 15px 15px; margin: 0 12% 10px 0; border-radius: var(--radius-md); border-bottom: 0px; border: none;}
	.DataList.MessageList.Conversation .Item .Meta {position: relative; margin-bottom: 25px; font-size: var(--text-md);}
	.DataList.MessageList.Conversation .Item .Author a {font-weight: var(--weight-medium); position: relative; top: 18px; left: 2px; font-size: var(--text-base); color: #4C4E4D;}
	.DataList.MessageList.Conversation .Item .Meta .DateCreated {position: absolute; right: 0px;}
	.DataList.MessageList.Conversation .Item .ProfilePhotoMedium {width: 20px; height: 20px; margin-right: 0px;}
	.DataList.MessageList.Conversation .Item.Mine {margin: 0 0 10px 11%; background: var(--color-muted-10);}
	#MessageForm .Author .PhotoWrap {display: none;}
	#MessageForm .FormWrapper .Buttons input {margin: 0 auto 10px;}
	#MessageForm .FormWrapper #Form_ConversationMessage {text-align: center;}
	
	
/* Signatur */

.UserSignature {font-size: var(--text-xs); margin: 20px 0 25px; text-align: center; border: none;}
.UserSignature:hover {opacity: 1;}
.Comment .Message .UserSignature p {padding: 0px; margin: 2px 0px;}


/* Reactions */

.Item .Reactions > * {visibility: visible !important;}

.ReactButton.Quote {background: url(../../_icons/reactionQuote.svg) center left no-repeat; background-size: 13px; padding-left: 18px; font-size: var(--text-sm); margin-right: 10px;}
	.ReactButton.Quote:hover {color: var(--color-accent);}
.ReactMenu {margin-bottom: 5px;}
	.ReactLabel {font-size: var(--text-sm); padding: 0 0 0 18px; margin-right: 10px;}
	/* Reaktions-Icons sind an die CSS-Klasse der Reaktion gebunden, nicht an die Position. */
	.ReactMenu a:has(.ReactHeart) {background: url(../../_icons/reactionLike.svg) center left no-repeat; background-size: 13px;}
	.ReactMenu a:has(.ReactHappy) {background: url(../../_icons/reactionLaugh.svg) center left no-repeat; background-size: 13px;}
	.ReactMenu a:has(.ReactCheckmarkCircle) {background: url(../../_icons/reactionHelpful.svg) center left no-repeat; background-size: 13px;}
	.ReactSprite {display: none !important; background: none;}
	.Reactions .Count {left: 16px;
		position: relative;
		top: -1px;
		padding-top: 1px;
		margin-right: 3px;
		font-size: var(--text-xs);
		background: var(--color-muted) !important;}

.UserReactionWrap .ReactSprite {position: relative; display: block !important; width: 20px; height: 20px; top: 13px; left: 15px; background-size: 13px; }
	.UserReactionWrap {animation: fadein var(--fadein-duration);}
	.UserReactionWrap .ReactSprite.ReactHeart {background: transparent url(../../_icons/reactionLike.svg) center left no-repeat; background-size: 13px;}
    .UserReactionWrap .ReactSprite.ReactHappy {background: transparent url(../../_icons/reactionLaugh.svg) center left no-repeat; background-size: 13px;}
    .UserReactionWrap .ReactSprite.ReactCheckmarkCircle {background: transparent url(../../_icons/reactionHelpful.svg) center left no-repeat; background-size: 13px;}

.ReactButton {margin: 0 14px 0 0;}

.ReactHeart {background: url(../../_icons/reactionLike.svg) center left no-repeat;}

.UserReactionWrap {margin: 10px 4px 0 0 !important;}
.UserReactionWrap .ProfilePhotoSmall {border-radius: 105px;}
.UserReactionWrap .ReactSprite {right: 0px !important; bottom: -6px !important;}

.ReactionRecord {margin: 15px 0; font-size: var(--text-sm);}


/* Pockets */

ul.Discussions li .pocket {margin: 10px 8px 5px; display: flex;}
	ul.Discussions li .pocket a {display: block; width: 100%; height: auto;}
	ul.Discussions li .pocket img {width: 100%; height: auto;  border-radius: var(--radius-sm);}

ul.Discussions li .pocket.aktionen {justify-content: space-between; margin: 15px 0 10px;}
	ul.Discussions li .pocket.aktionen div {width: 48.5%;}
	
ul.Discussions li .pocket.standards {justify-content: space-between; margin: 10px 0 0px; flex-wrap: wrap;}
	ul.Discussions li .pocket.standards a:link, 	ul.Discussions li .pocket.standards a:visited {width: 48.5%; background: #FFF; color: var(--color-primary); display: block; padding: 10px; margin-bottom: 10px; border-radius: var(--radius-sm);  box-shadow: 0 15px 35px 0 var(--color-primary-10); border-right: 3px solid var(--color-link); font-size: var(--text-md);}	
	ul.Discussions li .pocket.standards a:hover {background: #FFF; color: var(--color-accent);}

/* Module */

.moduleBildText a {position: relative; width: 100%; display: flex; justify-content: space-between; background: white; margin: 20px 0; overflow: hidden; border-radius: var(--radius-sm);}
	.moduleBildText img, .moduleBildText div {width: 50%; height: inherit;}
		.moduleBildText div {padding: 25px 20px 20px 30px;}
			.moduleBildText div .title {font-size: var(--text-2xl); line-height: 2.5rem; color: var(--color-primary); display: block;}
			.moduleBildText div .title.headline {font-size: var(--text-lg); line-height: 1.8rem; display: block; margin-bottom: 12px;}
			.moduleBildText div .title.bodycopy {font-size: var(--text-base); line-height: 1.5rem; margin-bottom: 50px;}	
			.moduleBildText div .more {font-size: var(--text-md); color: var(--color-muted-75); position: absolute; bottom: 20px; color: var(--color-accent); background: transparent; border-bottom: 3px solid var(--cat-red); box-shadow: inset 0 -0px 0 var(--cat-red); font-weight: var(--weight-semibold);}
			.moduleBildText div .more:hover {color: var(--color-primary); border-bottom: 3px solid var(--color-muted-60); box-shadow: inset 0 -0px 0 var(--color-muted-60);}
				.moduleBildText div .more::after {content: "›"; padding-left: 5px;}
				.moduleBildText div .anzeige {font-size: var(--text-xs); position: absolute; right: 5px; bottom: 5px; color: var(--color-muted-50);}
				.moduleBildText div sup {font-size: 70%; position: relative; top: -6px;}

/* Activities */

.editor-active .editor {border-radius: 5px 5px 0 0; background: linear-gradient(90deg, #ffffff, transparent);}

.TextBoxWrapper {border-radius: 5px 5px;}
.TextBoxWrapper textarea {border-radius: var(--radius-sm); border: none; padding: 5px;}

.DataList.Activities .Item {margin-bottom: 12px;}

.MItem a.CommentOption {background: var(--color-accent); font-size: var(--text-base);letter-spacing: 0.5px; line-height: 1.5em; padding: 4px 11px 4px 11px; border-radius: var(--radius-full); color: #fff;}
	.MItem a.CommentOption:hover {background: var(--color-primary); color: #FFF;}    
.DataList .Excerpt {font-size: var(--text-md);}
.CommentForm {background: none;}

.Excerpt {color: #FFF;}
.Flyout .Excerpt {color: var(--color-text);}

.InformMessage .Excerpt {color: var(--color-primary);}

/* Buttons */

.Button, .Button.Okay {border: none; margin-bottom: 10px; background: var(--color-accent); font-size: var(--text-md); line-height: 1.8rem; padding: 3px 15px 3px 15px; color: #FFF; border-radius: var(--radius-sm); text-align: center; border-radius: var(--radius-full); }
.Button a:visited, .Button a:link {font-weight: var(--weight-normal); color: #FFF;}
.Button:hover {background: var(--color-accent-light); color: var(--color-accent); transition: background var(--transition-base);}

/* Form submit buttons — match Neues Thema BigButton */
input.Button.CommentButton,
input.Button.DiscussionButton {
	border: none;
	background: var(--color-accent);
	background-image: none;
	font-size: var(--text-base);
	font-weight: var(--weight-normal);
	font-family: var(--font-body);
	letter-spacing: 0.5px;
	line-height: 1.8rem;
	padding: 2px 15px;
	color: #FFF;
	border-radius: var(--radius-full);
	width: auto;
	margin: 0 6px 10px 0;
	cursor: pointer;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: background var(--transition-base), color 0.2s;
}
input.Button.CommentButton:hover,
input.Button.DiscussionButton:hover {
	background: var(--color-accent-light);
	color: var(--color-accent);
	border: none;
}

input.Button.PreviewButton,
input.Button.DraftButton,
a.Button.DraftButton,
.FormWrapper input.Button.PreviewButton,
.FormWrapper input.Button.DraftButton,
.FormWrapper a.Button.DraftButton {
	background: none;
	background-image: none;
	border: none;
	color: var(--color-text);
	font-size: var(--text-base);
	padding: 5px;
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
input.Button.PreviewButton:hover,
input.Button.DraftButton:hover,
a.Button.DraftButton:hover {
	background: none;
	color: var(--color-accent);
}

/* New Discussion */

nav.mastermenu .BoxNewDiscussion a.BigButton {	background: var(--color-accent) !important;
	color: #FFF;
	top: 1px;
	width: fit-content;
	padding: 3px 15px;
	line-height: 1.8rem;
	max-width: 200px;
	font-size: var(--text-base);
	font-weight: var(--weight-normal);
	font-family: var(--font-body);
	letter-spacing: 0.5px;
	margin-top: 9px;
	font-weight: var(--weight-normal);}
nav.mastermenu .BoxNewDiscussion a.BigButton:hover {background: var(--color-accent-light)  !important;  color: var(--color-accent) !important;}

#Panel .BoxNewDiscussion a.BigButton {display: none;}

p.neuesThemaButtonText, .GuestBox p:nth-child(2) {line-height: 1.5em; color: var(--color-text); margin-bottom: 10px; position: relative; top: 0px; margin-bottom: 14px; border-radius: var(--radius-sm); text-align: center; padding: 12px 12px 0 12px; font-size: 1.4em;     line-height: 2rem;}

.GuestBox p .heart {color: #EE6F56; font-weight: var(--weight-bold);}
.GuestBox p:after {left: 178px;}

p.neuesThemaButtonText {left: 80px}

#FacebookAuth {text-align: center; margin-left: 30px; position: relative; top: 50px;}
#FacebookAuth:before {background: #DDD; border-right: 1px solid #FFF; border-radius: 5px 0 0 5px; width: 50px;}
#OpenIDAuth {display: none;}

/* Login & Registrieren */

.GuestBox {background: rgba(77, 91, 109, 1); margin-bottom: 25px; padding: 5px 15px 1px !important; position: fixed;bottom: 20px; left: 0; border-radius: var(--radius-md); width: 34%; box-shadow: 0 5px 12px rgba(56, 65, 103, 0.3); margin: 0 33%; color: #fff; text-align: center; animation: fadein var(--fadein-duration); z-index: var(--z-fixed); 	background: linear-gradient(224deg,transparent,hsla(0,0%,95%,.29) 47.39%,#fff 65%),linear-gradient(336deg,#f9ddf1 .07%,#e5e1ff 16.73%,#daedff 34.48%,#e2f4e3 49.98%,#ebf5d8 66.12%,#faf2da 81.95%,#fbe5d8 99.9%); 	box-shadow: 5px 5px 0px var(--color-primary);
	border: 1.5px solid var(--color-primary);}
	.GuestBox h2, .GuestBox h4 {display: none;}
	.GuestBox div.P {position: relative; color: var(--color-primary); text-align: center; margin: 20px 0 4px;}
	.GuestBox p {color: var(--color-primary); text-align: center; line-height: 1.7rem; font-size: var(--text-base);}
	.GuestBox p:nth-child(2) {margin-bottom: 15px;}
	.GuestBox p strong {font-family: var(--font-heading);
		font-weight: var(--weight-medium);
		font-size: var(--text-lg);
		margin-top: 0px;
		position: absolute;
		left: 10px;
		top: -60px;
		background: #FFF;
		padding: 14px;
		box-shadow: 5px 5px 0px var(--color-primary);
		border: 1.5px solid var(--color-primary);
		transform: rotate(-14deg);
		border-radius: var(--radius-md);}

.Button.Primary.SignInPopup {width: 127px; background: var(--color-link); margin-right: 11px; text-align: left; color: #FFF; font-weight: var(--weight-normal); font-size: var(--text-md); line-height: 1.8rem; box-shadow: none; text-align: center; }
.Button.Primary.SignInPopup:hover {background: var(--color-link-light);
	color: var(--color-link);}
.Button.ApplyButton {width: 127px; background: var(--color-accent);  color: #FFF; text-align: left; font-weight: var(--weight-normal); font-size: var(--text-md); line-height: 1.8rem; box-shadow: none; text-align: center;}
.Button.ApplyButton:hover {background: var(--color-accent-light); color: var(--color-accent);}

/* Login PopUp */

.FormTitleWrapper.AjaxForm .FormWrapper {padding: 15px;}

/* Registration Page */

#dashboard_entry_register .breadcrumbu, #dashboard_entry_register #produkttestBanner {display: none;}
#dashboard_entry_register h1 {text-align: center; font-weight: var(--weight-normal); margin: 40px;}
#dashboard_entry_register .Box {text-align: center; margin: 0 auto; padding: 15px 25px;}
#dashboard_entry_register label {font-weight: var(--weight-normal); line-height: 1.4em;}
#dashboard_entry_register .Buttons {text-align: center; margin-top: 25px;}
#dashboard_entry_register .Buttons .Button {font-size: var(--text-lg); padding: 7px 28px 7px 28px;}

#dashboard_entry_register .FormWrapper {background: #FFF; box-shadow: 0 15px 35px 0 var(--color-primary-10); border-radius: var(--radius-sm);}
#dashboard_entry_register .FormWrapper li {margin-bottom: 10px;}
#dashboard_entry_register .FormTitleWrapper {width: 400px; margin: 30px auto 0;}
#dashboard_entry_register .PasswordStrength {width: 300px;}
#dashboard_entry_register .small {display: block; font-size: 0.9em; color: gray; font-weight: var(--weight-normal); line-height: 1.4em; margin-top: 10px;}

#dashboard_entry_register .mastermenu {height: 160px;}
#dashboard_entry_register .categoriesHolder {display: none;}

#dashboard_entry_register .PasswordStrength .StrengthText {padding-top: 8px; font-size: 13px;}

#Form_User_Register .InputBox {    border: 1px solid #DDD; border-radius: var(--radius-sm); width: 100%; padding: 8px 12px 10px; font-size: 16px;}
#PasswordsDontMatch {font-size: 1.2em; margin: 10px 0; }
.CaptchaInput {margin-top: 20px;}
#recaptcha_widget_div {margin-bottom: 15px; margin-left: 50px;}
#dashboard_entry_register #Form_SecretCode {width: 50px; text-align: center;}

li.Gender {display:none !important;}

.Legal {margin: 20px;}

/* TopMenu */

.categoriesHolder {text-align: center; margin: 0px auto 25px; position: relative; white-space: nowrap; background: #fff; border-bottom: 1px solid var(--color-muted-20); animation: fadein var(--fadein-duration);}
.categoriesHolder ul {display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1073px; margin: 0 auto;}
.categoriesHolder li {border: none; padding: 11px 0px 8px 0;}
.categoriesHolder li a:link, .categoriesHolder li a:visited {border: none; margin-bottom: 4px; font-size: var(--text-base); padding: 12px 12px; text-align: center; font-weight: var(--weight-normal); color: var(--color-primary);}
.categoriesHolder li a:hover {border-bottom: 3px solid var(--color-link); }

.categoriesHolder .schwangerAT:link, .categoriesHolder .schwangerAT:visited {border-bottom: 3px solid var(--cat-red); }
.categoriesHolder .schwangerAT:hover {border-bottom: 3px solid var(--color-accent);}

.categoriesHolder .karenzAT:link, .categoriesHolder .karenzAT:visited {border-bottom: 3px solid #a2dba2;}
.categoriesHolder .karenzAT:hover {background: #a2dba2; color: #FFF;}

.categoriesHolder .kinderkramCOM:link, .categoriesHolder .kinderkramCOM:visited {border-bottom: 3px solid rgba(126, 56, 181, 0.3);}
.categoriesHolder .kinderkramCOM:hover {background: rgba(126, 56, 181, 0.6); color: #FFF;}

.categoriesHolder .apps:link, .categoriesHolder .apps:visited {background: rgb(0, 158, 255); color: #FFF;}
.categoriesHolder .apps:hover {background: rgba(0, 158, 255, 0.7);}

/* Categories */

.BoxCategories {margin-bottom: 70px; position: relative;}
.PanelInfo.PanelCategories li {	height: 32px;
		padding: 0 0.3%;
		border: none;
		padding-top: 5px;
		margin-bottom: 2px;}
.PanelInfo.PanelCategories li a:link, .PanelInfo.PanelCategories li a:visited {margin-bottom: 4px; font-size: var(--text-base); line-height: 1.8em; padding: 6px 7px; text-align: center; font-weight: var(--weight-normal); color: var(--color-primary); border-radius: var(--radius-sm); background: #FFF;}
.PanelInfo.PanelCategories li:hover {background: var(--color-muted-10); color: var(--color-primary); border-radius: var(--radius-lg); transition: background var(--transition-base);}
.PanelInfo.PanelCategories li:hover a {background: none; color: var(--color-primary);}
.PanelInfo.PanelCategories li:hover a .Count {background: none; color: var(--color-primary);}

.PanelCategories .Aside {text-align: center;}
.PanelCategories .Aside .Count {border-radius: var(--radius-sm);
    width: 45px;
    height: 25px;
    display: inline-block;
    text-align: center;
    background: #FFF;
    color: var(--color-primary);
    font-weight: var(--weight-normal);
    font-size: var(--text-sm);
    position: relative;
    top: -3px;}

.PanelInfo.PanelCategories li.Active {background: none;}
.PanelInfo.PanelCategories li.Active a:link, .PanelInfo.PanelCategories li.Active a:visited {background: var(--color-accent); color: #FFF; border: 2px solid var(--color-accent); border-radius: var(--radius-full); padding: 6px 10px;}
.PanelInfo.PanelCategories li.Active a:hover {background: var(--color-text); border: 2px solid var(--color-text); color: #FFF;}

.PanelCategories li.Depth2 {display: none;}

/* Activities */

ul.DataList.Activities li.Item .Title {margin-bottom: 10px;}
ul.DataList.Activities li.Item .Title a {display: inline-block; width: auto;}

ul.DataList.Activities li.Item a.Delete {visibility: visible;
    color: var(--color-primary);
    display: block;
    margin: 0;
    padding: 2px 5px 1px;
    font-family: arial;
    font-size: var(--text-xl);
    background: rgba(77, 91, 109, 0.1);
    border-radius: var(--radius-full);
    height: fit-content;
    margin-right: 3px;
    max-width: 23px;float: right;}
ul.DataList.Activities li.Item:hover a.Delete {background: var(--color-primary); color: #FFF;}

/* Yaga Page Leaderboard Module */

.Box.Leaderboard {margin-bottom: 45px;}
.Box.Leaderboard li {border: none; background: #FFF; border-radius: var(--radius-sm); margin-bottom: 2px;}
.Box.Leaderboard li .Count {padding: 5px 10px; background: var(--color-muted-5); color: var(--color-primary); font-size: var(--text-base);}

/* Draft Site */

#vanilla_drafts_index ul.DataList.Drafts {margin-top: 30px;}
#vanilla_drafts_index ul.DataList.Drafts li.Item .Title {	padding-left: 2px;
margin-bottom: 5px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 80%;}    
#vanilla_drafts_index ul.DataList.Drafts li.Item a.Title.DraftLink {	color: var(--color-primary);
	line-height: 1.4rem;
	width: 100%;
	display: block;
	font-family: var(--font-heading);
	font-size: var(--text-md);
	font-weight: var(--weight-medium);
	letter-spacing: 0.2px;
	-webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 95%);}
#vanilla_drafts_index ul.DataList.Drafts li.Item .Excerpt a {color: var(--color-muted-75); font-size: var(--text-base); line-height: 1.6rem;}
#vanilla_drafts_index ul.DataList.Drafts .Options {position: absolute; right: 15px;}
#vanilla_drafts_index .DataList a.Delete {visibility: visible; font-family: var(--font-body); height: 21px; border-radius: 2px; color: var(--color-primary);}
#vanilla_drafts_index .DataList a.Delete:hover {background: var(--color-primary); color: #FFF;}


/* Profile Edits */
	
.Profile .FormTitleWrapper li input.InputBox {border-radius: var(--radius-sm); border: none; padding: 8px 12px;}
body.Profile.EditMode ul li label {margin-bottom: 3px;}
.Profile .FormTitleWrapper li .CheckBoxLabel {margin-bottom: 15px;}
.Profile .FormTitleWrapper li:last-child {margin-bottom: 25px;}


/* Profile Menu */

body.Conversations.add #Panel {display: block;}
body.Conversations.add #Panel #produkttestBanner,
body.Conversations.add #Panel .ratgeber,
body.Conversations.add #Panel .themaDerWoche,
body.Conversations.add #Panel .NewConversation {display: none;}

#Panel .FilterMenu {margin: 0 0 40px 0; background: var(--color-text);}
#Panel .FilterMenu li, #Panel .FilterMenu li:first-child, .PanelInfo li:first-child {border: none;}
#dashboard_profile_edit #Panel .FilterMenu .Active, #dashboard_profile_edit .PanelInfo .Active {background: none;}
	#dashboard_profile_edit #Panel .UserBox {display: none;}
	#dashboard_profile_edit .FormTitleWrapper form ul {display: flex; flex-wrap: wrap; justify-content: space-between;}
		#dashboard_profile_edit .FormTitleWrapper form ul li {margin-right: 0; display: block; width: 47%; margin-bottom: 10px;}
		#dashboard_profile_edit .FormTitleWrapper form ul li .label-wrap {margin: 0 0 5px 5px;}
		#dashboard_profile_edit .FormTitleWrapper form ul li input[type=text] {width: 100%;}
		#dashboard_profile_edit .FormTitleWrapper form ul li select {width: 100%;border: 1px solid rgb(77 91 109 / 0.5); border-radius: var(--radius-sm); padding: 6px;}
		#dashboard_profile_edit .FormTitleWrapper form ul li select#Form_DateOfBirth_Month,
		#dashboard_profile_edit .FormTitleWrapper form ul li select#Form_DateOfBirth_Day,
		#dashboard_profile_edit .FormTitleWrapper form ul li select#Form_DateOfBirth_Year {width: 30%; margin-right: 3%;}


#Panel .BoxFilter li {display: inline-block;}
#Panel .FilterMenu li a:link, #Panel .FilterMenu li a:visited {font-size: var(--text-base);}
#Panel .FilterMenu li a:link, #Panel .FilterMenu li a:visited {width: 80px; height: 40px; border-radius: var(--radius-sm); display: inline-block; display: table-cell; vertical-align: middle; color: #2A3539; z-index: var(--z-raised); position: relative; text-align: center; text-indent: -9999px; font-weight: var(--weight-normal);}

#Panel .Photo.PhotoWrap.PhotoWrapLarge {text-align: center; float: none; margin-bottom: 0; width: 100%; background: transparent;}
#Panel .Photo.PhotoWrap.PhotoWrapLarge img {width: 80%; border-radius: var(--radius-full); margin: 10% 10% 0 10%;}

#dashboard_profile_index #Panel .Photo {display: none;}

#Panel .FilterMenu li.Active {background: none;}
#Panel .FilterMenu li.Active a:link, #Panel .FilterMenu li.Active a:visited {background: #FFF; text-indent: 0;}
#Panel .FilterMenu li.Active a:link:hover {border: none;}

#Panel .FilterMenu li a .Aside .Count {    text-indent: 0px;
    background: transparent;
    border-radius: var(--radius-sm);
    height: 22px;
    z-index: 10;
    padding: 0px 4px;
    position: initial;
    width: auto;
    color: rgba(126, 150, 179, 0.7);
    font-size: var(--text-base);
    margin-right: 2px;
}

#Panel .FilterMenu .AllCategories {display: none;}

#Panel .PanelInfo .PanelCategories li a {background: var(--color-link); text-align: center; display: block; color: #FFF; border-radius: var(--radius-sm); font-size: var(--text-md); line-height: 2em;}


#Panel .BoxFilter.BoxDiscussionFilter {	position: fixed;
	bottom: 15px;
	width: 100%;
	height: 40px;
	z-index: var(--z-fixed);
	margin: 0 !important; display: none;}
	.isUser #Panel .BoxFilter.BoxDiscussionFilter {display: block; animation: fadein var(--fadein-duration);}
#Panel .BoxFilter.BoxDiscussionFilter ul.FilterMenu {border-radius: 0; background: transparent; text-align: center;}
	
	#Panel .BoxFilter.BoxDiscussionFilter .FilterMenu li a:link, #Panel .BoxFilter.BoxDiscussionFilter .FilterMenu li a:visited {color: var(--color-primary);
		padding: 5px 14px;
		background: rgb(209 218 227 / 55%)!important;
		border-radius: var(--radius-full);
		font-size: var(--text-base);
		height: auto;
		margin: 0 5px;
		backdrop-filter: blur(10px);
	transition: all var(--transition-base);}
	#Panel .BoxFilter.BoxDiscussionFilter .FilterMenu li a:hover {background: var(--color-primary) !important; color: #FFF; }
	#Panel .BoxFilter.BoxDiscussionFilter .FilterMenu li a:hover .Count {color: #FFF;}
	#Panel .BoxFilter.BoxDiscussionFilter .FilterMenu .Aside {float: left;
		position: relative;
		margin-left: -7px;
		background: var(--color-primary);
		border-radius: var(--radius-lg);
		color: #FFF !important;
		padding: 0 3px 0 8px;
		margin-right: 9px;}
#Panel .BoxFilter.BoxDiscussionFilter li a .Aside .Count {    text-indent: 0px;
    vertical-align: middle;
    background: transparent;
	color: #FFF;
    font-size: 0.85em; margin-right: 5px;}

.userMeModule {	position: fixed;
	top: 88px;
	right: 270px;
	z-index: var(--z-header);
	margin: 0;
	animation: fadein var(--fadein-duration);
	background: #FFF;
	border-radius: var(--radius-full);
	padding-left: 10px;}
	.MeBox {background: none; margin: 0; height: 38px;}
		.MeBox .ProfilePhoto.ProfilePhotoMedium {border-radius: var(--radius-full); width: 28px; height: 28px; margin-top: 5px;}
		.MeBox .Empty {text-align: center; margin: 15px 0 70px; height: 40px;}

.Profile .MeBox {display: block;}

.Sprite16 {background-size: 100%; }
	.Sprite16.SpNotifications {background: url(../../_icons/SpNotificationsGold.svg) center right no-repeat;background-size: 100%;}
	.Sprite16.SpInbox {background: url(../../_icons/SpInboxGold.svg) center right no-repeat;background-size: 100%;}
	.Sprite16.SpBookmarks {background: url(../../_icons/SpBookmarksGold.svg) center right no-repeat;background-size: 100%;}
	.Sprite16.SpOptions {background: url(../../_icons/SpOptionsGold.svg) center right no-repeat;background-size: 100%;}
	.Sprite16.SpNotifications:hover {background: url(../../_icons/SpNotifications.svg) center right no-repeat;background-size: 100%;}
	.Sprite16.SpInbox:hover {background: url(../../_icons/SpInbox.svg) center right no-repeat;background-size: 100%;}
	.Sprite16.SpBookmarks:hover {background: url(../../_icons/SpBookmarks.svg) center right no-repeat;background-size: 100%;}
	.Sprite16.SpOptions:hover {background: url(../../_icons/SpOptions.svg) center right no-repeat;background-size: 100%;}	

.MenuItems {font-size: var(--text-base); border: none;}
	.MenuItems a, .MenuItems a:link, .MenuItems a:visited, .MenuItems a:active {padding: 6px 15px; color: var(--color-primary) !important;     font-size: var(--text-xs);
    line-height: 0.9rem;}
	.MenuItems a:hover {background: var(--color-primary) !important; color: #FFF !important;}

.CategoryFilter {display: none;}

/* Panel Menü Buttons */

#Panel .FilterMenu li, .PanelInfo li {padding: 9px 6px;}
#Panel .FilterMenu li:nth-child(4), #Panel .FilterMenu li:nth-child(7) {padding-right: 0;}


/* THE BoxFilter Experiment */

#Panel .BoxFilter {position: fixed; bottom: calc(12px + env(safe-area-inset-bottom)); right: calc(10px + env(safe-area-inset-right)); margin: -50px auto 0 auto; border-radius: 3px 0px 0 0; z-index: var(--z-fixed);}
#Panel .BoxFilter {margin: 0 0 50px 0 !important}
#dashboard_profile_best #Panel .FilterMenu {margin: 0 0 0 0; border-radius: 3px 0 0 0;}

#Panel .BoxFilter ul.FilterMenu {background: rgba(255,255,255,1);}
#Panel .FilterMenu li {width: auto; padding: 0px !important;}
#Panel .FilterMenu li a:link, #Panel .FilterMenu li a:visited {display: inline-block; width: auto; white-space: nowrap; background: transparent !important; height: 40px; text-indent: 0px; padding: 11px 12px; color: var(--color-primary);}
#Panel .FilterMenu li a:hover {border: none; color: var(--color-accent);  border-radius: 0;}
#Panel .FilterMenu li.Active a:link, #Panel .FilterMenu li.Active a:visited {background: none !important; color: var(--color-link); border-radius: 0; color: var(--color-accent); font-weight: bold;}
#Panel .FilterMenu li a .Aside .Count {background: var(--color-accent);}

#Panel .FilterMenu li a .Aside .Count {font-size: 0.8em; width: 27px; height: 26px; padding: 5px 0; left: 7px; top: -16px;}

.BoxCategories {margin-top: 30px; animation: fadein var(--fadein-duration);}

/* Category Page Customized */

.categoryHeadline {display: inline-block; vertical-align: top; width: 20%; position: relative; top: 0px; width: 100%; height: 30px; text-align: right;}
.MItem.DiscussionText, .MItem.CommentText {width: 90px; display: inline-block; text-align: right;}

.categoryCounts {display: inline-block; float: right; vertical-align: top; width: 30%; clear: both;}
.categoryCounts.MItem.DiscussionCount {width: 100px; display: inline-block; text-align: right;}
.categoryCounts.MItem.CommentCount {width: 100px; display: inline-block; text-align: right;}

.categoryCounts .MItem {width: 75px; margin: 3px 0 10px 0; float: right; color: rgb(42, 53, 57); padding-top: 25px; font-weight: var(--weight-normal); font-size: 1em; line-height: 26px; text-align: center;}

.categoryCounts .MItem.DiscussionCount {background: transparent url(../../_icons/iconset.png) -471px -248px  no-repeat;}
.categoryCounts .MItem.CommentCount {background: transparent url(../../_icons/chat-25.png) center top no-repeat;}


#vanilla_categories_all .MItem a:link, #vanilla_categories_all .MItem a:visited {color: #FF3440; opacity: 1;}
#vanilla_categories_all .MItem a:hover {color: var(--color-link);}
#vanilla_categories_all .ItemContent.Category a.Title:link, #vanilla_categories_all .ItemContent.Category a.Title:visited {width: 67%;}

.Meta.Meta-Discussion .MItem.CommentCount {width: 100px; text-align: right; display: none;} /* Achtung unlcean Solution aus irgendeinem grund drin  */

.MItem.RSS {display: none;}

.ItemContent.Category a.Title:link, .ItemContent.Category a.Title:visited {color: rgb(42, 53, 57); font-size: 1.5em; line-height: 1.2em; font-weight: var(--weight-normal); margin-top: 3px; /* width: 67%; */ width: 100%; color: var(--color-primary);
	line-height: 1.4rem;
	width: 100%;
	display: block;
	font-family: var(--font-heading);
	font-size: var(--text-md);
	font-weight: var(--weight-medium);
	letter-spacing: 0.2px;
	-webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 95%);}
.ItemContent.Category a.Title:hover {color: var(--color-accent) !important;}
.ItemContent.Category .CategoryDescription {margin: 10px 0 10px 2px; color: var(--color-muted); font-size: var(--text-base); border-bottom: none;}
    
.ItemContent.Category .MItem.DiscussionCount,
.ItemContent.Category .MItem.CommentCount,
.ItemContent.Category .MItem.LastCommentDate {display: none;}    

.ItemContent.Category .MItem.LastDiscussionTitle {display: block; white-space: normal; line-height: 1.2rem;}

.ChildCategories {margin-top: 15px; border: none; color: #FFF;}
.ChildCategories b {display: none;}
.ChildCategories a:link, .ChildCategories a:visited {background: var(--color-accent);
	color: #fff;
	padding: 6px 11px;
	font-size: var(--text-base);
	border-radius: var(--radius-full);
	width: auto;
	display: inline-block;
	margin-bottom: 7px;}
.ChildCategories a:hover {background: #FBF06C; color: var(--color-text);}

.DataList.CategoryList .ItemContent .ControlOptions, .DataList.CategoryList .ItemContent .Options {position: absolute !important; top: 10px !important; right: 20px !important;}

/* Private Categories */

.DataList.CategoryList .Item-category-private  {background: var(--color-primary);}
	.DataList.CategoryList .Item-category-private a.Title:link,
	.DataList.CategoryList .Item-category-private a.Title:visited,
	.DataList.CategoryList .Item-category-private .CategoryDescription,
	.DataList.CategoryList .Item-category-private .MItem,
	.DataList.CategoryList .Item-category-private .MItem a {color: #FFF;}
	
.DataList.CategoryList .DMarker {background: #FFF; position: absolute; right: 40px; top: 0px; color: var(--color-text); border-radius: 0 0 5px 5px; padding: 11px 12px 4px 12px;}


/* My Search Module */

.mastermenu li.mySearchModule {
	position: absolute;
	right: 0;
	top: 16px;
}

.mySearchModule {margin: 25px 0; border: 1px solid #bfcad647; height: 35px; animation: fadein var(--fadein-duration); border-radius: var(--radius-lg);}
.mySearchModule input.InputBox {display: inline-block;
	width: 100% !important;
	border-radius: var(--radius-lg);
	padding: 10px 60px 8px 17px;
	position: relative;
	border: none;
	font-size: 16px;}
.mySearchModule #Form_Go {
	width: 35px;
	height: 33px;
	position: absolute;
	background: var(--color-border);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 2px 3px;
	right: 0px;
	top: 0px;
	font-size: var(--text-sm);
}
.mySearchModule #Form_Go:hover {background: var(--color-accent);}    


/* User Profile - Info */

#Content .Profile {padding-top: 20px;}

/* The bio is rendered inside the card (ProfileCard-bio); hide the core copy. */
.Profile .User > #Status {display: none;}

/* On tabs where the identity card (.About) is hidden, fall back to the
   standalone status box so the user's bio is still visible. */
#dashboard_profile_notifications .Profile .User > #Status,
#dashboard_profile_discussions .Profile .User > #Status,
#dashboard_profile_activity .Profile .User > #Status,
#dashboard_profile_comments .Profile .User > #Status {
	display: block;
	margin-bottom: 18px;
	padding: 14px 18px;
	background: var(--color-surface);
	border: 1px solid var(--color-muted-15);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	color: var(--color-text-soft);
	font-size: var(--text-md);
	line-height: 1.6;
	text-align: center;
}

/* ── Profile identity card ─────────────────────────────────────── */
.Profile .User {border-radius: var(--radius-lg);}

.ProfileCard {
	position: relative;
	background: var(--color-surface);
	border: 1px solid var(--color-muted-15);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: 0 26px 26px;
	margin-bottom: 28px;
	overflow: hidden;
	text-align: center;
}
.ProfileCard::before {
	content: "";
	display: block;
	height: 104px;
	margin: 0 -26px 0;
	background: linear-gradient(120deg, var(--color-accent-light) 0%, var(--color-link-light) 100%);
}

.ProfileCard-identity {margin-top: -64px;}

.ProfileCard-avatar {line-height: 0;}
.Profile .User .ProfileCard-avatar .PhotoWrap {
	float: none;
	display: inline-block;
	margin: 0 auto;
	padding: 6px;
	background: var(--color-surface);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-sm);
	line-height: 0;
}
.Profile .User .ProfileCard-avatar .ProfilePhoto {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: var(--radius-full);
	display: block;
}

.Profile .User .ProfileCard .Name {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	color: var(--color-primary);
	margin: 14px 0 8px;
	word-break: break-word;
}

.ProfileCard .Roles {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 0 0 4px;
}
.ProfileCard .Roles .Role {
	display: inline-block;
	padding: 4px 13px;
	border-radius: var(--radius-full);
	background: var(--color-accent-light);
	color: var(--color-accent);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.4px;
	text-transform: uppercase;
}
.ProfileCard .Roles .Role-empty {
	background: var(--color-muted-10);
	color: var(--color-muted);
}

.ProfileCard-location {
	color: var(--color-muted);
	font-size: var(--text-base);
	margin-top: 8px;
}

.ProfileCard-bio {
	max-width: 540px;
	margin: 16px auto 4px;
	padding: 14px 18px;
	background: var(--color-bg);
	border-radius: var(--radius-md);
	color: var(--color-text-soft);
	font-size: var(--text-md);
	line-height: 1.6;
}
.ProfileCard-bio p {margin: 0;}
.ProfileCard-bio .Hijack {
	display: inline-block;
	margin-left: 6px;
	font-size: var(--text-sm);
	color: var(--color-accent);
}

/* ── Stat tiles ───────────────────────────────────────────────── */
.ProfileCard-stats.profilebox {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 22px 0 6px;
	padding: 0;
}
.ProfileCard-stats .one {
	flex: 1 1 130px;
	max-width: 170px;
	width: auto;
	margin: 0;
	padding: 16px 12px;
	background: var(--color-bg);
	border: 1px solid var(--color-muted-10);
	border-radius: var(--radius-md);
	text-align: center;
}
.ProfileCard-stats .one dt {
	margin: 0 0 6px;
	color: var(--color-muted);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.4px;
	text-transform: uppercase;
}
.ProfileCard-stats .one dd {
	margin: 0;
	color: var(--color-primary);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	line-height: 1.3;
}

/* ── Meta list (email, IPs, invited by, plugin extras) ────────── */
.ProfileCard-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px 28px;
	margin: 20px auto 0;
	padding: 20px 4px 0;
	text-align: left;
}
.ProfileCard-metaItem {
	min-width: 0;
}
.ProfileCard-meta dt {
	float: none;
	margin: 0 0 2px;
	padding: 0;
	background: none;
	color: var(--color-muted);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
}
.ProfileCard-meta dt:after {content: "";}
.ProfileCard-meta dd {
	margin: 0;
	padding: 0;
	color: var(--color-primary);
	font-size: var(--text-base);
	line-height: 1.4rem;
	word-break: break-word;
}
.ProfileCard-meta dd.Email {color: var(--color-muted-75);}
.ProfileCard-meta dt.MySymbol {display: none;}
.ProfileCard-meta dd .SymbolProfileSize {max-height: 30px; width: auto;}

	.Handle > .SpEditProfile, .NavButton > .SpEditProfile{background-position: -240px -24px; background-position: -247px -29px;}


.PhotoWrap {float: left; margin-right: 10px;}
.Photo.PhotoWrap.PhotoWrapLarge {text-align: center; background: #F1F2F4; border-radius: var(--radius-sm);}
.ProfilePhotoLarge {border-radius: var(--radius-sm);}

.ProfilePRTable td {background: rgb(42, 53, 57); border-radius: var(--radius-lg); color: #FFF; width: 50px; height: 50px; vertical-align: middle; padding: 10px;}

.Profile .User dt.MySymbol {display: none;}

.-EditProfile {margin: 8px 10px 0 0}

#Panel .BoxFilter.BoxProfileFilter {position: relative; display: block; margin: 0 !important; bottom: 0; right: 0; margin: 40px 0 !important; box-shadow: none; z-index: 0;}
	#Panel .BoxFilter.BoxProfileFilter ul {    margin: 0; background: var(--color-muted-5); border-radius: var(--radius-sm); padding: 2px 0;}
	 #Panel .BoxFilter.BoxProfileFilter li {display: block; height: 35px;padding: 0 0.3%;border: none;padding-top: 5px;}
	 #Panel .BoxFilter.BoxProfileFilter li:hover {background: var(--color-muted-20);color: var(--color-primary);border-radius: var(--radius-sm);transition: background var(--transition-base);}

	#Panel .BoxFilter.BoxProfileFilter li a:link, #dashboard_profile_index #Panel .BoxFilter.BoxProfileFilter li a:visited {text-align: left; width: 100%; padding: 7px 12px;}
	#Panel .BoxFilter.BoxProfileFilter li a:hover {color: var(--color-primary); }
	#Panel .BoxFilter.BoxProfileFilter li a.active {background: var(--color-accent); color: #FFF; border: 2px solid var(--color-accent);}
    
	#Panel .BoxFilter.BoxProfileFilter li a .Aside {float: right;}
	#Panel .BoxFilter.BoxProfileFilter li a .Aside .Count {border-radius: var(--radius-sm); width: 45px; height: 28px; display: inline-block; text-align: center; font-weight: var(--weight-bold); background: none;color: var(--color-primary); left: 0; top: -6px; position: relative;}

/* User Profile - Yaga Info */

#dashboard_profile_index h2, #dashboard_profile_reactions h2 {text-align: center;}
.Yaga.ReactionsWrap .DataCounts {display: flex; justify-content: space-between; flex-wrap: wrap;}
.Yaga.ReactionsWrap .CountItemWrap {width: 30%; text-align: center; margin-bottom: 20px;}

.Yaga.ReactionsWrap .CountItem {border: none; padding: 0; margin: 0;}

.Yaga.ReactionsWrap a:link, .Yaga.ReactionsWrap a:visited {display: block; padding: 20px 0; color: var(--color-primary); border-radius: var(--radius-sm);}
.Yaga.ReactionsWrap a:hover {background-color: var(--color-primary); color: #FFF;}

/* An die CSS-Klasse der Reaktion gebunden statt an die Position der Kachel. */
.Yaga.ReactionsWrap .DataCounts .CountItemWrap a.ReactHeart {background: rgba(255, 255, 255, 1) url(../../_icons/reactionLike.svg) no-repeat; background-size: 25px; background-position: 25px; }
.Yaga.ReactionsWrap .DataCounts .CountItemWrap a.ReactHappy {background: rgba(255, 255, 255, 1) url(../../_icons/reactionLaugh.svg) no-repeat; background-size: 25px; background-position: 25px; }
.Yaga.ReactionsWrap .DataCounts .CountItemWrap a.ReactCheckmarkCircle {background: rgba(255, 255, 255, 1) url(../../_icons/reactionHelpful.svg) no-repeat; background-size: 25px; background-position: 25px; }

.Yaga.ReactionsWrap .DataCounts .CountItemWrap a.ReactHeart:hover {background: var(--color-primary) url(../../_icons/reactionLike.svg) no-repeat; background-size: 25px; background-position: 25px; }
.Yaga.ReactionsWrap .DataCounts .CountItemWrap a.ReactHappy:hover {background: var(--color-primary) url(../../_icons/reactionLaugh.svg) no-repeat; background-size: 25px; background-position: 25px; }
.Yaga.ReactionsWrap .DataCounts .CountItemWrap a.ReactCheckmarkCircle:hover {background: var(--color-primary) url(../../_icons/reactionHelpful.svg) no-repeat; background-size: 25px; background-position: 25px; }

.Yaga.ReactionsWrap .Yaga_ReactionName.CountLabel {color: var(--color-primary); font-size: var(--text-base); display: block;}
.Yaga.ReactionsWrap a:hover .Yaga_ReactionName.CountLabel {color: #FFF;}

.Yaga_ReactionCount.CountTotal {font-size: var(--text-2xl); margin-bottom: 4px;}

/* User Profile > Reactions > Ansicht der Reaktionen */

#dashboard_profile_reactions .profilebox {display: none;}
#dashboard_profile_reactions ul.DataList li.Item {margin-bottom: 20px;}
#dashboard_profile_reactions ul.DataList li.Item h3 a { color: var(--color-primary);font-size: var(--text-md);line-height: 1.3em;font-family: var(--font-body);font-weight: var(--weight-medium);letter-spacing: 0.03rem;margin-bottom: 15px;display: block;text-indent: 4px;}
#dashboard_profile_reactions ul.DataList li.Item .Item-Header .MItem.DateCreated {right: 25px;}
#dashboard_profile_reactions ul.DataList li.Item .AuthorWrap {display: none;}

/* YAGA Besten Liste und Earned Badges */

.Badge-Details {text-align: center;}
.Badge-Details h1 {margin: 10px 0 24px 0;}

.Badge-Earned .EarnedThisBadge {background: #FFF; padding: 6px; border-radius: var(--radius-sm); margin-bottom: 20px;}

.Badge-Earned .CellWrap {background: #FFF; padding: 6px; border-radius: var(--radius-sm); margin: 0 1% 5px 0 !important; width: 32.5% !important;}
.Badge-Earned .CellWrap:nth-child(3n) {margin: 0 0% 5px 0 !important;}
.Badge-Earned .DateReceived {display: block;}
.Badge-Earned .PhotoWrap img {width: 35px; height: 35px;}

a.ReactButton {color: var(--color-muted); opacity: 1; margin: 0 3px;}
a.ReactButton:hover .ReactLabel {color: var(--color-accent);}

form.Activity {text-align: center;}
.Activity .TextBoxWrapper {padding: 4px;}

.DataList.Activities li.Item .Title {font-weight: var(--weight-normal); font-size: var(--text-base);}
.DataList.Activities li.Item .Title a:link, .DataList.Activities li.Item .Title a:visited {font-size: 1em; font-weight: var(--weight-normal); color: var(--color-accent);	font-family: var(--font-body);
	font-size: var(--text-base); letter-spacing: 0.2px;
	-webkit-mask-image: none;}
.DataList.Activities li.Item .Title a:hover {color: var(--color-text);}
.Activities a.Title, .Activities .Title, .Activities .Title a {font-size: var(--text-md);}

.Box.Badges {margin-bottom: 25px;}

.Empty {text-align: center; margin-top: 50px;}

/* Profile Options */

.ProfileOptions {float: none; text-align: center;}
	.ProfileOptions .SpEditProfile {display: none;}
	.ProfileOptions .Hidden {display: block; float: left; margin-right: 15px;}
	.ProfileOptions .NavButton {padding: 2px 15px;}
	
.NavButton { background: var(--color-accent); text-shadow: none;font-weight: var(--weight-normal);color: #FFF;font-size: var(--text-md);top: 1px;width: fit-content;padding: 2px 25px;max-width: 200px;line-height: 1.8rem; border-radius: var(--radius-full); text-align: center;    border: none;box-shadow: none;	font-size: var(--text-base);
	letter-spacing: 0.5px; margin-right: 10px;}
.NavButton:hover {background: var(--color-accent-light); color: var(--color-accent); text-shadow: none;}    
.User-Name, .User-Email { margin-right: 30px; display: inline-block;}
.User-Name input, .User-Email input, input.CustomLabel, input.CustomValue {background: #FFF; border-radius: var(--radius-sm); border: none; width: 250px; font-size: 1em; line-height: 1.3em;}

.ButtonGroup.Open .NavButton.Handle {background: var(--color-accent);}

/* Editor */

.editor-file-preview {border: none; height: 35px; width: 250px;}
	.editor-file-preview .file-data {padding-top: 5px;}
	.editor-file-preview .file-data .filename {font-size: var(--text-base); line-height: 1.5rem;}
	.editor-file-preview .file-preview.img {margin: 3px; border-radius: 2px;}
	div.allowToDelete span.delete:hover {color: var(--color-accent);}
	

/* Editor Post Images & Attachments*/

.editor-file-preview {color: #000; border: none; height: auto; width: 290px; background-color: rgb(191 202 217 / 0.3); border: none; padding: 3px; box-shadow: none; border-radius: var(--radius-sm);}
.editor-file-preview .file-preview {display: block; float: left; width: 45px; height: 45px;}
	.editor-file-preview .file-preview.img {margin-right: 8px; border-radius: var(--radius-sm);}
	

/* Errors */

.Errors ul, div.Popup .Errors ul {border: none !important; border-radius: var(--radius-sm); background: var(--color-accent) !important; font-size: var(--text-md);}
.Errors ul li {background: none !important;}

/* Stats Box */

a.Bookmark, a.Bookmarked, a.Bookmarking {position: relative; right: 3px; top: 5px; background: url(../../_icons/SpBookmarksDiscussions.svg) 0 0 no-repeat; background-size: 15px;}
a.Bookmark:hover, a.Bookmarked:hover, a.Bookmarking:hover {background: url(../../_icons/SpBookmarksDiscussionsHover.svg) 0 0 no-repeat; background-size: 15px;}
a.Bookmarked {background: url(../../_icons/SpBookmarksDiscussionsHover.svg) 0 0 no-repeat; background-size: 15px;}

.StatsBox {margin-top: 0px; width: 100px; float: right; font-weight: var(--weight-normal);}
	.StatsBox.ViewsBox, .StatsBox.AnswersBox {color: var(--color-muted-50); width: 43px; padding-top: 23px; font-weight: var(--weight-normal); font-size: var(--text-sm); line-height: 26px;}
	.StatsBox.ViewsBox {background: transparent url(/themes/_icons/itemViews.svg) 50% 30% no-repeat; background-size: 55%;}
	.StatsBox.AnswersBox {background: transparent url(/themes/_icons/itemComments.svg) 50% 30% no-repeat; background-size: 44%;}
	.StatsBox.ViewsBox span, .StatsBox.AnswersBox span {display: none;}

.VotesBox {visibility: hidden; width: 0;}
.FollowsBox {visibility: hidden; width: 0;}

ul.DataList div.Meta strong {box-shadow: none !important;}

.ControlOptions, .Options {position: relative;}
.DataList.Discussions .ControlOptions, .DataList.Discussions .Options {right: 4px;
    position: absolute;}

.Discussions .Options .Flyout {top: 50px; left: 6px; width: 135px;}
 .Comments .Options .Flyout {top: 23px; left: -5px; width: 135px;}
 .Options .Flyout:before, .Options .Flyout:after {right: auto; left: 12px;}

/* Symbold Edit */
img.SymbolDiscussionSize {height: auto; width: 40px; float: right; right: 8px; top: 8px;}


/* Footer */

#footer {color: #FFF; margin: 0 0 0; background-color: #fff3ef; padding: 20px 0 40px 0;}
	#footer div {text-align: left;}
	#footer h4 {padding-left: 0;}


#footer div .flex {margin-bottom: 20px; display: flex; justify-content: space-between;}
	#footer div .flex div {width: 28%;}

	.newsletterDiv a:link, .newsletterDiv a:visited {	background: #FFF url(/themes/_icons/navNewsletter.svg) 13px 0 no-repeat;
		background-size: 65px; font-size: var(--text-md); border-radius: var(--radius-full); margin-top: 20px; padding: 25px 0px 23px 89px; display: block; text-align: left; text-indent: 0px; min-height: 60px; color: var(--color-primary); transition: background var(--transition-base);}
	.newsletterDiv a:hover {color: #FFF; background: var(--color-primary) url(/themes/_icons/navNewsletter.svg) 6px 0 no-repeat; background-size: 65px;}

	.gewinnspielDiv p {color: var(--color-primary); font-size: var(--text-lg); line-height: 1.8rem;}
	.gewinnspielDiv a:link, .gewinnspielDiv a:visited {    border: none; margin-bottom: 7px; padding: 5px 20px; background: var(--color-accent); border-radius: var(--radius-sm); font-weight: var(--weight-normal); display: table; color: #fff; margin-top: 0px; text-align: left; border-radius: var(--radius-full);}
	.gewinnspielDiv a:hover {background: var(--color-primary); color: #FFF; transition: background var(--transition-base); }

	.linksDiv ul {margin: 0 0 20px 0;}
	.linksDiv ul li {display: block; line-height: 28px; text-align: center;}
	.linksDiv ul li.last {border: none;}
	#footer .linksDiv ul li a {color: var(--color-primary);}
	#footer .linksDiv ul li a:hover {color: var(--color-link); transition: background var(--transition-base); }

#footerNew {padding: 70px 0px; margin-top: 0; background: #ddd; font-size: 0.8em; position: relative; top: 0px; background: var(--color-primary);}

.copyright {font-size: var(--text-base); margin: 0; text-align: left; color: #fff; text-align: center; color: rgba(255, 255, 255, 0.4);}
    .copyright img {width: 230px; display: block; margin: 30px auto 70px;}
	.copyright a:link, .copyright a:visited {color: rgba(255, 255, 255, 0.5); transition: all 0.3s ease; font-size: var(--text-sm);}
	.copyright a:hover {color: var(--color-accent);}
	
/* Socials */

#socials {color: var(--color-primary); padding: 1px 0 65px; text-align: center; font-size: var(--text-base); color: rgba(255, 255, 255, 0.4);}
	#socials a {width: 40px; height: 40px; display: inline-block; border-radius: var(--radius-lg); margin: 8px 16px;}
	#socials a.apple {background: transparent url(/themes/_icons/socialApple.svg) 0 0 no-repeat; background-size: 100%;}
	#socials a.play {background: transparent url(/themes/_icons/socialPlay.svg) 0 0 no-repeat; background-size: 100%;}	
	#socials a.facebook {background: transparent url(/themes/_icons/socialFacebook.svg) 0 0 no-repeat; background-size: 100%;}
	#socials a.pinterest {background: transparent url(/themes/_icons/socialPinterest.svg) 0 0 no-repeat; background-size: 100%;}
	#socials a.instagram {background: transparent url(/themes/_icons/socialInstagram.svg) 0 0 no-repeat; background-size: 100%;}
	#socials a:hover {opacity: 1;}

	#socials a:hover {-webkit-filter: hue-rotate(220deg) saturate(5) !important; filter: hue-rotate(220deg) saturate(5) !important;}
 
/* System Messages */

.Errors ul {border: none !important; padding: 12px;}
	.Errors ul li {line-height: 200%;}

/* Banner */

.superbanner {width: 100%; border-radius: var(--radius-sm); margin: -8px 0 30px 0; text-align: center;}
	.superbanner a {cursor: pointer;}
.banner_farright {width: 100%; height: 200px; background: #EFEFEF;}

/* Discussion Marker */

.markergroup {background: #fff !important; display: inline-block; margin-right: 10px; border-bottom: 1px solid #81d0b1;}
.markergroup:empty {display: none;}
.DMarker {padding: 4px 0; letter-spacing: 0px; margin: 0 !important; background: none; display: inline-block; color: #81d0b1; font-size: var(--text-sm);}
.DMarker:last-child {margin-left: 5px !important;}
li.Read .markergroup {color: var(--color-muted-60) !important; border-color: var(--color-muted-60); background: none;}

.DMarker.gray {padding: 3px 8px 3px 8px; border-radius: 10px 2px 10px 2px; background: #555; color: #FFF; display: inline-block; margin-left: 0 !important;}

.ReactionCount {margin-top: 0px; display: inline-block; margin-right: 10px; text-align: center; color: var(--color-accent); height: 22px; position: relative; padding: 2px 0 2px 0; top: 0px; border-bottom: 1px solid var(--color-accent);}
.ReactionCount span {opacity: 1; font-size: var(--text-sm);}

/* Discussion Insert */

.DiscussionInsert {margin-top: 25px;}
.DiscussionInsert .Tools {float: right; font-size: var(--text-base);}
.DiscussionInsert .Tools li {display: inline-block; margin-right: 10px; opacity: 0.3; color: #000;}

.DiscussionInsert div {border-radius: var(--radius-sm); background: linear-gradient(0deg, white, transparent);}
.DiscussionInsert span {font-size: var(--text-md); font-style: italic; margin: 0 0 10px 10px; display: block;}
.DiscussionInsert div.iwoman {padding: 15px}

a.umfrage-ergebnisse:link, .umfrage-ergebnisse:visited {
	color: var(--color-accent);
	background: transparent;
	border-bottom: 1px solid var(--cat-red);
	box-shadow: inset 0 -1px 0 var(--cat-red);
	font-weight: var(--weight-normal);
	display: table;
	margin: 20px auto 0;
}
a.umfrage-ergebnisse:hover {color: var(--color-primary);}

a.umfrage-ergebnisse .arrow {
	position: relative;
	top: 11px;
}

.button span.arrow, button span.arrow, a span.arrow {
  background: transparent url("../../_icons/buttonArrowDark.svg") center right no-repeat;
	background-size: auto;
  width: 17px;
  height: 12px;
  background-size: 21px;
  display: inline-block;
  margin-left: 10px;
  transition: transform 0.5s;
}

/* Yaga Sites */

#yaga_badges_detail .Badge-Details {background: #FFF; padding: 25px 15px 15px 15px; text-align: center; border-radius: 3px 3px 0 0;}
#yaga_badges_detail .Badge-Details h1 {font-size: 1.7em; color: #4C4E4D; text-align: center; font-weight: var(--weight-bold); font-style: italic; border-bottom: none; margin-bottom: 20px; padding-bottom: 10px; font-weight: var(--weight-normal);}
#yaga_badges_detail .ContentColumn .ProfilePhotoMedium {width: 50px; height: 50px;}
#yaga_badges_detail .RecentRecipients .Cell {text-align: left;}

#yaga_badges_detail .EarnedThisBadge a.PhotoWrap {display: block; float: none; margin: 0;}

#yaga_badges_detail .Badge-Earned {font-size: var(--text-md); background: #FFF; padding: 15px 15px 15px 15px; text-align: center; border-radius: 0 0 3px 3px;}
#yaga_badges_detail .Badge-Earned h2 {font-size: 1.7em; color: #4C4E4D; text-align: center; font-weight: var(--weight-bold); font-style: italic;  margin: 50px 0 20px; padding-bottom: 10px; font-weight: var(--weight-normal);}
#yaga_badges_detail .Badge-Earned .DateReceived {margin-left: 0; display: block;}
#yaga_badges_detail .Badge-Earned p {font-size: var(--text-md);}

.PhotoGrid img {width: 42px; height: 42px; margin: 4px;}

.MItem.BadgePoints {float: left; display: inline-block; font-size: var(--text-md);}
.ItemContent.Badge .Title {padding: 0 !important;}
.ItemContent.Badge p {float: left; display: inline-block; margin-top: 0; font-size: var(--text-md);}


/* Conversation Fixes */

#conversations_messages_all .PageControls.Top, #conversations_messages_inbox .PageControls.Top {right: 0; top: 0px; float: left; width: 100%;}
#conversations_messages_all #Panel .NewConversation, #conversations_messages_inbox #Panel .NewConversation {display: none; float: left;}
#conversations_messages_all .PagerWrap, #conversations_messages_inbox .PagerWrap {float: right;}

#conversations_messages_all .DataListWrap, #conversations_messages_inbox .DataListWrap {margin-top: 75px;}

.Conversations .Excerpt a {color: var(--color-primary) !important;}

#conversations_messages_add #Body, #vanilla_post_discussion #Body {margin-top: 0;}

.FormWrapper {border-radius: var(--radius-sm); padding: 10px;}
.FormWrapper label, #ConversationForm label {display: block; text-align: left; color: var(--color-text); font-weight: var(--weight-normal); margin-bottom: 10px; font-size: var(--text-base);}
  .FormWrapper {background: var(--color-muted-10);}
  #dashboard_entry_signin .FormWrapper {background: #FFF;}
  
#token-input-Form_To  {padding: 6px 3px; border-radius: var(--radius-sm); width: 100%; border: none; background: var(--color-text); padding: 5px 8px; border-radius: var(--radius-sm);}

#ConversationForm #token-input-Form_To {background: #FFF;}
#ConversationForm .token-input-token p {color: var(--color-text);}

.token-input-dropdown {background: #FFF; border-radius: var(--radius-sm); box-shadow: 0 0 4px #777; padding: 8px; cursor: pointer;}

/* Login Popup */

.Overlay {
	background: rgb(255 255 255 / 70%);
	z-index: var(--z-modal-backdrop);
}

div.Popup.SignInPopup {
}

div.Popup .Border {
	margin: 0 auto;
	text-align: left;
	max-width: 600px;
	display: inline-block;
	box-shadow: 5px 5px 0px var(--color-primary);
	border: 1.5px solid var(--color-primary);
	padding: 0;
}

div.Popup .Body {background: linear-gradient(300deg,transparent,hsla(0,0%,95%,.29) 47.39%,#fff 65%),linear-gradient(336deg,#f9ddf1 .07%,#e5e1ff 16.73%,#daedff 34.48%,#e2f4e3 49.98%,#ebf5d8 66.12%,#faf2da 81.95%,#fbe5d8 99.9%);
	border-radius: 7px;
}

div.Popup .Body .FormWrapper {
	background: none;
}

div.Popup h1 {text-align: center; font-weight: var(--weight-normal); margin-top: 10px;}

#Form_User_SignIn .CreateAccount {text-align: center; margin-top: 30px;}
#Form_User_SignIn .CreateAccount a:link, #Form_User_SignIn .CreateAccount a:visited {display: block; font-size: var(--text-md); line-height: 1.5em; margin-top: 10px; color: #FFF; background: var(--color-accent); padding: 3px 15px 3px 15px; border-radius: var(--radius-full);}
#Form_User_SignIn .CreateAccount a:hover {background: var(--color-accent-light); color: var(--color-accent);}

#Form_User_SignIn .MainForm {text-align: center; padding: 0 0 12px 0;}

#Form_User_SignIn .MainForm #Form_Email, #Form_User_SignIn .MainForm #Form_Password {border: none; border-radius: var(--radius-sm); width: 100%; border: 1px solid var(--color-primary); padding: 8px 12px;}
#Form_User_SignIn label {margin-bottom: 10px; font-weight: var(--weight-normal); color: var(--color-text); text-align: center;}
#Form_User_SignIn label.CheckBoxLabel {color: var(--color-text); margin-left: 15px; text-align: center;}
#Form_User_SignIn .ForgotPassword {position: relative; text-align: center; display: block;}
#Form_User_SignIn .ForgotPassword:hover {color: rgba(0, 0, 0, 0.9);}

#Form_User_SignIn .Button {width:100%;}
.MultipleEntryMethods .Methods {text-align: center; padding: 0;}

body#dashboard_entry_password #Content input.Password, body#dashboard_entry_signin #Content input.Password, body#dashboard_entry_index #Content input.Password, .SignInPopup input.Password, .MainForm .InputBox {
	border: 1px solid #bfcad647;
	animation: fadein var(--fadein-duration);
	border-radius: var(--radius-lg);
	text-align: center;
	width: 100%;
}


/* Login if page */

#dashboard_entry_signin #Body .ContentColumn {width: 1075px;}
#dashboard_entry_signin h1 {text-align: center; font-weight: var(--weight-normal); margin-top: 0;}
#dashboard_entry_signin #Form_User_SignIn {width: 340px; margin: 0 auto; background: #FFF; padding: 20px;     background: #FFF;
    border-radius: var(--radius-sm);
    padding: 25px;
    margin: 0 auto;
    box-shadow: 0 15px 35px 0 var(--color-primary-10);}
#dashboard_entry_signin .MultipleEntryMethods .MainForm, #dashboard_entry_signin #Form_User_SignIn .MultipleEntryMethods .MainForm {float: none;}
#dashboard_entry_signin .MainForm li:nth-child(2) {margin-top: 10px;}
/* Methods-Bereich (Facebook, Google, etc.) ausblenden — Login via E-Mail-Link
   wird direkt im Formular über "Noch kein Benutzerkonto?" angezeigt. */
#dashboard_entry_signin .MultipleEntryMethods .Methods {display: none;}
.Methods-label {display: none;}
.Methods .Method {border-radius: var(--radius-sm); color: #FFF !important;}

#dashboard_entry_signin #Form_User_SignIn .Button {display: block;}
#dashboard_entry_signin #Form_User_SignIn .CreateAccount {margin-top: 20px;}

/* E-Mail-Link-Button */
.EmailLinkEntry {margin: 16px 0 4px;}
.EmailLinkEntry .EmailLinkButton {display: block; text-align: center; background: none; border: 1px solid #bfcad6; color: var(--color-primary) !important; border-radius: var(--radius-full); padding: 4px 17px;}
.EmailLinkEntry .EmailLinkButton:hover {border-color: var(--color-primary); background: #f5f7fa;}

/* Inform Messages */
.InformMessages .Title {color: var(--color-accent);}
.InformMessages.InformMessage div {color: var(--color-accent);}
.InformMessages .InformMessage a {color: var(--color-accent);}


/* In this Conversation */
.Conversations #Panel .ClearConversation {margin-bottom: 40px;}
.Conversations #Panel .Box {margin-bottom: 40px;}
.Conversations #Panel .PanelInfo li {border: none; padding: 0;}

.Box.InThisConversation {margin-top: 40px;}
	.Box.InThisConversation ul.PanelInfo li {display: inline-block; margin-right: 5px; margin-bottom: 5px;}
	.Box.InThisConversation ul.PanelInfo li a {padding: 9px 10px 8px 6px; color: var(--color-text);}
	.Box.InThisConversation ul.PanelInfo li a:hover {background: var(--color-muted-10);
		color: var(--color-text);
		border-radius: var(--radius-lg);
		padding: 9px 10px 8px 6px;} 
	.Box.InThisConversation ul.PanelInfo li a img {border-radius: var(--radius-full); width: 25px; height: 25px; margin: 8px 8px 0 0;}

.Box.AddPeople #Form_AddPeople {padding: 12px; border-radius: var(--radius-sm);}
.Box.AddPeople #Form_AddPeople input#token-input-Form_AddPeople {background: #FFF; border-radius: var(--radius-sm); padding: 3px 7px; border: none; float: left; width: 100px;}


/* Profil bearbeiten */

.EditMode .ProfileOptions {/* float: left; margin-top: 20px; */ float: none; margin: 20px 0 20px 0;}
	.EditMode .ProfileOptions a {padding: 8px 15px;
		font-weight: var(--weight-normal);
		top: 1px;
		border: none;
		margin-bottom: 10px;
		background: var(--color-accent);
		font-size: var(--text-md);
		line-height: 1.8rem;
		color: #FFF;
		text-align: center;
		border-radius: var(--radius-full);}
	.EditMode .ProfileOptions a:hover {background: var(--color-text);}

#Panel .UserBox {text-align: center; background: var(--color-text); float: none; margin-bottom: -12px; width: 100%; padding: 10px 0 0 10px; border-radius: 3px 3px 0 0;}
#Panel .WhoIs a.Username {font-size: var(--text-md); text-align: left;}
#Panel .Email {position: relative; left: 10px; top: -20px; color: #FFF;}
#Panel .PhotoWrap img {/*width: 100%;*/ height: auto;}
#Panel .EditMode .ProfileOptions {float: right; margin-top: 20px;}

.Box.Group.SideMenu ul.PanelInfo {text-align: center; float: none; margin-bottom: 35px;     margin: 0;
    background: var(--color-muted-5);
    border-radius: var(--radius-sm);
    margin-top: 38px;}
    .Box.Group.SideMenu:before {content: "Einstellungen";  text-align: left;
    margin-bottom: 10px;
    padding-left: 8px;
    font-weight: var(--weight-normal);
    line-height: 2rem;
    color: var(--color-muted-50);
    letter-spacing: 0px;
    top: 30px;
    position: relative;
    font-size: var(--text-base);}
	.Box.Group.SideMenu ul li {border-bottom: 1px solid #FFF;}
	.Box.Group.SideMenu ul li:last-child {border: none;}

.Box.Group.SideMenu ul li.ThumbnailLink, .Box.Group.SideMenu ul li.RemovePictureLink, .Box.Group.SideMenu ul li.link-social {display: none;}

/* System Messages */

.InformWrapper {
	display: block;
	margin: 10px;
	background: transparent;
	transition: all var(--transition-base);
}

.InformMessages {z-index: var(--z-toast); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left);}
	.InformMessages .InformMessage {	box-shadow: 0 15px 35px 0 rgb(50 66 93 / 50%);
		z-index: var(--z-toast);
		position: relative;
		color: var(--color-primary);
		padding: 14px 14px;
		background: rgb(209 218 227 / 55%)!important;
		border-radius: var(--radius-sm);
		backdrop-filter: blur(10px);
		transition: all var(--transition-base);}
		.InformMessages .InformMessage:hover {background: rgba(255, 255, 255, 0.7) !important;}
	.InformMessageBody {text-shadow: none; color: var(--color-primary);}
	.InformMessages .Actions a {color: var(--color-accent); text-shadow: none;}
		.InformMessages .InformMessage a:hover {color: var(--color-link);}

/* Hide AdSPots */

.Dashboard.Profile.EditMode .adSpots,
#vanilla_discussions_bookmarked .adSpots,
#conversations_messages_index .adSpots,
#dashboard_profile_notifications .adSpots {display: none;}

/* New Style kill it if it crushes others */

.Box.Group.SideMenu ul li {border-bottom: 0px solid #FFF;     display: block;
    height: 35px;
    border: none; padding: 0;}
	.Box.Group.SideMenu ul li.Active {background: var(--color-muted-10); color: var(--color-text);}
	.Box.Group.SideMenu ul li.Active a {font-weight: var(--weight-normal); background: var(--color-muted-10) !important;}  
	.Box.Group.SideMenu ul li a:link, .Box.Group.SideMenu ul li a:visited {
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    line-height: 1.8rem;
    color: var(--color-primary);    width: 100%;
    padding: 4px 12px; height: 35px; display: block;}
	.Box.Group.SideMenu ul li a:hover {    background: var(--color-muted-10);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    transition: background var(--transition-base);}

/* Preferences Page */

.Preferences.pageBox {padding: 0;}
.Preferences.pageBox h2 {
    color: var(--color-primary);
    background: #ffffff;
    border-radius: 5px 20px;
    width: fit-content;
    padding: 3px 15px;
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
    letter-spacing: 0.02em;
    margin: 25px 0 15px 0;
    line-height: 2rem;
}
.Preferences.pageBox h2:first-of-type {margin-top: 0;}

table.PreferenceGroup {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    margin-bottom: 10px;
    overflow: hidden;
}
table.PreferenceGroup thead tr {background: var(--color-muted-5);}
table.PreferenceGroup th {
    padding: 10px 12px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-muted-12);
    white-space: nowrap;
}
table.PreferenceGroup th:first-child {text-align: left;}

table.PreferenceGroup td {
    padding: 10px 12px;
    font-size: var(--text-base);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-muted-10);
}
table.PreferenceGroup tbody tr:last-child td {border-bottom: none;}
table.PreferenceGroup tbody tr:hover td {background: var(--color-muted-5); transition: background var(--transition-base);}

table.PreferenceGroup td.Description {font-weight: var(--weight-normal); line-height: 1.4;}

td.PrefCheckBox, th.PrefCheckBox {width: 60px !important; text-align: center !important;}
td.PrefCheckBox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

#Form_Invitation th, #Form_Invitation td {padding: 5px 6px;}

.Preferences .Button.Primary {
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    padding: 8px 28px;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    cursor: pointer;
    margin-top: 20px;
    letter-spacing: 0.02em;
}
.Preferences .Button.Primary:hover {background: var(--color-primary);}

#dashboard_profile_connections .ContentColumn .Button {width: 121px; font-size: 1.3em; margin-bottom: 0;}

#dashboard_profile_signature .FormTitleWrapper ul label:nth-child(2) {margin-bottom: 30px;}
#dashboard_profile_signature .FormTitleWrapper ul label:nth-child(3), #dashboard_profile_signature .FormTitleWrapper ul label:nth-child(4) {display: none;}

#dashboard_profile_signature .ContentColumn li:nth-child(1) {display: none;}

/* Suche */

#dashboard_search_index .DataList .Item {background: rgba(255, 255, 255, 1) !important; padding: 8px 8px; margin-bottom: 5px; border-radius: var(--radius-sm);}

/* Discussion geschlossen */

.Foot.Closed {margin-top: 80px;}
.Note.Closed {display: block; clear: both; margin: 20px auto 20px auto; background: var(--color-text); color: #FFF; padding: 7px 8px; border-radius: var(--radius-sm); text-align: center;}


/* Sign in or register to comment */

.Note.Closed.SignInOrRegister {margin: 25px 0 0 0; display: block; clear: both; color: var(--color-primary) !important; padding: 20px 20px; border-radius: var(--radius-sm); text-align: center; border-radius: 7px; background: #fff !important; font-size: 1rem !important; line-height: 1.7em;}
	.Note.Closed.SignInOrRegister span.heyhallo {font-size: 1.5em; display: block; float: left; transform:rotate(-15deg); font-weight: var(--weight-bold); position: relative; top: -5px; left: -5px;}
	.Note.Closed.SignInOrRegister a:link, .Note.Closed.SignInOrRegister a:visited {margin-top: 20px; background: var(--color-link); color: #FFF; padding: 5px 10px; margin: 20px auto 0; border-radius: var(--radius-lg); display: block; max-width: 220px;}
	.Note.Closed.SignInOrRegister a:hover {background: var(--color-accent);}


/* Activity Wall */
.DataList.ActivityComments {background: #EFEFEF; margin-top: 20px; border-radius: var(--radius-sm);}

.ActivityComment {background: none !important; margin-bottom: 5px !important;}
.ActivityComment:hover {border: none !important; margin-left: 0px !important;}
.ActivityComment .Meta {float: right; position: absolute; top: 7px; right: 7px;}
.ActivityComment.CommentForm {background: none;}

.Activities .DataList li {background: none;}
.Activities a.CommentLink, .Activities a.CommentLink:hover {border: none !important; border-radius: var(--radius-sm); color: var(--color-text); font-size: 1em;}

.Item.Activity .Excerpt {color: var(--color-text);}
	.Item.Activity .Excerpt img {max-width: 100%;}

/* online now */
#OnlineNow {background: transparent;}
.onimage {position: relative; top: 0; margin: 0; padding: 0; border: 0; width: 40px; height: 40px; border-radius: var(--radius-full) !important; background: none !important;}
#OnlineNow.Box ul.PanelInfo {white-space: pre-line; border: 0 none; text-align: left; width: 100%; margin-bottom: 50px; min-height: 40px; white-space: pre-line; border: 0 none; text-align: left; width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
#OnlineNow.Box ul.PanelInfo li {width: 40px; height: 40px; padding: 0; border: 0 none; text-align: left; white-space: nowrap; padding: 0; box-shadow: none; background:transparent; margin: 0px 0px 40px 0px; width: 26%; text-align: center;}
#OnlineNow.Box ul.PanelInfo li a.PhotoWrap {padding: 0; float: none;}
#OnlineNow.Box ul.PanelInfo li div.Time {padding: 0; text-align: center; min-height: 20px; width: 100%; overflow: visible; font-size: 0.9em; color: var(--color-primary); overflow: hidden;    font-size: var(--text-xs);
    margin-top: 5px;}
#OnlineNow.Box ul.PanelInfo li div.Time a.Popup.Name, #OnlineNow.Box ul.PanelInfo li div.Time a.Popup.Time {color: #fff; position: relative; left: 0; top: 0; padding:4px!important; min-width: 80px; text-align: center; min-height: 15px; width: 100%; background:rgba(0,0,0,.7); border: 1px solid #222; box-shadow: 1px 1px 6px 0 #000; display: inline; font-size:10px!important; z-index:var(--z-tooltip)!important;}


/* Baby Status */

.Comment .bistduschwanger-ich-moechte-schwanger-werden {background: url(/themes/_icons/baby-status/kinderwunsch.svg) no-repeat; background-position: 97% 11px; background-size: 30px;}
.Comment .bistduschwanger-ich-bin-schwanger {background: url(/themes/_icons/baby-status/schwangerNeutral.svg) no-repeat; background-position: 97% 11px; background-size: 30px;}
.Comment .bistduschwanger-ich-habe-einen-kinderwunsch  {background: url(/themes/_icons/baby-status/schwangerNeutral.svg) no-repeat; background-position: 97% 11px; background-size: 30px;}

.babystatus-1-maedchen .Item-Header {background: url(/themes/_icons/baby-status/1-maedchen.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}
.babystatus-2-maedchen .Item-Header {background: url(/themes/_icons/baby-status/2-maedchen.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}
.babystatus-1-neutral .Item-Header {background: url(/themes/_icons/baby-status/1-neutral.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}
.babystatus-1-junge .Item-Header {background: url(/themes/_icons/baby-status/1-junge.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}
.babystatus-2-jungen .Item-Header {background: url(/themes/_icons/baby-status/2-jungen.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}
.babystatus-2-neutral .Item-Header {background: url(/themes/_icons/baby-status/2-neutral.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}
.babystatus-3-neutral .Item-Header {background: url(/themes/_icons/baby-status/3-neutral.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}
.babystatus-3-maedchen .Item-Header {background: url(/themes/_icons/baby-status/3-maedchen.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}
.babystatus-3-jungen .Item-Header {background: url(/themes/_icons/baby-status/3-jungen.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}
.babystatus-4-neutral .Item-Header {background: url(/themes/_icons/baby-status/4-neutral.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}
.babystatus-4-maedchen .Item-Header {background: url(/themes/_icons/baby-status/4-maedchen.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}
.babystatus-4-jungen .Item-Header {background: url(/themes/_icons/baby-status/4-jungen.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}
.babystatus-5-kinder .Item-Header {background: url(/themes/_icons/baby-status/5-kinder.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}
.babystatus-1-maedchen-1-junge .Item-Header {background: url(/themes/_icons/baby-status/1-junge-1maedchen.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}
.babystatus-2-maedchen-1-junge .Item-Header {background: url(/themes/_icons/baby-status/1-junge-2maedchen.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}
.babystatus-2-jungen-1-maedchen .Item-Header {background: url(/themes/_icons/baby-status/2-jungen-1maedchen.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}
.babystatus-2-maedchen-2-jungen .Item-Header {background: url(/themes/_icons/baby-status/2-jungen-2maedchen.svg) no-repeat; background-position: 100% 11px; background-size: 28px;}

.Item-Header.DiscussionHeader {background-position: 100% 1px; }


/* My Attachments */

#dashboard_profile_myattachments #Status, #dashboard_profile_myattachments .About, #dashboard_profile_myattachments .Yaga.ReactionsWrap {display: none;}

#dashboard_profile_myattachments .imagepair {display: inline-block; width: 30.4%; background: #fff; padding: 2%; margin: 1% 1% 2% 2%; border-radius: var(--radius-sm); vertical-align: top; text-align: center; min-height: 181px;}
#dashboard_profile_myattachments .imagepair:nth-child(3n) {margin-right: 0%;}
#dashboard_profile_myattachments .imagepair .imagethumb > a {min-height: 133px; display: block;}
#dashboard_profile_myattachments .imagepair img {border-radius: var(--radius-sm); max-width: 100%; height: auto;}
#dashboard_profile_myattachments .imagepair p.imagename {display: none;}
#dashboard_profile_myattachments .imagepair p.gotolink {margin: 0;}
#dashboard_profile_myattachments .PagerWrap {margin: 25px; display: block; height: 15px;}


/* Yaga Bestenliste */

#dashboard_profile_best .BlogList h3 {margin-bottom: 10px;}
#dashboard_profile_best .BlogList h3 a:link, #dashboard_profile_best .BlogList h3 a:visited {color: rgb(42, 53, 57); font-size: 1.3em; font-weight: var(--weight-normal);}
#dashboard_profile_best .BlogList .Item-Header {display: none;}

#dashboard_profile_best #Status, #dashboard_profile_best .About, #dashboard_profile_best .Yaga.ReactionsWrap {display: none;}


/* Yaga - Wer hat den Badge-Liste */

	.Badge-Details img {max-width: 100px; margin-bottom: 20px;}

	.Badge-Earned .BadgeCountDisplay {text-align: center;}
	.Badge-Earned h2 {padding: 3px 2px;
    text-align: center;
    font-weight: var(--weight-normal);
    margin-top: 30px;
    font-size: var(--text-base);
    color: var(--color-muted-75);}
    .EarnedThisBadge {text-align: center;}
		.EarnedThisBadge .PhotoWrap {display: none;}
	
	.Badge-Earned .RecentRecipients {display: flex; justify-content: space-between; flex-wrap: wrap;}
	.Badge-Earned .RecentRecipients .CellWrap {width: 30%; padding: 20px 0; text-align: center; margin-bottom: 7px !important; border-radius: var(--radius-sm); background: var(--color-muted-5); float: none; display: block;}
    	.Badge-Earned .RecentRecipients .CellWrap .PhotoWrap {display: block; margin: 0 0 10px 0; float: none; margin-right: 0px !important;}
    	.Badge-Earned .RecentRecipients .CellWrap .DateReceived {color: var(--color-primary); font-size: var(--text-base);}

/* Error Messages */

#dashboard_home_error #Body .ContentColumn {width: 100%;}

/* Flagging Plugin */

ul li div.Warning {margin: 10px 0px;}
div.FlaggedContent {padding: 20px;}
div.FlaggedContent div.FlaggedItem {border-bottom: 1px solid #e0e0e0; padding: 10px 20px;}
div.FlaggedContent div.FlaggedItem div.FlaggedItemURL {font-weight: var(--weight-bold);}
div.FlaggedContent div.FlaggedItem div.FlaggedItemComment {font-style: italic;}
div.FlaggedContent div.FlaggedItem div.OtherComplaints {margin-top: 5px; padding-top: 5px; border-top: 1px solid #A5D0E7;}
div.FlaggedContent div.FlaggedItem div.OtherComplaints div.FlaggedOtherCell {margin-left: 20px; padding: 5px; background-color: #C2E7FC;}


/* All Tags Plugin */

body.alltags .ContentColumn .PanelColumn {
	width: 100%;
	padding: 0;
	margin: 0;
	max-width: none;
	width: auto;
}

body.alltags .PageDescription {
	width: 100%;
}

ul.AllTagsList {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: auto;
	flex-direction: row;
}

ul.AllTagsList li {
	border: none;
}

ul.AllTagsList li a:link, ul.AllTagsList li a:visited {
	border-radius: var(--radius-full);
	padding: 7px 15px;
	background: #fff;
	color: var(--color-primary);
	font-size: var(--text-base);
	margin-bottom: -8px;
	display: block;
	font-size: var(--text-base);
	box-shadow: var(--shadow-md);
}


ul.AllTagsList li a:hover {
	background: var(--color-muted-10);
	color: var(--color-primary);
}


ul.AllTagsList li .Aside {
	float: right;
	position: relative;
	margin-left: 7px;
	background: var(--color-primary);
	border-radius: var(--radius-lg);
	color: #FFF !important;
	padding: 0 3px 0 3px;
}	

ul.AllTagsList li .Aside .Count {
	background: none;
}

.FilterMenu .alltagsnav {display: none !important;}

/*  User Data Export */

.UserDataExportWrap form {margin-top: 20px;}

/* Search Plus Plugin  */

body.Section-SearchResults .SearchForm .SiteSearch {max-width: 100% !important;}
body.Section-SearchResults .SearchForm .SiteSearch .Button {top: 16px; right: 15px;}

.SearchPlusForm {background: #FFF; font-size: 1em; margin-top: 15px;}
.SearchPlusForm label {display: block; margin-bottom: 6px; font-size: var(--text-md);  }
.SearchPlusForm select {margin-right: 10px; font-size: 16px !important;}
.SearchPlusForm li {margin-bottom: 7px; vertical-align: top;}
.SearchPlusForm li:last-child {margin-bottom: 0;}
.SearchPlusForm input#token-input-Form_User {width: 180px !important; border: solid 1px #bbb; border-radius: .35ex; background: #FFF; padding: 4px 10px !important; font-size: var(--text-md); margin-top: -3px;}

.SearchPlusForm .token-input-input-token .token-input-focused {margin-bottom: 0;}
.SearchPlusForm .token-input-input-token {height: 23px;}
.SearchPlusCategory {display: inline-block; width: 36%; padding: 12px 0 15px 0;}
.SearchPlusCategory select {width: 80%;}
.SearchPlusUser {display: inline-block; width: 34%; padding: 12px 0 15px 0;}
	.SearchPlusUser ul.token-input-list {border: none; background: transparent; padding: 3px 0;}
	.SearchPlusUser ul.token-input-list p {color:var(--color-text);}
.SearchPlusRecordType {display: inline-block; width: 29%; padding: 12px 0 15px 0;}
	.SearchPlusRecordType select {width: 80%;}
.SearchPlusPeriod .SearchPlusFrom {display: inline-block; width: 36%; padding: 12px 0 15px 0;}
.SearchPlusPeriod .SearchPlusTo {display: inline-block; width: 46%; padding: 12px 0 15px 0;}
.SearchPlusForm  #Form_NarrowSearch {padding: 2px 15px; font-size: 16px; font-weight: var(--weight-normal);	font-family: var(--font-body); letter-spacing: 0.5px;}
.SearchPlusForm li.flatpickr-listitem {margin:30px 0 0 0; height: 20px;}
.flatpickr-wrapper input {cursor: pointer; position: relative; z-index: 1; font-size: var(--text-md); padding: 9px 10px; border-radius: var(--radius-sm); border: 1px solid #bbb;}

/* Gallery */

.Gallery .PageControls.Top {display: none;}

.GalleryAlbum {background: rgba(255, 255, 255, 1); box-shadow: 0 15px 35px 0 var(--color-primary-10); border: none;}
	.GalleryAlbum:hover, .GalleryAlbum:focus {border: none; box-shadow: 0 15px 35px 0 rgba(50,66,93, 0.3);}
	.GalleryAlbum:hover .Title {color: var(--color-accent);}

	.GalleryAlbum .Title {height: 50px; line-height: 3.4rem; font-size: var(--text-md); color: var(--color-primary);}
	.GalleryAlbum .Thumbnail.Add {line-height: 75px;}
	
.GalleryAlbum#AddAlbum {border: none;}
	.GalleryAlbum#AddAlbum .Title {margin-top: 50px;}
.GalleryAlbum .Thumbnail.Add {margin: 28px auto; text-align: center; font-size: 5rem; width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--color-muted-50); color: var(--color-primary); line-height: 56px;}	

.GalleryAlbum .AlbumOptions {position: relative; top: -6px;}
	.GalleryAlbum .AlbumOptions a:link, 	.GalleryAlbum .AlbumOptions a:visited {border-radius: var(--radius-full); background: rgba(77, 91, 109, 0.1); width: 32px; height: 32px;}
	.GalleryAlbum .AlbumOptions a:hover {background: var(--color-muted-30);}

.GalleryImage img {display: block; height: auto; border-radius: var(--radius-sm); margin: 0 auto 6px auto; box-shadow: 0 15px 35px 0 var(--color-primary-10);}
	.GalleryImage .ImageOptions {position: relative; top: -30px;}
	.GalleryImage .ImageOptions .Date {font-size: var(--text-sm); text-shadow: none; color: rgba(255, 255, 255, 1); display: block; padding: 0;}
    .GalleryImage .ImageOptions a:link, .GalleryImage .ImageOptions a:visited {    font-size: var(--text-xl);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.4);
    width: 32px;
    height: 32px;
    padding: 4px;
    margin: 8px;
    display: inline-block;
    position: relative;
    top: -70px;}
    .GalleryImage .ImageOptions a:hover {background: var(--color-primary);}
    .GalleryImage .ImageOptions i.icon {font-size: var(--text-xl); text-shadow: none; color: #FFF;}
    .GalleryImage .ImageOptions .icon-trash:before, .GalleryImage .ImageOptions .icon-paper-clip:before {color: #FFF;}

.icon-compose:before, .icon-trash:before, .icon-paper-clip:before {color: var(--color-primary); font-size: var(--text-xl);}
	.icon-compose:before {font-size: var(--text-base); position: relative; top: -3px;}

/* Karten */

#karten {text-align: left;}
#footer h4 {color: #f5957b; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-medium); margin-bottom: 30px;}
#karten a:link, #karten a:visited {display: inline-block; border-radius: var(--radius-sm); padding: 4px 14px; margin: 3px 3px 6px 0; background: #fff; color: var(--color-primary); font-size: var(--text-base); border-radius: var(--radius-full);}
#karten a:hover {background: var(--color-primary); color: #FFF; transition: background var(--transition-base); }

#karten .headline , #footer .headline {display: block; padding: 12px 0px; font-size: var(--text-md); color: var(--color-primary);}

/* NAV */

/* Flex */

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

	#menuu ul {width: 47%;}

#toggle {position: fixed; width: 32px; height: 31px; top: 20px; left: 15px; z-index: var(--z-drawer-toggle); cursor: pointer; background: none; border: none; padding: 0; -webkit-appearance: none; appearance: none;}
	#toggle:focus-visible {outline: 2px solid var(--color-link); outline-offset: 4px; border-radius: var(--radius-sm);}

#menuBackdrop {position: fixed; inset: 0; background: rgba(19, 32, 66, 0.45); z-index: var(--z-drawer-backdrop); display: none;}
	body.menu-open #menuBackdrop {display: block;}
	body.menu-open {overflow: hidden;}
	#toggle span {display: block; height: 2px; width: 26px; border-radius: var(--radius-sm); background: #000; transition: all 0.3s ease; cursor: pointer;}    
	#toggle span:nth-child(2), #toggle span:nth-child(3) {margin-top: 6px;}
	 #toggle span:nth-child(2) {width: 22px;}
	 #toggle span:nth-child(3) {width: 15px;}
		#toggle.active span:nth-child(1) {opacity: 0;}
		#toggle.active span:nth-child(2), #toggle.active span:nth-child(3) {margin-top: 6px; transform: rotate(45deg); position: relative; left: -1px; background: #FFF; width: 26px;}
		#toggle.active span:nth-child(3) {transform: rotate(-45deg); left: -1px; top: -9px;}

.registrieren, .hidden {display: none;}

	#menuuu {display: block; width: 100%; min-width: 100%; height: auto; position: fixed; top: 170px; left: 0; background: #fff; z-index: var(--z-drawer); padding: 20px; box-shadow: 0 0 10px var(--color-muted-30); overflow-y: auto; -webkit-overflow-scrolling: touch; height: 100vh; height: 100dvh;}
		#menuuu .flex ul {margin-top: 10px; width: 15%; color: rgba(126, 150, 179, 0.8); margin-bottom: 10px;}
		#menuuu .flex ul li.menuuuName {border: none; text-indent: 2px; text-transform: uppercase; margin-bottom: 4px; font-size: var(--text-base);}
		#menuuu .flex ul li {list-style: none; text-indent: 0px;}
			#menuuu .flex ul a:link, #menuuu .flex ul a:visited {padding: 2px 3px; color: var(--color-primary); font-size: var(--text-base); margin-bottom: 5px; display: block; font-style: normal;}
			
	#menuuu .segment {width: 100%; text-align: center;}
		#menuuu .segment span {display: block; margin: 40px auto 10px; text-align: center; font-size: var(--text-md); color: var(--color-primary);}				
		
				
		.isadmin {display: none;}


#Frame {padding-bottom: 60px;}

#bigheader {position: fixed;
	z-index: var(--z-header);
	width: 100%;
}

.bigheader {
	border-bottom: 1px solid #bfcad647;
	height: 105px;
	background: linear-gradient(224deg,transparent,hsla(0,0%,95%,.29) 47.39%,#fff 65%),linear-gradient(336deg,#f9ddf1 .07%,#e5e1ff 16.73%,#daedff 34.48%,#e2f4e3 49.98%,#ebf5d8 66.12%,#faf2da 81.95%,#fbe5d8 99.9%);
	transition: all var(--transition-base);
}

.bigheader-alt {
	box-shadow: 0 0 10px rgb(19 32 66 / 15%);
	transition: all var(--transition-base);
	border-bottom: 1px solid #bfcad647;
	height: 105px;
	background: linear-gradient(224deg,transparent,hsla(0,0%,95%,.29) 47.39%,#fff 65%),linear-gradient(336deg,#f9ddf1 .07%,#e5e1ff 16.73%,#daedff 34.48%,#e2f4e3 49.98%,#ebf5d8 66.12%,#faf2da 81.95%,#fbe5d8 99.9%);
	height: 50px;
}

.bigheader-alt .headerLogo {width: 55px; top: 9px !important; transition: all var(--transition-base);}
.bigheader-alt .headerLogo:hover {width: 55px; left: 25px;}
.bigheader-alt .mastermenu li {margin-top: -9px; transition: all var(--transition-base);}
.bigheader-alt .mastermenu li ul li {margin-top: 0;}
.bigheader-alt .userMeModule {top: 48px; right: 15px; transition: all 0.6s;}

nav.mastermenu {background: none; margin-left: 15vw; padding-top: 8px;}
nav.mastermenu ul {display: flex; background: none;}
	nav.mastermenu ul li  {position: relative;}
	nav.mastermenu ul > li:before {content: "";
		/* background: rgba(191, 202, 217, 0.5); */
		width: 10px;
		height: 10px;
		display: block;
		margin: 0 auto;
		border-radius: var(--radius-full);
		position: absolute;
		top: 20px;
		left: -30%;}
	nav.mastermenu ul li ul li:before {content: none;}
	
	nav.mastermenu ul li:hover,
	nav.mastermenu ul li:focus-within {background: none; cursor: pointer;}
	nav.mastermenu ul li a {color: #fff; background: none !important;}

.headerLogo {position: absolute; left: 25px; top: 25px; display: block; width: 90px; height: 50px; background: url(/babyForumHeadLogo.svg) no-repeat; background-size: 100%; z-index: var(--z-header); transition: width 0.2s ease-out, height 0.2s ease-out, left 0.2s ease-out, top 0.2s ease-out;}
		.mastermenu li.headerLogo a img {width: 120px;}
		.headerLogo:hover {left: 21px; top: 21px; width: 110px; height: 60px; }

nav.mastermenu ul li ul {background: rgba(77, 91, 109, 1); visibility: hidden; opacity: 0; min-width: 5rem; position: absolute; transition: all var(--transition-slow); margin-top: 1rem; left: 0; display: none; z-index: var(--z-dropdown); width: 215px; box-shadow: 0 15px 35px 0 var(--color-primary-10); margin-top: 0;     border-radius: var(--radius-sm);
    box-shadow: 0 5px 12px rgba(56, 65, 103, 0.2); animation: fadein var(--fadein-duration);}
nav.mastermenu ul li ul:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    border: 5px solid transparent;
    border-bottom-color: rgba(77, 91, 109, 1);
    left: 10%;
    top: -10px;
    margin-left: -5px;
}

nav.mastermenu ul li:hover > ul,
nav.mastermenu ul li:focus-within > ul,
nav.mastermenu ul li ul:hover,
nav.mastermenu ul li ul:focus {visibility: visible; opacity: 1; display: block;}

nav.mastermenu ul li ul li {clear: both; width: 100%; display: block; margin: 0;}

nav.mastermenu ul li ul li a:link, nav.mastermenu ul li ul li a:visited {color: #FFF;
	padding: 9px 15px;
	width: 100%;
	height: auto;
	font-size: var(--text-sm);
	display: block;
	text-align: left;
	margin-left: 0;
	font-weight: var(--weight-normal);}
    
.mySearchModule {width: 190px;}  

nav.mastermenu a:link, nav.mastermenu a:visited, header nav span {	font-size: var(--text-base); font-weight: var(--weight-normal); font-family: var(--font-body); letter-spacing: 0.5px;}
	nav.mastermenu a:hover {color: #ff8080;}
	nav.mastermenu ul li ul li a:hover:after {    background: rgb(255 255 255 / 18%);
    position: absolute;
    left: 0;
    top: 0;
    height: 43px;
    width: 100%;
    border-radius: initial;}

	nav.mastermenu ul li a:after {border-radius: 1em; content: ""; position: absolute; right: 100%; left: 0; transition: right .4s cubic-bezier(0,.5,0,1);}

	nav.mastermenu ul li ul li a:after {    content: "";
    position: absolute;
    transition: width .4s cubic-bezier(0,.5,0,1);
    width: 0;}


#menuuu {display: none;}
  

/* CHROME AND SAFARI 1Pixel HACK */ @media screen and (-webkit-min-pixel-ratio:0) { .categoriesHolder {margin: 0 auto 0;} }

.editor-dd-emoji + .editor-insert-dialog {width: 410px !important;}
.editor-dd-emoji + .editor-insert-dialog .emoji-wrap {margin: 5px 0 !important;}

.BoxFilter.BoxDiscussionFilter .Best {display: none !important;}
#vanilla_discussions_index .P.PageDescription {display: none;}	


input.DateBox, input.InputBox, input.SmallInput, textarea {border: 1px solid var(--color-primary);}
input::placeholder {color: var(--color-primary);}

.MessageForm .Button.PreviewButton:link, .MessageForm .Button.PreviewButton:visited, .MessageForm .Button.WriteButton:link, .MessageForm .Button.WriteButton:visited {font-size: var(--text-base); padding: 10px 0; margin: 0 10px;}



/* Gallery */

#gallery {
	scroll-snap-type: x mandatory;
	overflow-x: hidden;
	overflow-y: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	margin-top: 10px;
}

#gallery div {
	scroll-snap-align: center;
	position: relative;
	width: 31%;
	height: auto;
	border-radius: var(--radius-md);
	height: 150px;
}

#gallery div img {
	width: 100%;
	margin-top: -20px;
}

#gallery div.last {display: none;}

#gallery div a:link, #gallery div a:visited {
	border-radius: var(--radius-md);
	display: block;
	overflow: hidden;
	height: 150px;
}

#gallery div a img {
	transition: transform 1s;
}

#gallery div a:hover img {
	transform: scale(1.1) rotate(2deg);
	transition: transform 1s;
}

#gallery div span {
	display: block;
	position: absolute;
	bottom: 10px;
	left: 20px;
	width: auto;
	font-size: var(--text-base);
	letter-spacing: 0.2px;
	background: color-mix(in srgb, var(--color-accent) 85%, transparent);
	padding: 0px 10px;
}

	
#gallery div a span:hover {
	background: var(--color-accent-light);
	color: var(--color-accent);
}

/* Animierte Filter Karten */

body.verzeichnisseite .filter {
	background: #F3F6F9;
	padding-bottom: 40px;
}

body.verzeichnisseite .filter h3 {
	color: var(--color-muted);
	border: none;
}

body.verzeichnisseite .filter button {
	background: #FFF;
	color: var(--color-primary);
	border: none;
	letter-spacing: 1px;
	cursor: pointer;
	margin-right: 4px;
	margin-bottom: 7px;
	border-radius: var(--radius-sm);
}

body.verzeichnisseite .filter button:hover {
	background-color: var(--color-muted-20);
	cursor: pointer;
}


/* Media Queries */

/* Hide Toggle */

@media screen and (min-width: 889px) {
	#toggle {display: none;}
	.mobile.NewDiscussion {display: none;}
}

@media only screen and (min-width: 889px) and (max-width: 1200px) {
	#Body {margin: 0 2vw;}
}

@media screen and (min-width: 1700px) {
	#Body {margin: 0 18vw;}
}

@media screen and (min-width: 2300px) {
	#Body {margin: 0 22vw;}
}

@media screen and (min-width: 889px) and (max-width: 1260px) {
	#Body {margin: 0 0;}
	#Body .ContentColumn {max-width: 60%;}
}

@media screen and (max-width: 992px) {
	#Body {margin: 0 2vw;}
	.categoriesHolder {display: none;}
	#vanilla_discussions_index.Section-DiscussionList .breadcrumbu {display: none;}
	}
	
@media screen and (min-width: 888px) and (max-width: 1100px) {	
	.moduleBildText img, .moduleBildText div {
		height: fit-content;
		display: flex;
		flex-wrap: wrap;
		align-self: center;
	}
}

	#vanilla_discussion_index ul.DataList li.Item, #vanilla_discussion_comment ul.DataList li.Item .Item-BodyWrap {box-shadow: none;}
	#vanilla_discussion_index ul.DataList li.Item .Item-BodyWrap, #vanilla_discussion_comment ul.DataList li.Item .Item-BodyWrap {/* box-shadow: 0 15px 35px 0 rgb(50 66 93 / 10%); */
		border-left: 2px solid var(--color-muted);
		border-radius: 0;
		margin-left: 1.7%;
		background: linear-gradient(-90deg,transparent 0% ,#FFF 100%);
		width: 98.3%;}

@media screen and (max-width: 888px) {
	
	#bigheader {height: calc(50px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); border: none; position: fixed; top: 0; left: 0; width: 100%; z-index: var(--z-header); background: none; box-shadow: none;}
	.mobile.NewDiscussion a.Button {font-weight: var(--weight-normal);}
	.bigheader-alt .headerLogo {width: 80px; top: 10px !important; transition: all var(--transition-base);}
	
	.bodyInside {margin: 0 0vw; display: block;}
	
	#gallery {
		margin-top: 10px;
		margin-bottom: 0px;
		overflow-x: scroll;
	}
	
	#gallery div {
		width: 200px;
		margin-right: 15px;
		height: 158px;
		border-radius: var(--radius-md);
	}
	
	#gallery div img {
		width: 170px;
		height: 170px;
		border-radius: var(--radius-md);
	}
	
	#gallery div.last {
		margin-right: 0;
	}
	
	#gallery div span {
		position: absolute;
		left: auto;
		bottom: 10px;
		right: -3px;
		border-radius: 20px 0 0 20px;
	}
	
	#gallery div a:link, #gallery div a:visited {
		height: auto;
	}
	
	#gallery div.last {display: block;}
	
	.webinar {position: fixed; z-index: var(--z-fixed); top: calc(32px + env(safe-area-inset-top)); width: 95%; background-size: 6%;
		background-position: 16px 18px;
		padding-left: 53px;}
		
		.webinar br {display: block;}
	
	input, button {font-family: var(--font-body);}
	.bodyleft, .bodyright {display: none;}
	
	.profileInHeader a {display: block;}
	
	.mastermenu {background: transparent; height: 10px; display: none;}
		.mastermenu li {display: none;}
		
		.headerLogo {left: 55px; top: 12px; width: 80px; position: fixed; z-index: var(--z-header); transition: none;}
		.headerLogo:hover {left: 55px; top: 12px; width: 80px;}
		.isUser .headerLogo {margin-top: 0; }
		
	.Box h4 {text-align: center;}
		
	.Box.GuestBox {
		position: fixed;
		width: 92%;
		margin: 0 4%;
		border-radius: 8px 8px 38px 38px;
		padding: 10px 20px 4px !important;
		z-index: var(--z-fixed);
		bottom: calc(25px + env(safe-area-inset-bottom));
	}
		.Box.GuestBox p, .Box.GuestBox h2 {
			line-height: 1.3rem;
			font-size: var(--text-base);
			text-align: center;
		}
		.GuestBox p strong {
			font-size: var(--text-lg);
			margin-top: 0px;
			position: absolute;
			left: 5px;
			top: -50px;
			padding: 12px 14px;
		}
		.GuestBox div.P {
			/* position: fixed; */
			/* top: 10px; */
			/* right: 10px; */
			/* z-index: 100; */
			margin: 0;
		}
		.Box.GuestBox div a.Button.Primary.SignInPopup, .Button.ApplyButton {font-size: var(--text-base); width: auto; padding: 1px 10px; margin-right: 3px; line-height: 1.7rem;}
	body:not(.isUser) .scrollToTop {bottom: 120px;}
	
	.BoxNewDiscussion {position: absolute; top: 10px; right: 8px; z-index: 0; background: none; width: auto; margin-right: 0.5%;  box-shadow: none; text-align: right; animation: fadein var(--fadein-duration);}	
		nav.mastermenu .BoxNewDiscussion a.BigButton {font-size: var(--text-md); width: auto; padding: 3px 8px; line-height: 1.7rem;}
	
	#Body {display: block; padding-top: calc(70px + env(safe-area-inset-top));}
		#Body .ContentColumn {width: 100%; margin-top: 0;}
	
	#Content {width: 100%; float: none;}
	#Panel {float: none; text-align: center; max-width:  none;	width: 100%; margin-left: 0;}
		
	.BreadcrumbsWrapper {line-height: 0.7rem;}
	.breadcrumbu {text-align: center; margin-top: 18px;}
	.breadcrumbu a {font-size: var(--text-sm); margin-top: 10px;}
		.Breadcrumbs {font-size: var(--text-xs);}
	.PageControls.Top {top: -85px;}
	
	#Panel .BoxFilter.BoxDiscussionFilter {border-radius: var(--radius-full);}
		
	.Discussion .PageTitle {position: relative;}	
		.Discussion .PageTitle h1, body.alltags h1 {width: 90%; margin: 0 auto 35px; font-size: var(--text-2xl); letter-spacing: 0px; font-weight: var(--weight-medium); line-height: 2.2rem;}
		.PageTitle .Options {height: 10px;text-align: center;right: 0;top: 0;position: absolute;}
		.AdminCheck {position: absolute;right: 52px; padding: 0px;}
	
	ul.DataList li.Item {margin-bottom: 5px; padding: 8px 10px 6px;}
	ul.DataList li.Item.Discussions {padding: 6px 10px 2px;}
	ul.DataList.Discussions li.Item {min-height: auto; margin-bottom: 8px;}
	ul.DataList li.Item .Title {width: 85%; text-overflow: inherit; white-space: inherit; margin-bottom: 2px; padding-left: 0px;}
		ul.DataList li.Item .Title a {font-size: var(--text-md); letter-spacing: 0.01rem; line-height: 1.4rem; font-weight: var(--weight-normal); 	-webkit-mask-image: none;}
	ul.DataList li.Item.Read {border: none;}
		div.Meta.Meta-Discussion {overflow: visible; white-space: normal; margin-bottom: 0px; height: auto; line-height: 1.3rem;}

		ul.DataList.Discussions li.Item .Options {position: absolute; display: block; right: 4px; top: 8px;}

		
    ul.DataList.Discussions li.Item:before {width: 16px; height: 15px; left: 0px; top: -1px; border-radius: 100% 0 10px 0; right: -2px; bottom: -1px; left: initial; top: initial;}	

		
		ul.DataList li.Item .Tag {font-size: var(--text-xs);}
		.ReactionCount {height: 20px; margin-right: 6px;}
				.ReactionCount span {font-size: var(--text-xs);}
	
	.PagerNub {display: none;}
		.Pager {float: none; text-align: center; display: flex; justify-content: space-around;}
		.Pager a:link, .Pager a:visited {margin: 0 2px;}
		
		h2.CommentHeading {visibility: hidden;}
			.BeforeCommentHeading {float: none;}		
	
	ul.DataList li.Item .StatsBox {top: 4px; font-size: var(--text-xs); padding-top: 30px;}

	.StatsBox.ViewsBox, .StatsBox.AnswersBox {width: 35px; font-size: var(--text-xs); background-size: 40%; padding-top: 16px; color: var(--color-muted-60);}
		ul.DataList li.Item .StatsBox.ViewsBox {display: none;}
			ul.DataList li.Item .StatsBox {height: 84%; right: 7px; font-size: var(--text-xs); border: none;}
			.MItem.MCount.ViewCount {display: none;}
	body.isUser ul.DataList li.Item .StatsBox {right: 7px;}
	
	
	.Item-Header {height: 50px;}
		.Item-Header .Meta.DiscussionMeta {width: 85%; line-height: 1.1rem;}
				.UserSignature img {max-width: 100%; height: auto;}
		
	ul.DataList.CategoryList li.Item .OptionsMenu {position: relative;}	
		
	.ItemDiscussion .Item-Header {height: 40px; margin: 9px 10px 0px;}		
.Item-Header a.Username {position: relative; top: -1px; color: #4C4E4D; font-size: var(--text-base);}				
.Item-Header p.postcount {color: var(--color-muted-75); padding: 0px 10px 0 17px; text-align: left; position: absolute; top: 20px; left: 47px; border-right: 0px solid #DDD; background-position: 0px 2px; border: none;}
.ItemDiscussion .Item-Header .MItem.DateCreated {top: 32px; left: 140px; right: auto;}
.ItemDiscussion .Item-Header p.postcount {top: 32px; left: 72px;}
ul.DataList li.Item.ItemComment .OptionsMenu {right: 90px;}
ul.DataList li.Item.ItemComment .Comment .Comment .Options {right: -10px;}
ul.DataList li.Item.ItemComment .Comment .OptionsTitle {left: 10px;}
.Item-Header .MItem.CommentFlag a {background-size: 12px;}
.Comments .Meta {margin-right: 100px; float: right; display: contents;}		
.Item-Header .MItem.CommentFlag {text-indent: -9999px;
	width: 15px;
	height: 15px;
	position: absolute;
	top: 23px;
	right: 42px;}		
		
	.MessageList.Discussion .Discussion {padding: 7px 10px 18px 10px;}
	.Item-Header .MItem.CommentFlag a {top: -1px;}	
	.MessageList.Discussion .OptionsMenu {top: -1px; right: 12px;}				
		
	.Item-Header a.Username {font-size: var(--text-base);}
	.Comments .Item-BodyWrap {padding: 10px 16px 10px 16px;}
		.Comments .Item .AuthorInfo img {width: 37px; top: 5px; right: 0;}
	.userContent.Message {margin-top: 0px;}	
	.DateUpdated {display: none;}
	.MessageForm.CommentForm.FormTitleWrapper {margin-top: 20px;}
	.MessageForm.CommentFormWrap .Author, .CommentFormWrap .Author {display: none;}
	.MessageForm .Button.PreviewButton:link, .MessageForm .Button.PreviewButton:visited, .MessageForm .Button.WriteButton:link, .MessageForm .Button.WriteButton:visited {margin: 0;}
	
	.Comment .OptionsTitle {position: relative; top: 9px; background-size: 13px; right: -12px;}

	.CommentForm .FormWrapper {padding: 10px;}
	.CommentForm .Buttons {display: flex; justify-content: space-between;}
	.CommentForm .TextBoxWrapper {padding: 0;}
	.Item-Header .MItem.DateCreated {margin-right: 0; font-size: var(--text-xs); top: 24px; left: 120px; padding: 0; border: none; max-width: fit-content;}
	
	.ItemDiscussion .Meta, .DataList .Meta {font-size: var(--text-xs);}
		
	#vanilla_post_discussion select {width: 100%;}	
		
	#dashboard_profile_edit input[type=text], #dashboard_profile_edit select, #dashboard_profile_edit input[type=textarea] {width: 100%;}
		#dashboard_profile_edit .FormTitleWrapper form ul li {margin-right: 0; display: block; width: 100%;}
	
	#dashboard_profile_edit .BoxGroup.SideMenu {margin: 0; background: var(--color-muted-5); border-radius: var(--radius-sm); padding: 2px 0;}
	
	.profilebox .one {width: 48%; margin-bottom: 10px;}
	.Yaga.ReactionsWrap a:link, .Yaga.ReactionsWrap a:visited {padding: 50px 0 20px;}
		.Yaga.ReactionsWrap .DataCounts .CountItemWrap a {background-size: 22px; background-position: 50% 15px;}		
	
	
	#vanilla_categories_index .PageDescription, body.alltags .PageDescription {text-align: center; color: var(--color-primary); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6rem; letter-spacing: 0.02rem; width: 90%;}
	
	#dashboard_entry_register #bigheader {height: 100px; background: none; margin: 0 auto 40px; position: static;}
	#dashboard_entry_register #bigheader::before {display: none;}
	#dashboard_entry_register #Body {padding-top: 0;}
	#dashboard_entry_register .FormTitleWrapper {width: auto; margin: 0;}
	#dashboard_entry_register .mastermenu {height: 60px;}
		
	#footer {padding: 0 10px; margin: 0;}
		#footer div .flex {flex-wrap: wrap;}
			#footer div .flex div {width: 100%;}
			#footer h4, #footer div {text-align: center;}
			#footer .flex > div {margin-bottom: 30px;}
			
	.gewinnspielDiv a:link, .gewinnspielDiv a:visited {margin: 0 auto 10px;}
	
	.moduleBildText a {display: block;}
		.moduleBildText img, .moduleBildText div {width: 100%; height: auto; display: block;}
		.moduleBildText div .more {bottom: auto; position: relative; margin: 15px 0 0; display: block;}
		
		
	.isUser #Panel .BoxFilter.BoxDiscussionFilter {display: none;}
	.userMeModule {display: none;}	
	.isUser .mastermenu {margin-top: 0; margin-bottom: 0px; padding-top: 0;}	
		
	#menuuu {top: 0; padding: 0; padding-bottom: env(safe-area-inset-bottom); animation: fadein var(--fadein-duration);}	
		.menuuuhead {background: var(--color-primary); position: relative; padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);}
			.menuuuhead .userMeModule3 {padding: 10px 3% 0;}
				.menuuuhead .userMeModule3 .MeBox {height: 45px; margin: 0 auto;}
				.menuuuhead .userMeModule3 .MeBox .PhotoWrap {margin-right: -5px;}
					.menuuuhead a.MeButton.FlyoutButton, a.MeButton.FlyoutButton:visited {margin-right: 7px;}
				.menuuuhead .userMeModule3 .MeBox .MeMenu {        left: 25px;
					top: 3px;
					position: relative;}
				.menuuuhead .userMeModule3 .MeBox .ProfilePhoto.ProfilePhotoMedium {width: 28px; height: 28px;}
				.menuuuhead .userMeModule3 .Username {display: none;}
				.menuuuhead .userMeModule3 .topics {display: flex; justify-content: space-between; padding: 10px 0 25px;}
				.menuuuhead .userMeModule3 .topics a {color: #FFF;font-size: var(--text-base); border: 1px solid rgba(255, 255, 255, 0.2); margin-right: 10px; padding: 4px 7px; border-radius: var(--radius-sm); text-align: center;}
				.ToggleFlyout .MeButton .Alert {background: #eb6d86; left: 17px; top: -2px; border-radius: var(--radius-full); width: 21px; height: 21px; text-align: center; font-size: 0.5em; z-index: var(--z-raised); position: absolute; padding: 6px 0;}

		#menuuu .flex {background: var(--color-primary); padding-top: 10px; height: 100%;}	
		#menuuu .flex.naviii {padding: 0 calc(15px + env(safe-area-inset-right)) 0 calc(15px + env(safe-area-inset-left));}	
			#menuuu .flex ul {width: 50%; margin: 0 0 15px 0;}
				#menuuu .flex ul li.noborder {border: none;}
			#menuuu .flex ul li a:link, #menuuu .flex ul li a:visited {color: #FFF; line-height: 1.65rem; margin-bottom: 0; padding: 5px 4px; display: block;}
		
		#menuuu .flex.naviii .fullwidth {width: 100%; display: flex; flex-wrap: wrap;}
			#menuuu .flex.naviii .fullwidth .menuuuName {width: 100%;}		
			#menuuu .flex.naviii .fullwidth li a:link, #menuuu .flex.naviii .fullwidth li a:visited {border: 1px solid rgba(255, 255, 255, 0.2); margin-right: 10px; padding: 2px 7px; border-radius: var(--radius-sm);}
			#menuuu .flex.naviii .schwanger {display: block; border: 1px solid rgba(255, 255, 255, 0.2); margin-right: 10px; padding: 2px 7px; border-radius: var(--radius-sm); margin-bottom: 50px; }
		
	.FlyoutMenu {width: 270px;}

	/* Keep flyouts inside the viewport on mobile */
	.Flyout.MenuItems,
	.MenuItems.Flyout,
	.Options .Flyout,
	.OptionsMenu .Flyout,
	.ToggleFlyout .Flyout.MenuItems,
	.Flyout.FlyoutMenu,
	.Discussions .Options .Flyout,
	.Comments .Options .Flyout,
	.DataList.Discussions .OptionsMenu .Flyout,
	.MeBox .Flyout,
	.MeBox.FlyoutRight .Flyout {
		right: 0;
		left: auto;
		max-width: calc(100vw - 16px);
	}
	.Options .Flyout:before,
	.Options .Flyout:after,
	.OptionsMenu .Flyout:before,
	.OptionsMenu .Flyout:after {
		right: 12px;
		left: auto;
	}
		
	.mySearchModule {display: none;}	
	.mySearchModule.searchMobile {padding: 11px 15px 0 75px; margin-bottom: 0px; display: block; height: auto; border: none; margin-top: 0; width: 100%; top: 15px; right: 15px;}
		.mySearchModule.searchMobile form {display: flex; width: 100%;}
		.mySearchModule.searchMobile input.InputBox {padding: 8px 15px; flex: 1 1 auto; width: auto !important; border-radius: 25px 0 0 25px;}	
		.mySearchModule.searchMobile #Form_Go1 {flex: 0 0 auto; width: auto; border-radius: 0 25px 25px 0;         padding: 1px 18px 2px 18px;
			margin-top: 9px;}
			.mySearchModule #Form_Go1:hover {background: var(--color-link); color: #FFF;}
			
	
	.PopList.Activities .Item.Title, .PopList .Item.Title {border: 1px solid #FFF;}
	.Flyout:after {border-bottom: 7px solid #fff;}
			
	.Sprite16.SpNotifications {background: url(../../_icons/SpNotifications.svg) center right no-repeat;background-size: 100%;}
	.Sprite16.SpInbox {background: url(../../_icons/SpInbox.svg) center right no-repeat;background-size: 100%;}
	.Sprite16.SpBookmarks {background: url(../../_icons/SpBookmarks.svg) center right no-repeat;background-size: 100%;}
	.Sprite16.SpOptions {background: url(../../_icons/SpOptions.svg) center right no-repeat;background-size: 100%;}			

	#dashboard_profile_edit .FormTitleWrapper form ul li {width: 100%;}
	

				.moduleBildText div .anzeige {right: 10px; top: 10px;}

	/* Ausblenden on Mobile */

	#produkttestBanner {box-shadow: none; margin-bottom: 20px;}

	.Dashboard.Profile.isMobile #produkttestBanner,
	.Conversations.Messages.isMobile #produkttestBanner,
	#dashboard_profile_comments h2.H {display: none;}	
	
	#conversations_messages_inbox .Profile .User,
	#dashboard_profile_discussions .Profile .User,
	#dashboard_profile_comments .Profile .User,
	#dashboard_profile_notifications .Profile .User,
	#vanilla_discussions_bookmarked .Profile .User {display: none;}	
		
		
	#footerNew {padding: 70px 10px;}
	#socials a {width: 40px; height: 40px; display: inline-block; border-radius: var(--radius-lg); margin: 0 10px;}	
		
	.bodybox-wrap {padding: 0px;}
		
	.Tag.Tag-Announcement, ul.DataList.Discussions li.Item.produkttest:before, ul.DataList.Discussions li.Item.umfrage:before  {
		width: 38px; height: 47px; top: 8px; left: 8px;
		background: #D2EFF6 url(../../_icons/announcementDark.svg) center center no-repeat;
		background-size: 18px;
	}
		
	ul.DataList.Discussions li.Item.Announcement.Read .Tag.Tag-Announcement {
		background: rgb(209 218 227 / 100%)  url(../../_icons/announcementWhite.svg) center center no-repeat;
		background-size: 18px;
	}		
	
	li.Item.Announcement .Title,
	li.Item.Announcement .Meta, 
	ul.DataList.Discussions li.Item.produkttest .Title,
	li.Item.produkttest .Meta,
	li.Item.umfrage .Meta { margin-left: 50px; }

	
	ul.DataList.Discussions li.Item.produkttest:before {	background: #fad7de url(../../_icons/produkttestDark.svg) center center no-repeat;
		background-size: 18px;
	}
	ul.DataList.Discussions li.Item.Read.produkttest:before {background: rgb(209 218 227 / 100%) url(../../_icons/produkttestWhite.svg) center center no-repeat;
		background-size: 18px;}	
		
	ul.DataList.Discussions li.Item.umfrage:before {	background: #e3fddd url(../../_icons/umfrageDark.svg) center center no-repeat;
		background-size: 18px;
	}
	ul.DataList.Discussions li.Item.Read.umfrage:before {background: rgb(209 218 227 / 100%) url(../../_icons/umfrageWhite.svg) center center no-repeat;
		background-size: 18px;}		
		
	li.Item.Announcement .Title, li.Item.Announcement .Meta, ul.DataList.Discussions li.Item.produkttest .Title, ul.DataList.Discussions li.Item.produkttest .ItemContent .Meta, ul.DataList.Discussions li.Item.umfrage .Title, ul.DataList.Discussions li.Item.umfrage .ItemContent .Meta {margin-left: 52px;}	
		
	a.umfrage-ergebnisse:link, .umfrage-ergebnisse:visited {
		margin: 20px auto 30px;
	}	

	/* Item-Header mobile overrides */
	.Comments .Item-Header {
		margin: 0px 0 -5px 7px;
	}

	.Item-Header a.Username {
		position: relative;
		top: 5px;
		color: #4C4E4D;
		font-size: var(--text-base);
	}

	.Item-Header p.postcount {
		color: var(--color-muted-75);
		padding: 0px 10px 0 17px;
		text-align: left;
		position: absolute;
		top: 9px;
		left: 45%;
		border-right: 0px solid #DDD;
		background-position: 0px 2px;
		border: none;
	}

	.Item-Header .MItem.DateCreated {
		margin-right: 0;
		font-size: var(--text-xs);
		top: 24px;
		left: 45%;
		padding: 0;
		border: none;
		max-width: fit-content;
	}
	
}


ul.DataList li.Item.ItemComment {    box-shadow: none;}
.Comments .Item-BodyWrap {box-shadow: 0 0 35px var(--color-primary-10);}
		

/* CSS Animations */

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* Highlight effect for new/edited comments (polyfill in global.js) */
@keyframes highlight {
  0%   { background-color: rgba(79, 198, 222, 0.18); }
  100% { background-color: transparent; }
}
.highlight-effect { animation: highlight 1.8s ease-out; }

/* Modern CSS spinner — replaces GIF-based TinyProgress and Loading */
@keyframes bf-spin { to { transform: rotate(360deg); } }

.TinyProgress {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(79, 198, 222, 0.25);
  border-top-color: var(--color-link);
  border-radius: 50%;
  animation: bf-spin 0.6s linear infinite;
  background: none;
  vertical-align: middle;
}

.Pager a.Loading,
.Loading {
  background-image: none;
  position: relative;
}
.Loading::after {
  content: "";
  display: inline-block;
  width: 22px; height: 22px;
  border: 2px solid rgba(79, 198, 222, 0.25);
  border-top-color: var(--color-link);
  border-radius: 50%;
  animation: bf-spin 0.6s linear infinite;
  position: absolute;
  top: 50%; left: 50%;
  margin: -11px 0 0 -11px;
}

/* Comment hover lift */
.Comments .Item-BodyWrap {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.Comments .Item-BodyWrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(50, 66, 93, 0.12);
}

/* Button press feedback */
.CommentButton,
.DraftButton,
.PreviewButton,
.Button.Primary {
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.CommentButton:active,
.DraftButton:active,
.PreviewButton:active,
.Button.Primary:active {
  transform: scale(0.97);
}

/* Reaction count pop */
@keyframes bf-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.ReactButton .Count.bf-popped {
  animation: bf-pop 0.3s ease;
}

/* Pager link hover */
.Pager a {
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.Pager a:hover {
  transform: translateY(-1px);
}

/* Nav dropdown — controlled by GSAP, but needs visibility:hidden default */
.mastermenu > ul > li > .dropdown {
  visibility: hidden;
  opacity: 0;
}
.mastermenu > ul > li:hover > .dropdown,
.mastermenu > ul > li:focus-within > .dropdown {
  visibility: visible;
  opacity: 1;
}

/* Breadcrumb gentle fade */
.BreadcrumbsWrapper {
  animation: fadein var(--fadein-duration) ease;
}

/* 2021.006 compatibility */
.BoxFilter-HeadingWrap {display:none;}


.YagaReactSprite {display: none !important;}

div.Popup .Border {z-index: var(--z-modal);}


/* ============================================================ */
/*  Split-view Messenger                                        */
/* ============================================================ */

/* Layout chrome — match homepage content width, drop the forum panel, hide breadcrumbs. */
.MessengerMode #Body {margin: 0 11vw;}
.MessengerMode .bodyInside {display: block; max-width: 1085px; margin: 0 auto;}
.MessengerMode #Content, .MessengerMode .ContentColumn {flex: none; width: 100%; max-width: 1085px; float: none; margin: 0 auto;}
.MessengerMode .breadcrumbu {display: none;}
.MessengerMode #Content .H {display: none;}

/* Shell grid */
.MessengerShell {
	display: grid;
	grid-template-columns: minmax(300px, 360px) 1fr;
	gap: 20px;
	height: calc(100vh - 150px);
	min-height: 540px;
	margin-top: 20px;
}
.MessengerSidebar,
.MessengerPanel {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 15px 35px 0 var(--color-primary-10);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* --- Sidebar ------------------------------------------------- */
.MessengerSidebar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid var(--color-primary-8);
}
.MessengerSidebar-title {font-size: var(--text-lg); margin: 0; color: var(--color-primary); font-weight: var(--weight-bold);}
.MessengerSidebar-new {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--color-accent);
	color: #fff !important;
	padding: 6px 12px;
	border-radius: var(--radius-lg);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}
.MessengerSidebar-new:hover {background: var(--color-primary);}
.MessengerSidebar-new .Sprite {display: none;}

/* Web Push opt-in button (icon only) */
.MessengerPushToggle {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: var(--radius-full);
	background: var(--color-muted-12);
	cursor: pointer;
	position: relative;
	padding: 0;
	transition: background var(--transition-fast);
}
.MessengerPushToggle:before {
	content: "";
	position: absolute;
	left: 50%;
	top: 46%;
	width: 11px;
	height: 9px;
	border: 2px solid var(--color-primary);
	border-radius: 5px 5px 2px 2px;
	transform: translate(-50%, -50%);
}
.MessengerPushToggle:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 11px;
	width: 5px;
	height: 3px;
	border: 2px solid var(--color-primary);
	border-bottom: none;
	border-radius: 5px 5px 0 0;
	transform: translateX(-50%);
}
.MessengerPushToggle:hover {background: rgba(126,150,179,.22);}
.MessengerPushToggle.is-on {background: var(--color-muted-30);}
.MessengerPushToggle.is-on:before,
.MessengerPushToggle.is-on:after {border-color: var(--color-muted);}
.MessengerPushToggle.is-denied {opacity: .45; cursor: not-allowed;}

.MessengerSidebar-list {flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0; padding: 6px;}
.MessengerSidebar-list .Item {border: none; background: none; margin: 0; padding: 0;}
.MessengerSidebar-list .MessengerConversation.Read {opacity: 1;}

.MessengerConversation-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 36px 10px 12px;
	border-radius: var(--radius-md);
	transition: background var(--transition-fast);
	flex: 1;
	min-width: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
    top: 0;
}
.MessengerConversation-link:hover {background: rgba(126,150,179,.08);}
.MessengerConversation.Active .MessengerConversation-link {background: var(--color-muted-12);}

/* Swipe-to-leave (mobile/touch) */
.MessengerSidebar-list .Item.MessengerConversation {position: relative; overflow: hidden; align-items: center; min-height: 64px;}
.MessengerConversation-leave {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 96px;
	border: none;
	background: var(--color-accent);
	color: #fff;
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	cursor: pointer;
	z-index: 0;
}
.MessengerConversation.swipe-open .MessengerConversation-link {box-shadow: -4px 0 12px rgba(50,66,93,.12);}
.MessengerConversation-photo {flex: 0 0 44px;}
.MessengerConversation-photo .ProfilePhoto {width: 44px; height: 44px; border-radius: var(--radius-full);}
.MessengerConversation-body {flex: 1; min-width: 0;}
.MessengerConversation-top {display: flex; justify-content: space-between; align-items: baseline; gap: 8px;}
.MessengerConversation-name {
	font-weight: var(--weight-semibold);
	color: var(--color-primary);
	font-size: var(--text-base);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.MessengerConversation-date {flex: 0 0 auto; font-size: var(--text-xs); color: var(--color-primary-55);}
.MessengerConversation-subject {display: block; font-size: var(--text-sm); color: var(--color-link); font-weight: var(--weight-semibold);}
.MessengerConversation-excerpt {
	display: block;
	font-size: var(--text-sm);
	color: rgba(50,66,93,.65);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.MessengerConversation.Unread .MessengerConversation-name,
.MessengerConversation.Unread .MessengerConversation-excerpt {color: var(--color-primary); font-weight: var(--weight-bold);}
.MessengerConversation-badge {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	min-width: 22px;
	padding: 0;
	border-radius: 50%;
	background: var(--color-accent);
	color: #fff;
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	line-height: 22px;
	text-align: center;
	pointer-events: none;
}
.MessengerSidebar-foot {padding: 12px 18px; border-top: 1px solid var(--color-primary-8); text-align: center;}
.MessengerSidebar-foot a {font-size: var(--text-base); color: var(--color-accent);}

/* Infinite-scroll load-more sentinel */
.MessengerSidebar-sentinel {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 8px 0;
	list-style: none;
	border: none;
	background: none;
}
.MessengerSidebar-sentinel[hidden] {display: none;}
.MessengerSidebar-sentinelSpinner {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--color-primary-8);
	border-top-color: var(--color-accent);
	opacity: 0;
	transition: opacity var(--transition-fast);
}
.MessengerSidebar-sentinel.is-loading .MessengerSidebar-sentinelSpinner {
	opacity: 1;
	animation: MessengerSpin 0.7s linear infinite;
}
@keyframes MessengerSpin {to {transform: rotate(360deg);}}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.MessengerSidebar-sentinel.is-loading .MessengerSidebar-sentinelSpinner {animation: none;}
}

/* --- Panel / empty state ------------------------------------- */
.MessengerEmpty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 30px;
	gap: 16px;
}
.MessengerEmpty-art {
	width: 90px;
	height: 90px;
	border-radius: var(--radius-full);
	background: var(--color-muted-12);
}
.MessengerEmpty-text {color: var(--color-primary-60); max-width: 280px;}

/* --- Chat panel --------------------------------------------- */
.MessengerChat {display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative;}
.MessengerChat-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--color-primary-8);
	flex: 0 0 auto;
}
.MessengerChat-back {
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-full);
	color: var(--color-primary);
	flex: 0 0 auto;
}
.MessengerChat-back:before {content: "\2039"; font-size: var(--text-2xl); line-height: 1;}
.MessengerChat-back:hover {background: var(--color-muted-12);}
.MessengerChat-title {flex: 1; min-width: 0;}
.MessengerChat-name {display: block; font-weight: var(--weight-bold); color: var(--color-primary); font-size: var(--text-md);}
.MessengerChat-name a {color: var(--color-primary);}
.MessengerChat-subject {display: block; font-size: var(--text-sm); color: var(--color-primary-60);}
.MessengerChat-info {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: var(--radius-full);
	background: var(--color-muted-12);
	cursor: pointer;
	position: relative;
}
.MessengerChat-info:before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: var(--radius-full);
	background: var(--color-primary);
	transform: translate(-50%, -50%);
	box-shadow: 0 -6px 0 var(--color-primary), 0 6px 0 var(--color-primary);
}
.MessengerChat-info:hover {background: rgba(126,150,179,.22);}
.MessengerChat-info-note {margin: 10px 18px 0;}

/* Search toggle in the header */
.MessengerChat-searchToggle {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: var(--radius-full);
	background: var(--color-muted-12);
	cursor: pointer;
	position: relative;
}
.MessengerChat-searchToggle:before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 12px;
	margin: -8px 0 0 -8px;
	border: 2px solid var(--color-primary);
	border-radius: 50%;
	box-sizing: border-box;
}
.MessengerChat-searchToggle:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2px;
	height: 5px;
	margin: 3px 0 0 3px;
	background: var(--color-primary);
	border-radius: 1px;
	transform: rotate(-45deg);
}
.MessengerChat-searchToggle:hover {background: rgba(126,150,179,.22);}
.MessengerChat-searchToggle[aria-expanded="true"] {background: var(--color-muted-30);}

/* Search bar row */
.MessengerChat-searchbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-bottom: 1px solid var(--color-primary-8);
	background: rgba(126,150,179,.06);
	flex: 0 0 auto;
}
.MessengerChat-searchbar[hidden] {display: none;}
.MessengerChat-searchInput {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--color-primary-15);
	border-radius: 18px;
	padding: 7px 14px;
	font-size: 16px;
	background: #fff;
}
.MessengerChat-searchCount {font-size: var(--text-sm); color: var(--color-primary-60); min-width: 34px; text-align: center;}
.MessengerChat-searchPrev,
.MessengerChat-searchNext,
.MessengerChat-searchClose {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: var(--radius-full);
	background: rgba(126,150,179,.16);
	color: var(--color-primary);
	cursor: pointer;
	font-size: var(--text-md);
	line-height: 1;
}
.MessengerChat-searchPrev:hover,
.MessengerChat-searchNext:hover,
.MessengerChat-searchClose:hover {background: var(--color-muted-30);}

/* Search highlights */
mark.MessengerHighlight {background: #ffe39c; color: inherit; border-radius: var(--radius-sm); padding: 0 1px;}
mark.MessengerHighlight.current {background: var(--color-accent); color: #fff; box-shadow: 0 0 0 2px rgba(234,109,134,.35);}

.MessengerChat-scroll {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 18px;
	background: linear-gradient(180deg, rgba(126,150,179,.04), transparent 120px);
}
.MessengerChat-scroll .DataList,
.MessengerChat-scroll .MessageList {margin: 0; padding: 0; background: none; list-style: none;}

/* Day dividers */
.MessageDivider {text-align: center; margin: 16px 0; list-style: none;}
.MessageDivider span {
	display: inline-block;
	background: var(--color-muted-15);
	color: var(--color-primary-70);
	font-size: var(--text-xs);
	padding: 3px 12px;
	border-radius: var(--radius-lg);
}

/* Bubbles — reset the legacy conversation Item styling first */
.MessengerMode .DataList.MessageList.Conversation .Item,
.MessengerMode .DataList.MessageList.Conversation .Item.Mine {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
}
.MessageBubble {margin-top: 12px; margin-bottom: 4px;}
.MessageBubble.Grouped {margin-top: 2px; margin-bottom: 4px;}
.MessageBubble-row {display: flex; gap: 8px; align-items: flex-end;}
.MessageBubble.Mine .MessageBubble-row {flex-direction: row-reverse;}
.MessageBubble-avatar {flex: 0 0 34px;}
.MessageBubble-avatar .ProfilePhoto {width: 34px; height: 34px; border-radius: var(--radius-full);}
.MessageBubble.Mine .MessageBubble-avatar {display: none;}
.MessageBubble.Their.Grouped .MessageBubble-avatar {visibility: hidden;}
.MessageBubble-content {max-width: 74%; display: flex; flex-direction: column;}
.MessageBubble.Mine .MessageBubble-content {align-items: flex-end;}
.MessageBubble-content .Meta {margin: 0 0 3px 4px; min-height: 0; background: none;}
.MessageBubble-content .Meta .Author a {font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-primary-70);}
.MessageBubble.Mine .Meta,
.MessageBubble.Grouped .Meta {display: none;}

.MessageBubble-bubble {
	position: relative;
	padding: 8px 13px;
	border-radius: 16px;
	line-height: 1.45;
	font-size: var(--text-base);
	word-wrap: break-word;
	overflow-wrap: anywhere;
	margin-bottom: 3px;
}
.MessageBubble.Their .MessageBubble-bubble {
	background: #fff;
	color: var(--color-primary);
	border: 1px solid var(--color-primary-8);
	box-shadow: var(--shadow-sm);
	border-bottom-left-radius: 4px;
}
.MessageBubble.Mine .MessageBubble-bubble {
	background: var(--color-muted);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.MessageBubble.Mine .MessageBubble-bubble .Message,
.MessageBubble.Mine .MessageBubble-bubble .userContent {
	color: #fff;
}
.MessageBubble-bubble .Message p {margin: 0 0 6px;}
.MessageBubble-bubble .Message p:last-child {margin-bottom: 0;}
.MessageBubble.Mine .MessageBubble-bubble a,
.MessageBubble.Mine .MessageBubble-bubble a:link,
.MessageBubble.Mine .MessageBubble-bubble a:visited {color: #fff; text-decoration: underline;}
.MessageBubble.Mine .MessageBubble-bubble a:hover {color: rgba(255,255,255,.85);}
.MessageBubble-bubble .DateCreated {
	display: block;
	font-size: var(--text-xs);
	margin-top: 3px;
	text-align: right;
	opacity: .6;
}
.MessageBubble.Mine .MessageBubble-bubble .DateCreated {color: rgba(255,255,255,.85); opacity: .9;}

/* New-messages chip */
.MessengerChat-newchip {position: absolute; left: 0; right: 0; bottom: 96px; text-align: center; pointer-events: none; z-index: 5;}
.MessengerChat-newchip button {
	pointer-events: auto;
	background: var(--color-accent);
	color: #fff;
	border: none;
	border-radius: var(--radius-lg);
	padding: 7px 16px;
	font-size: var(--text-sm);
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(234,109,134,.4);
}
.MessengerChat-newchip button:before {content: "\2193"; margin-right: 6px;}

/* Read receipt ("Gelesen") */
.MessengerReadReceipt {
	list-style: none;
	text-align: right;
	font-size: var(--text-xs);
	color: var(--color-primary-55);
	margin: 2px 4px 6px 0;
	padding: 0;
}
.MessengerReadReceipt:after {content: "\2713\2713"; margin-left: 4px; color: var(--color-muted);}

/* --- Composer ------------------------------------------------ */
.MessengerComposer {
	flex: 0 0 auto;
	border-top: 1px solid var(--color-primary-8);
	background: #fff;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.MessengerComposer h2.H {display: none;}
.MessengerComposer-inner {display: flex; align-items: flex-end; gap: 10px;}
.MessengerComposer-photo {display: none;}
.MessengerComposer-photo .ProfilePhoto {width: 38px; height: 38px; border-radius: var(--radius-full);}
.MessengerComposer-field {flex: 1; min-width: 0; margin: 0;}
.MessengerComposer-field form {display: flex; align-items: flex-end; gap: 8px; margin: 0;}
.MessengerComposer-field .bodybox-wrap,
.MessengerComposer-field .TextBoxWrapper,
.MessengerComposer-field .richEditor {flex: 1; min-width: 0; margin: 0;}
.MessengerComposer-field textarea,
.MessengerComposer-field .TextBox {
	min-height: 42px !important;
	max-height: 140px;
	border-radius: var(--radius-sm) !important;
	padding: 10px 16px !important;
	width: 100%;
	resize: none;
}

.MessengerComposer-field .Buttons {flex: 0 0 auto; margin: 0; padding: 0;}
.MessengerComposer-send {
	background: var(--color-accent) !important;
	color: #fff !important;
	border: none !important;
	cursor: pointer;
}
.MessengerComposer-send:hover {background: var(--color-primary) !important;}

/* --- Conversation-info drawer (reuses the theme Panel) ------- */
.MessengerMode.all:not(.MessengerHasChat) #Panel,
.MessengerMode.inbox:not(.MessengerHasChat) #Panel {display: none;}
.MessengerMode.MessengerHasChat #Panel,
.MessengerMode.index #Panel {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 340px;
	max-width: 88vw;
	margin: 0;
	padding: 90px 22px 22px;
	background: #fff;
	box-shadow: -12px 0 35px rgba(50,66,93,.18);
	transform: translateX(105%);
	transition: transform .3s ease;
	overflow-y: auto;
	z-index: calc(var(--z-app-overlay) + 10);
	display: block;
}
body.MessengerMode.MessengerHasChat.MessengerInfoOpen #Panel,
body.MessengerMode.index.MessengerInfoOpen #Panel,
#Panel.MessengerInfoDrawer-open {transform: translateX(0);}
body.MessengerMode.MessengerHasChat.MessengerInfoOpen:after,
body.MessengerMode.index.MessengerInfoOpen:after {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(50,66,93,.3);
	z-index: var(--z-app-overlay);
}
.MessengerMode.MessengerHasChat #Panel .Box,
.MessengerMode.index #Panel .Box {margin-bottom: 22px;}
.MessengerMode.MessengerHasChat #Panel .inside,
.MessengerMode.MessengerHasChat #Panel .BoxNewDiscussion,
.MessengerMode.MessengerHasChat #Panel .bannerRight,
.MessengerMode.index #Panel .inside,
.MessengerMode.index #Panel .BoxNewDiscussion,
.MessengerMode.index #Panel .bannerRight {display: none;}

/* --- Mobile: fullscreen list OR chat ------------------------- */
@media (max-width: 768px) {
	.MessengerMode #Body {margin: 0; padding-top: 90px;}
	.MessengerShell {display: block; height: auto; min-height: 0; margin-top: 0; gap: 0;}
	.MessengerSidebar, .MessengerPanel {border-radius: 0; box-shadow: none;}

	body.MessengerMode.all .MessengerPanel,
	body.MessengerMode.inbox .MessengerPanel {display: none;}
	body.MessengerMode.all .MessengerSidebar,
	body.MessengerMode.inbox .MessengerSidebar {display: flex; min-height: calc(100vh - 90px);}

	body.MessengerMode.index .MessengerSidebar {display: none;}
	body.MessengerMode.index .MessengerPanel {display: flex;}
	.MessengerChat {height: calc(100vh - 90px);}
	.MessengerChat-back {display: flex;}
	.MessengerChat-newchip {bottom: 104px;}
	.MessageBubble-content {max-width: 82%;}

	/* Swipe rows need an opaque, layered link to cover the leave action. */
	.MessengerConversation-link {position: relative; z-index: 1; background: #fff; will-change: transform;}
	.MessengerConversation-link:hover {background: #fff;}
}


.CommentForm .Form-Header .Author .PhotoWrap {display: none;}