@charset "utf-8";
/* CSS Document */

* {
  box-sizing: border-box;
}

.cover-container {
  display:none;
}

.cover-container.open {
  background-color: rgb(255, 255, 255);
  position: fixed;
  inset: 0px;
  opacity: 0.7;
  z-index: 9998;
  cursor: pointer;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Font face bleibt global (nur die Font-Files sind lokal) */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 400;
  src: url('/fonts/materials.woff2') format('woff2');
  font-display: block;
}

body.mymuseum h1 {
  font-size:1.8em;
}

body.mymuseum .MainTop {
  font-size:1.4em;
}

/* Wrapper-Scoping: alles wirkt nur innerhalb .wertermittlung */
.wertermittlung {
  --bg: #ffffff;
  --muted: #6b7280;
  --text: #1f2937;
  --accent: #f7931e;     /* orange as accent */
  --primary: #2e5c90;    /* button */
  --success: #3b773b;
  --panel: #f7f9fb;
  --card-border: rgba(16,24,40,0.06);
  --radius: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  line-height: 1.45;
  box-sizing: border-box;
}

/* normalize inside wrapper */
.wertermittlung *, .wertermittlung *::before, .wertermittlung *::after {
  box-sizing: inherit;
}

/* Headings */
.wertermittlung h1 {
  font-size: 1.45rem;
  margin: 0 0 0.6rem;
  letter-spacing: -0.02em;
  color: var(--text);
  font-weight: 700;
}

.wertermittlung h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  display: block;
  color: var(--text);
}

.wertermittlung h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  display: block;
  color: #0f172a;
}

.wertermittlung h4 {
  font-size: 0.98rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

/* numbered badges for h4.number */
.wertermittlung h4.number {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.wertermittlung h4.number::before {
  content: '';
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  background: #111827;
  flex-shrink: 0;
}
.wertermittlung h4.number.one::before { content: '1'; background: linear-gradient(180deg,#64e764,#b7fdb7);}
.wertermittlung h4.number.two::before { content: '2'; background: linear-gradient(180deg,#ffb508,#ffde93);}
.wertermittlung h4.number.three::before { content: '3'; background: linear-gradient(180deg,#ff1516,#ffaaad);}

/* paragraphs */

/* info + premium panels */
.wertermittlung .info_container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 18px;
  align-items: stretch;
  margin: 0 0 1rem;
}

.wertermittlung .info_container .item {
  background: linear-gradient(180deg, var(--panel), #ffffff);
  border: 1px solid var(--card-border);
  padding: 18px;
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(16,24,40,0.04);
  color: var(--text);
}

/* different color accents for left / right */
.wertermittlung .info_container .item.one { position:relative;background: linear-gradient(180deg,#f0f6fb,#eef6ff); border-color: #cbdff2; }
.wertermittlung .info_container .item.two { position:relative;background: linear-gradient(180deg,#fbf7ed,#fffaf0); border-color: #e6dcc1; }

.wertermittlung .info_container .item.one  img {
  width: 120px;
  float: right;
  margin: 10px 0 0 10px;
}

.wertermittlung .info_container .item.two  img {
  width: 120px;
  float: left;
  margin: 0 10px 0 0;
  transform: scalex(-1);
}

.to_mylokmuseum {
  text-align: center;
  margin:10px 0
}

.to_mylokmuseum a {
  display:inline-block;
  background:var(--primary);
  color: #fff;
  padding: 12px 26px;
  border-radius: 12px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(46,92,144,0.16);
  transition: transform .12s ease, box-shadow .12s ease;
}

.to_mylokmuseum a:hover {
  color:#FFF;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(46,92,144,0.18);

}



/* Intro headings inside cards */
.wertermittlung .info_container h2 {
  font-size: 1.1rem;
  margin: 0 0 .6rem;
  color: #0b2540;
}

/* register button container */
.wertermittlung .register_button_container {
  text-align: center;
  margin: 28px 0;
}
.wertermittlung .register_button_container .button {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 12px 26px;
  border-radius: 12px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(46,92,144,0.16);
  transition: transform .12s ease, box-shadow .12s ease;
}
.wertermittlung .register_button_container .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(46,92,144,0.18);
}

/* lists */
.wertermittlung ul {
  margin: .6rem 0 1rem;
  padding-left: 1.15rem;
}

.wertermittlung ul.w-materials {
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

/* material icon bullets (keep using your material font) */
.wertermittlung ul.w-materials > li {
  position: relative;
  padding-left: 48px;
  margin: 1.1rem 0;
}

.wertermittlung .premium_info {
  margin:40px;
}

.wertermittlung ul.w-materials > li::before {
  font-family: 'Material Symbols Outlined';
  content: 'arrow_drop_down_circle';
  position: absolute;
  left: 0;
  top: -10px;
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 30;
  font-size: 28px;
  transform: rotate(-90deg);
  color: var(--accent);
}

/* nested lists and legend */
.wertermittlung .prem_legend { list-style: none; margin: 10px 0 0; padding: 0; display:flex; gap:12px; align-items:center;}
.wertermittlung .prem_legend li { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:0.95rem; }
.wertermittlung .icon_info_prem { width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:6px; }

/* icon colors */
.wertermittlung .icon_info_prem.wertermittlung { background:#a5bfdd; }
.wertermittlung .icon_info_prem.mylokmuseum { background:#ddd3a5; }

/* small helpers for item icons (keep using the Material font for check/minus) */
.wertermittlung span.item { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }
.wertermittlung span.item::before {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 30;
  margin-right: 0.25rem;
}
.wertermittlung span.item.check::before { content: 'check'; font-size:20px; color: var(--success); }
.wertermittlung span.item.minus::before { content: 'check_indeterminate_small'; font-size:20px; color: #bfc3c6; }

/* star decorative */
.wertermittlung .star::before {
  content: 'star';
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 200;
  font-size: 36px;
  margin-right: 10px;
  vertical-align: middle;
  color: #f2c94c;
}

/* hr */
.wertermittlung hr.dark {
  border: 0;
  border-top: 1px solid #2b2b2b;
  margin: 28px 0;
}

/* table styling (PremiumVorteile) */
.wertermittlung table.PremiumVorteile {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.95rem;
}
.wertermittlung table.PremiumVorteile th,
.wertermittlung table.PremiumVorteile td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,0.06);
  text-align: left;
  vertical-align: middle;
}
.wertermittlung table.PremiumVorteile tr:first-child th {
  border-bottom: 2px solid rgba(15,23,42,0.08);
}
.wertermittlung table.PremiumVorteile td.first { width: 80px; text-align:center; }
.wertermittlung table.PremiumVorteile td.second { width: 80px; text-align:center; }

/* content images */
.wertermittlung .contentimg {
  max-width: 100%;
  border-radius: 8px;
  display: block;
  margin: 12px 0;
  border: 1px solid var(--card-border);
}

/* "bed_container" cards row - responsive grid */
.wertermittlung .bed_container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 10px 0 16px;
}
.wertermittlung .bed_container .item {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.wertermittlung .bed_container .item .topic {
  padding: 12px 14px;
  font-weight: 800;
  font-size: .95rem;
  color: #0b2540;
}

.wertermittlung .bed_container .item .desc {
  padding: 12px 14px 18px;
  color: var(--muted);
  font-size: .95rem;
}

.wertermittlung .bed_container .item .desc_info {
  padding: 12px 14px 18px;
  color: var(--muted);
  font-size: .95rem;
}


/* topic background variations (kept gradients as before but adjusted for accessibility) */
.wertermittlung .item.meaning.one .topic { background: linear-gradient(180deg,#64e764,#b7fdb7); color:#072b07; }
.wertermittlung .item.meaning.two .topic { background: linear-gradient(180deg,#ffb508,#ffde93); color:#3a2a00; }
.wertermittlung .item.meaning.three .topic { background: linear-gradient(180deg,#ff1516,#ffaaad); color:#370606; }
.wertermittlung .item.meaning.four .topic { background: linear-gradient(180deg,#7ca1ff,#b0c8ff); color:#06103a; }
.wertermittlung .item.meaning.five .topic { background: linear-gradient(180deg,#db79ff,#e8a9ff); color:#2e004d; }
.wertermittlung .item.meaning.six .topic { background: linear-gradient(180deg,#ffa6df,#ffc3ec); color:#3a0024; }

/* description lists inside cards */
.wertermittlung .desc_info ul { margin: 8px 0 0 1.05rem; padding: 0; color:var(--muted); }

/* small utilities */
.wertermittlung .no-check li::before { content: none !important; }
.wertermittlung .flex_container { margin: 14px 0; }
.wertermittlung .flex_container.two {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 20px;
}

/* Premium section layout spacing */
.wertermittlung a[name="premium"] { display:block; height:0; margin-top: -90px; padding-top: 90px; } /* anchor offset */

/* responsive tweaks */
@media (max-width: 720px) {
  .wertermittlung h1 { font-size: 1.22rem; }
  .wertermittlung h2 { font-size: 1.12rem; }
  .wertermittlung .register_button_container { margin: 20px 0; }
  .wertermittlung table.PremiumVorteile td, .wertermittlung table.PremiumVorteile th { padding: 8px; font-size: .9rem; }
}

/* subtle typographic improvements for long text blocks */
.wertermittlung li h3 { margin-bottom: 8px; }

/* end of scoping */

.mlm_start_container {
	margin:0 0 20px;
}

.mlm_start_container img {
	width:100%;
	display:block;
}

.mlm_start_container .mlm_start_image {
	box-shadow:1px 3px 5px -1px #ccc;
	position:relative;
}

.mlm_start_container .mlm_start_image img.mobile {
  display:none;
}


.mlm_start_container .wertie {
  position: absolute;
  bottom: -45px;
  right: -15px;
  transform: scaleX(-1);
  width: 200px;
}

.mlm_start_container .wertie img  {
  width: 100%;
}

.mlm_start_container .mlm_main_topic {
  position: absolute;
  top: 30%;
  background: white;
  opacity: 0.8;
  font-size: 50px;
  line-height: normal;
  font-weight: 600;
  padding: 0 60px;
  left: 0;
}

.mlm_start_container .mlm_sec_topic {
  position: absolute;
  top: 50%;
  background: #f8d22d;
  font-size: 25px;
  line-height: normal;
  font-weight: 500;
  padding: 0 30px;
  left: 10%;
  color: #a02801;
}

.mlm_start_container .mlm_thrd_topic {
  position: absolute;
  top: 70%;
  background: #f80;
  font-size: 20px;
  line-height: normal;
  font-weight: 500;
  padding: 5px 20px;
  left: 27%;
  color: #FFF;
}

@media (max-width: 520px) {
    .mlm_start_container .mlm_start_image img.mobile {
      display:block;
    }

    .mlm_start_container .mlm_start_image img.desktop {
      display:none;
    }

    .mlm_start_container .mlm_main_topic {
      top: 10%;
      font-size: 50px;
      padding: 0 20px;
    }

    .mlm_start_container .mlm_sec_topic {
      top: 31%;
      right: 10%;
    }

    .mlm_start_container .mlm_thrd_topic {
      font-size: 30px;
      left: 12%;
      padding: 10px 20px;
      top:65%;
    }
}


.materials::before,.fa::before,.fas::before,.studioadmin .servicebutton::before, .slick-arrow::before,.ServiceButton.AdminList::before  {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 30 !important;
  font-size: 20px;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  transition: 0.2s;
}

.servicebutton.link::before {
  font-size:15px;
}

.materials:hover::before {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 30 !important;
}

.close::before {
  content: "close";
  background: #2e5c90;
  border-radius: 50%;
  padding: 2px;
  color: #FFF;
}

.reset::before {
  content: "restart_alt";
  background: #2e5c90;
  border-radius: 50%;
  padding: 2px;
  color: #FFF;
}

.build::before {
  content:"build";
  margin:0 5px 0 0;
  font-size:24px;
}

.visibility::before {
  content:"visibility";
  margin:0 5px 0 0;
  font-size:20px;
}

.plus::before {
  content:"add";
  font-size:24px;
  margin:0 5px 0 0;
}

.goback::before {
  content:"chevron_backward";
}

.info::before {
  content:"info";
}

.delete::before {
  content:"delete";
}

.pdf::before {
  content:"picture_as_pdf";
}

table .selling_true::before {
  content: 'sell';
  color: #499c35;
}

table .selling_false::before {
  content: 'sell';
  color: #b8b8b8;
}

table .icon_user::before {
  content:'face';
  display:inline-block;
  margin:0 10px 0 0;
  vertical-align: middle;
}


.SpecificListItemRow {
      background: #fff;
      border-radius: 6px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      border:1px solid #ccc;
      margin:0 0 2px;
}

  .SpecificListItemRow:hover {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  }

    .SpecificListItemRow .MyMuseumListItemEditArea .OuterAddEditMyMuseumArea {
      border-top:1px solid #ccc;
      padding:20px 40px;
    }

    .MyMuseumItemContainer {
      display: flex;
      flex-wrap: wrap;
    }

    .MyMuseumItemImageContainer {
      flex: 0 0 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      border-right: 1px solid #eee;
    }

    .MyMuseumItemImageContainer img {
      max-width: 100%;
      max-height: 150px;
      object-fit: contain;
      border-radius: 4px;
    }

    .MyMuseumItemMiscContainer {
      flex: 1;
      padding: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .MyMuseumItemTools i {
      cursor: pointer;
      font-size: 18px;
      color: #666;
      transition: color 0.2s;
    }


    .MyMuseumItem.Bezeichnung {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 6px;
      color: #222;
    }

    .MyMuseumItem.Beschreibung {
      font-size: 0.9rem;
      color: #555;
      margin-bottom: 10px;
      line-height: 1.4;
    }

    .MyMuseumItem.PriceQty {
      font-size: 0.9rem;
      color: #444;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #eee;
      padding-top: 8px;
    }

    .MyMuseumItem.PriceQty b {
      font-size: 1rem;
      color: #111;
    }

    .symbol {
      height: 16px;
      vertical-align: middle;
      margin-left: 4px;
    }

    @media (max-width: 600px) {
      .MyMuseumItemImageContainer {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid #eee;
      }

      .MyMuseumItemMiscContainer {
        padding: 12px;
        margin:0 !important;
      }
    }

.AddNewMyMuseumListGrey {
    border: 1px solid;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 10px;
    background: #ccc;
	color:#b0b0b0;
}

.AddNewMyMuseumList, .AddNewMyMuseumListItem, .DontAddNewMyMuseumListItem {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 6px;
  background: linear-gradient(to bottom, #6998cd 0%, #4474aa 50%, #305f95 51%, #1c4473 100%);
  color:#FFF;
  cursor:pointer;
  font-size:1.2em;
  vertical-align: middle;
}

.AddNewMyMuseumList:hover, .AddNewMyMuseumListItem:hover, .DontAddNewMyMuseumListItem:hover {
  background: linear-gradient(to top, #6998cd 0%, #4474aa 50%, #305f95 51%, #1c4473 100%);
}


.DontAddNewMyMuseumListItem, .AddEditMuseumItemButtonDisabled {
	background:#ccc;
	color:#b0b0b0;
	cursor:auto;
	border:1px solid #ccc;
}

.BackToMyMuseumLists, .BackToMyMuseumList {
	display: inline-block;
	padding: 10px 0;
	border-radius: 6px;
	background: linear-gradient(to bottom, #8ebcef 0%, #9fc8f5 50%, #8ebcef 51%, #73a5dd 100%);
	color:#2e5c90;
	cursor: pointer;
	font-size: 1.2em;
	width: 40px;
	text-align: center;
	margin: 0 2px 0 0;
  vertical-align: middle;
  transition: background 0.5s ease;
}

.BackToMyMuseumLists:hover, .BackToMyMuseumList:hover {
  background: linear-gradient(to top, #8ebcef 0%, #9fc8f5 50%, #8ebcef 51%, #73a5dd 100%);
}

.MyMuseumLists .MyMuseumListBeschreibung {
    font-size: 1.1em;
    line-height: 1.4em;
    margin: 0;
    padding: 0 5px;
}

.MyMuseumForm select, .MyMuseumForm input[type="text"], .MyMuseumForm input[type="password"], .MyMuseumForm textarea, .MyMuseumLists input[type="text"]  {
  border: 1px solid 
  #999;
  height: 30px;
  padding: 0 5px;
  font-size: 95%;
  width: 300px;
  box-sizing: border-box;
  -webkit-border-radius: 0;
  border-radius: 0;
  margin:0 0 2px;
  display:block;
  background:#FFF;
}



.CustomerContainer .welcome_info {
  margin: 0 0 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border-radius: 12px;
  padding: 20px;
  position:relative;
}

.CustomerContainer .welcome_info.welcome_info.invisible {
  box-shadow:unset;
  padding: 0;
}

.CustomerContainer .welcome_info .info_button {
  position:absolute;
  top:5px;
  right:5px;
}

.CustomerContainer .welcome_info.visible .info_button::before {
  content:"close";
}

.CustomerContainer .welcome_info.invisible .info_button::before {
  content:"info";
  color:#FFF;
}

.CustomerContainer .welcome_info.invisible .inner {
  display:none;
}

@media (max-width: 600px) {
  .ListToolSearch {
    width:250px !important;
  }

  .MyMuseumItemContainer .MyMuseumItem.Bezeichnung {
    white-space: nowrap;       
    overflow: hidden;           
    text-overflow: ellipsis;    
    width: 200px; 
    display:inline-block;
    vertical-align: middle;
  }

  .MyMuseumForm .LokMuseumImages .DetailImageContainer a, .MyMuseumForm .OwnImageArea span {
    max-width: 32% !important;
  }
}

.MyMuseumForm .SimpleBeschreibung {
	margin: 0px 0 20px;
	font-size: 80%;
}

.MyMuseumForm button.tooltipst {
  width: 100%;
  margin: 0 0 2px 0;
  background: linear-gradient(to bottom, #6998cd 0%, #4474aa 50%, #305f95 51%, #1c4473 100%);
  border: 1px solid #4474aa;
  padding: 10px;
}

.AddNewMyMuseumListItemArea {
  margin:15px 0;
}

.AddFromLokmuseumContainer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
}

.AddFromLokmuseumButton {
  display: inline-block;
  border-radius: 6px;
  background-image: 
  url('/img/lokmuseum.webp'),
  linear-gradient(to bottom, #fff1b4 0%, #ffe057 50%, #f8d42d 51%, #f7c900 100%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  padding: 4px 12px 4px 64px;
  height: 30px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  color: #ff6c00;
  font-size: 12px;
  font-weight: 500;
  margin:0 0 10px;
}

.AddFromLokmuseumButton:hover {
  background-image: 
  url('/img/lokmuseum.webp'),
  linear-gradient(to top, #fff1b4 0%, #ffe057 50%, #f8d42d 51%, #f7c900 100%);
}

.side-container {
  position: fixed;
  top: 0;
  right: -90%;
  width: 90%;
  max-width:400px;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: right 0.4s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.side-container.open {
  right: 0;
}


.side-container .AddFromLokmuseumSearch {
	margin:10px 0 2px;
}

.side-container .AddFromLokmuseumSearchfield {
    padding: 5px;
    font-size: 14px;
    font-family: inherit;
	width:100%;
	box-sizing:border-box;
}

.MyMuseumForm button.slim-btn {
    width: 36px;
}

.MyMuseumForm textarea {
	padding:5px;
	height:100px;
}

.MyMuseumFormResponse {
	height:40px;
}

.MyMuseumFormResponse .GeneralIssue,.MyMuseumFormResponse .GeneralSuccess {
    font-size: 80%;
    text-align: center;
    display: block;
	margin:5px 0;
}

.MyMuseumForm .CheckboxIsPublicArea {
	font-size:80%;
	margin:10px 0;
}



.MyMuseumLists hr, #PopupContainer hr {
	margin:10px 0;
	border-top:1px solid #ccc;
	height:1px;
}

.MuseumListItemFormContainer {
	border: 1px solid #ccc;
	padding: 10px;
	width:100%;
  height:100vh;
}

.xxxMuseumNewListItemFormContainer {
    border: 1px solid #ccc;
    padding: 10px;	
    width: 100%;
}

.AddNewMyMuseumListItemArea .OuterAddEditMyMuseumArea {
  border: 1px solid #ccc;
  margin: 15px 0;
  padding: 10px;	
  border-radius:6px;
}

.OuterAddEditMyMuseumArea label {
	color:#666;
	font-size:95%;
	display:block;
}

.CheckboxAllContainer {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  margin: 10px 0;
}

/* Responsive Varianten */
@media (max-width: 600px) {
.CheckboxAllContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 10px 0;
}
}

.CheckboxContainer span {
	color:#666;
	font-size:95%;
}


.CheckboxContainer.real {
  display: flex;
  align-items: center;
  font-family: system-ui, sans-serif;
  gap: 8px;
}

/* Input selbst unsichtbar, aber benutzbar */
.CheckboxContainer.real input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Das Label ist der klickbare Bereich */
.CheckboxContainer.real .switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

/* Der "Track" */
.CheckboxContainer.real .slider {
  position: relative;
  width: 38px;
  height: 20px;
  background-color: #ccc;
  border-radius: 999px;
  transition: background-color 0.3s;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Der "Thumb" (runde Knopf) */
.CheckboxContainer.real .slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Wenn gecheckt */
.CheckboxContainer.real input:checked + .switch .slider {
  background-color: #8ebcef; 
}

.CheckboxContainer.real input:checked + .switch .slider::before {
  transform: translateX(20px);
}

/* Label-Text */
.CheckboxContainer.real .label-text {
  font-size: 12px;
  color: #333;
}

/* Optional: kleine visuelle Verbesserung beim Hover */
.CheckboxContainer.real .switch:hover .slider {
  filter: brightness(1.1);
}

.EditFormGridContainer {
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:20px
}

/* Responsive Varianten */
@media (max-width: 600px) {
  .EditFormGridContainer {
    display:grid;
    grid-template-columns: 1fr;
    gap:20px;
  }
}



.AddFromLokmuseumListContainer {
	border:1px solid #ccc;
	height: calc(100vh - 100px);
	width:100%;
	overflow:auto;
}

.CancelActionContainer {
  text-align: right;
  margin:0 0 10px;
}

.AddFromLokmuseum {
  font-size: 1.2em;
  font-weight: bold;
}

.AddFromLokmuseum {
  display: grid;
  grid-template-columns: 1fr auto; /* erster Span füllt links, zweiter nur so breit wie nötig */
  align-items: center;             /* vertikal zentriert */
  width: 100%;
}

.AddFromLokmuseumListContainer ul {
	margin:0;
	padding:0;
}

.Grid-Container.product-form {
  display: grid;
  align-items: center;
  width: 100%;
  gap: 10px;
  margin: 10px 0;
}

.Grid-Container.product-form.line-b {
    grid-template-columns: 1fr 1fr;
}

.Grid-Container.product-form.line-a1 {
  grid-template-columns: 1fr 2fr 2fr;
  gap:10px
}

.Grid-Container.product-form.line-a {
  grid-template-columns: 3fr 2fr 2fr;
  gap: 10px; /* etwas Luft zwischen den Spalten */
  align-items: end; /* Eingabefelder schön ausrichten */
}

/* Mobile Variante */
@media (max-width: 768px) {
  .Grid-Container.product-form.line-a {
    grid-template-columns: 2fr 2fr 1fr; /* 3 Spalten in der zweiten Reihe */
    grid-template-areas:
      "bezeichnung bezeichnung bezeichnung"
      "preis1 preis2 qty";
  }

  /* Definiere die Position der einzelnen Felder */
  .Grid-Container.product-form.line-a > div:nth-child(1) {
    grid-area: bezeichnung;
  }

  .Grid-Container.product-form.line-a > div:nth-child(2) {
    grid-area: preis1;
  }

  .Grid-Container.product-form.line-a > div:nth-child(3) {
    grid-area: preis2;
  }

  .Grid-Container.product-form.line-a > div:nth-child(4) {
    grid-area: qty;
  }

  .Grid-Container.product-form.line-b {
    grid-template-columns: 1fr;
  }
}


.AddFromLokmuseumListContainer ul li {
    margin: 0;
    border-bottom: 1px solid #ccc;
    font-size: 85%;
    padding:5px;
    cursor:pointer;
}

.AddFromLokmuseumListContainer ul li:hover {
  background:#8ebcef;
}

.MyMuseumForm .Form33Seperator {
	width:31%;
	margin:0 1%;
	display:inline-block;
	vertical-align:top;
}

.MyMuseumForm .LokMuseumImages img {
	width:100%;
	border-radius:4px;
}

.MyMuseumForm  h2 {
	font-size:16px;
}

.MyMuseumForm  h3 {
	font-size:100%;
}



.MyMuseumForm .LokMuseumImages {
	margin:10px 0;
}

.MyMuseumForm .LokMuseumImages .ohnebild {
  width:100%;
  max-width: 95px;
}

.MyMuseumForm .LokMuseumImages .DetailImageContainer a, .MyMuseumForm .OwnImageArea span {
    margin: 0 0.5% 0.5% 0;
    float: left;
    max-width:130px;
}

.MyMuseumForm .OwnImageArea span {
	position:relative;
}

.MyMuseumForm .OwnImageArea span i {

    position: absolute;
    bottom: 15px;
    right: 10px;
    z-index: 100000000;
    transition: .5s all;
    opacity: 0;
    background: #FFF;
	padding: 5px;
	border-radius: 100%;
	color:#000;
    font-size: 16px;
    font-weight: 100;
	cursor:pointer;

}

.MyMuseumForm .OwnImageArea span:hover i {
	opacity:0.8;
}

#PopupContainer {
   display: block;  /* wichtig für Größenmessung */
    width: auto;     /* passt sich dem Inhalt an */
    height: auto;
}

.bPopUp {
  height:auto !important;
  box-sizing: unset;
}

#PopupContainer .OuterAddEditMyMuseumArea {
	width:600px;
	height:500px;
	overflow:auto;
	padding:10px;	
}

#PopupContainer .OuterAddEditMyMuseumArea label, #PopupContainer .CheckboxContainer span  {
	font-size:11px;
}

.MyMuseumItemContainer {
	padding:10px;
	margin:0.5% 0%;
	transition:all 0.5s;
	position:relative;
}

.MyMuseumItemTools {
  top: -3px;
  right: 2px;
  position: absolute;
  border: 1px solid #ccc;
  background: #f4f4f4;
  padding: 2px;
  border-radius: 4px;
}

.MyMuseumItemTools span {
	margin:0 2px;
	display:inline-block;
}

.MyMuseumItemTools .RemoveMyMuseumListItemEntry {
    color:#c00000;
    cursor: pointer;
}

.MyMuseumItemTools .SpecificListItemEdit {
	cursor:pointer;
}


.MyMuseumItemContainer .MyMuseumItem.Bezeichnung {
	font-weight:bold;
}

.MyMuseumItemContainer .MyMuseumItem.Beschreibung {
    font-size: 80%;
    line-height: 1.4em;
	margin:10px 0;
}

.MyMuseumItemContainer .MyMuseumItem.PriceQty {
	line-height:1.4em;
	font-size:80%;
	text-align:right;
}

.MyMuseumItemContainer .MyMuseumItemImageContainer {
	width:120px;
}

.MyMuseumItemContainer .MyMuseumItemMiscContainer {
	vertical-align:top;
}

.MyMuseumListContainer {
  padding: 20px 0;
}

.MyMuseumListContainer.small .MyMuseumItemContainer .MyMuseumItemImageContainer,
.MyMuseumListContainer.smallest .MyMuseumItemContainer .MyMuseumItemImageContainer {
  display:none;
}

.MyMuseumListContainer.small .MyMuseumItemContainer .MyMuseumItemMiscContainer,
.MyMuseumListContainer.smallest .MyMuseumItemContainer .MyMuseumItemMiscContainer {
  margin:0;
}

.MyMuseumListContainer.small .MyMuseumItem.Beschreibung,
.MyMuseumListContainer.smallest .MyMuseumItem.Beschreibung {
  display:none;
}

.MyMuseumListContainer.smallest {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:2px 5px;
}

/* Responsive Varianten */
@media (max-width: 600px) {
  .MyMuseumListContainer.smallest {
    display:grid;
    grid-template-columns: 1fr;
    gap:2px 0;
  }
}

.MyMuseumListContainer.smallest .MyMuseumItem.PriceQty {
  display:none;
}

.MyMuseumListContainer.smallest .MyMuseumItemMiscContainer {
  padding:5px;
  display:block;
}

.MyMuseumListContainer.smallest .MyMuseumItemContainer {
  padding: 0;
  margin: 0;
  display:block;
}

.MyMuseumListContainer.smallest  .MyMuseumItemTools {
  top: 1px;
  padding:6px 2px;
}

.MyMuseumListContainer.smallest .MyMuseumItem.Bezeichnung {
  margin:0;
  font-size: 0.85rem;
}

.MyMuseumListContainer.smallest .MyMuseumItem.Bezeichnung  {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.MyMuseumListContainer .image.smallest {
  display:none;
}

.MyMuseumListContainer.smallest .image.smallest {
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 0 0;
}

.MyMuseumListContainer.smallest .image.smallest span {
  width: 30px;
  height: 30px;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #e9f3ff;
  background-position: center center;
  border-radius: 4px;
}

.MyMuseumListToolContainer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  margin:20px 0;
}

.MyMuseumListToolContainer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.MyMuseumListToolContainer ul li {
  display:inline-block;
}

.MyMuseumListToolContainer ul li.regular::before {
  content:"tabs";
  font-size: 28px;
  color:#2e5c90;
}

.MyMuseumListToolContainer ul li.regular.active::before {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 30 !important;
}

.MyMuseumListToolContainer ul li.small::before {
  content:"clarify";
  font-size: 28px;
  color:#2e5c90;
}


.MyMuseumListToolContainer ul li.small.active::before {
   font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 30 !important;
}

.MyMuseumListToolContainer ul li.smallest::before {
  content:"featured_play_list";
  font-size: 28px;
  color:#2e5c90;
}

.MyMuseumListToolContainer ul li.smallest.active::before {
   font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 30 !important;
}


.MyMuseumItemContainer .MyMuseumItemImageContainer img, .MyMuseumForm .OwnImageArea img  {
	width:100%;
	max-width: 170px;
}

.MyMuseumForm .OwnImageArea img {
	border-radius:4px;
}

.FileCroppingArea {
	width:130px;
	margin:0 0.5% 0.5% 0;
	float:left;
}

.slim {
	border-radius:4px;
	border:2px dashed #ccc;
}

.MyMuseumItemDetailContainer {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap:20px;
  margin:20px 0;
}

.MyMuseumItemDetailContainer .MyMuseumItemDetailImageContainer img {
	width:100%;
}

.MyMuseumItemDetailImageContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Hauptbild groß und zentriert */
.MyMuseumItemDetailImageContainer .DetailImageContainer .MainImageContainer {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
}

.MyMuseumItemDetailImageContainer .DetailImageContainer .MainImageContainer img {
  width: 100%;
  max-width: 640px !important; /* Überschreibt MagicZoom inline-Styles */
  height: auto !important;
  display: inline-block;
}


/* Kleine Vorschaubilder */
.MyMuseumItemDetailImageContainer .DetailImageContainer a.mz-thumb:not(.MagicZoom) img {
  width: 70px;
  height: auto;
  cursor: pointer;
  transition: border 0.2s ease;
  margin: 0 2px;
  border-radius: 4px;
  transition: border 0.2s ease;
}

/* Responsive Varianten */
@media (max-width: 600px) {
  .MyMuseumItemDetailImageContainer .DetailImageContainer {
    grid-template-columns: repeat(2, auto);
  }
}

@media (max-width: 400px) {
  .MyMuseumItemDetailImageContainer .DetailImageContainer {
    grid-template-columns: 1fr;
  }
}


.MyMuseumItemDetailMiscContainer .Bezeichnung {
	font-size:20px;
}




/* listenübersicht */

.MyMuseumListItemsContainer {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 1.5rem;
      max-width: 1200px;
      margin: 20px auto;
}

.xxxMyMuseumListItemsContainer .community_list_button {
  width: 100%;
  margin: 0 0 2px 0;
  background: linear-gradient(to bottom, #6998cd 0%, #4474aa 50%, #305f95 51%, #1c4473 100%);
  border: 1px solid #4474aa;
  padding: 10px;
}

    .MyMuseumListItem {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .MyMuseumListItem:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    }

    .MyMuseumListItemIcons {
      display: flex;
      gap: 10px;
      padding:0 12px;
      border-bottom: 1px solid #8ebcef;
      background: #8ebcef;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .MyMuseumListItemIcons li {
      display:inline-block;
      margin: 0 2px;
    }

    .MyMuseumListItemIcons i {
      font-size: 18px;
      cursor: pointer;
      color: #2e5c90;
      transition: color 0.2s ease;
    }

        .MyMuseumListItemIcons i::before {
          font-size:26px;
        }

    .MyMuseumListItemName {
      flex: 1; /* nimmt so viel Platz wie möglich */
      min-width: 0; /* wichtig bei flexbox, damit ellipsis funktioniert */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }


    .MyMuseumListItemType {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px;
      text-align: center;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .MyMuseumListItemType:hover {
      background: #f9fafb;
    }

    .MyMuseumListItemImage {
      width: 100%;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 10px;
    }

    .MyMuseumListItemName {
      font-size: 1rem;
      font-weight: 600;
      color: #2e5c90;
    }

    .MyMuseumListItemDates {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 0.9rem;
    }

    .MyMuseumListItemDates > div {
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #eee;
      padding-top: 4px;
    }

    .MyMuseumListItemDates .col1 {
      font-weight: 500;
      color: #555;
    }

    .MyMuseumListItemDates .col2 {
      color: #333;
    }

    @media (max-width: 400px) {
      .MyMuseumListItemType {
        padding: 10px;
      }
      .MyMuseumListItemImage {
        height: 120px;
      }
    }

/* listen übersicht */

.wertermittlung--Contact-container {
  width:400px;
}

.wertermittlung--Contact-container h3 {
  font-weight:bold;
}

.wertermittlung--Contact-container textarea {
  width:100%;
  font-family: inherit;
  height:150px;
}

.wertermittlung--Contact-container .message_from {
  margin:10px 0;
  display:block;
  font-size:95%;
  color:#666;
}

.wertermittlung--Contact-container button {
  margin:10px 0 0;
}

.wertermittlung--Contact-container .output_container.fail {
  margin:10px 0;
  color:#990000;
  font-weight: bold;
}

.wertermittlung--Contact-container .output_container.success {
  margin:10px 0;
  color:rgb(0, 87, 0);
  font-weight: bold;
}

#list_login {
  position:relative;
}

#list_login .mail_icon {
  position: absolute;
  top: -20px;
  right: -20px;
  background: #9f2800;
  padding: 2px 4px;
  border-radius: 4px;
  color: #FFF;
  font-size: 12px;
  display: inline-block;
  width: auto;
  height: auto;
  line-height: normal;
}


.mail_icon::before {
  content:'mail';
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 30 !important;
  font-size: 17px;
  margin:0 3px 0 0;
}

ul.message-list {
    list-style: none;         
    margin: 0;
    padding: 0;
    width: 100%;             /* ✅ volle Breite */
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

ul.message-list li {
    display: flex;           
    justify-content: space-between;
    align-items: center;
    width: 100%;             /* ✅ volle Breite für jedes Listenelement */
    padding: 5px 6px;
    border-bottom: 1px solid #ddd;
    transition: background 0.2s;
    cursor: pointer;
    box-sizing: border-box;
}

ul.message-list li:hover {
    background: #f5f5f5;
}

ul.message-list li.is_not_read {
    background: #eef5ff;      
    font-weight: 600;
}

ul.message-list .user_from {
    flex: 0 0 120px;           /* etwas mehr Platz für Namen */
    font-weight: bold;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

ul.message-list li.own_message .user_from, ul.message-list li.own_message .short_message {
  font-weight: normal;
  color:#919191;
}

ul.message-list .is_read .user_from {
  font-weight: normal;
}


ul.message-list .short_message {
    flex: 1;
    margin: 0 10px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

ul.message-list .time {
    flex: 0 0 auto;
    color: #999;
    font-size: 0.85em;
    white-space: nowrap;
}


.message-list span {
  vertical-align: middle;
  display: inline-block;
}

.message-list span.user_from {
  width:90px;
}

.message-list .is_read .mail_icon_list::before {
  content:"drafts";
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 30 !important;
  color:#999;
  margin:0 10px 0 0;
}


.message-list .is_not_read .mail_icon_list::before {
    content:'mail';
    font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 0, 'opsz' 30 !important;
    color:#333;
    margin:0 10px 0 0;
} 

.message-list .mail_icon_list.reply::before {
  content: 'reply';
  font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 0, 'opsz' 30 !important;
  color: #999;
  margin: 0 10px 0 0;
  transform: rotate(180deg);
  font-size: 14px;
}

.message-list .drop::before {
  content: "delete";
  margin:0 0 0 5px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

.pulse {
    animation: pulse 1.2s ease-in-out 2;
}