/* Issue #99: Griff für SortableJS auf eigener Wunschliste / WZ-Übersicht (Icon wie Status-Auge: fa-fw, gleiche Spalte) */
.wunsch-drag-handle,
.wz-drag-handle {
  user-select: none;
  -webkit-user-select: none;
  cursor: move;
  display: inline-block;
}

/* Icons der Wunschzettel- und Wünsche-Übersicht (Sortier-Griffe, „nicht gelistet",
   Mitbearbeiter) in der Markenfarbe statt Hellgrau. Die Farben standen bis 09/2026
   als #606060 bzw. #888 fest im HTML und liessen sich deshalb nicht über die
   Palette steuern. Das Auge inaktiver Wünsche bleibt bewusst gedämpft. */
.wunsch-drag-handle .fa,
.wz-drag-handle .fa,
.wz-tooltip-icon .fa {
  color: var(--color-text);
}

/* Tooltip (title) beim Hover über Auge „ausgeblendet“ */
.wunsch-inaktiv-eye {
  cursor: help;
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
}

/* Ausgeblendeter (inaktiver) Wunsch: stärker abgeschwächt als nur das Auge-Icon */
/* Die Abschwächung darf NICHT auf .panel-primary liegen: opacity < 1 wirkt als
   Gruppentransparenz auf den gesamten Teilbaum — das darin liegende
   .dropdown-menu des Aktions-Buttons wurde dadurch selbst halbtransparent und
   der Wunsch darunter schien hindurch. Ein opacity:1 auf dem Menü kann das
   nicht aufheben. Daher gezielt auf Inhaltstabelle und Buttons; das Menü ist
   ein Geschwister des Toggle-Buttons und bleibt so voll deckend. */
.wunschpanel.wunsch-inaktiv .panel-primary {
  background-color: #dcdcdc !important;
  border-color: #b0b0b0;
}
.wunschpanel.wunsch-inaktiv .panel-body > table,
.wunschpanel.wunsch-inaktiv .panel-body .btn {
  opacity: 0.55;
}
.wunschpanel.wunsch-inaktiv .panel-body {
  color: #666;
}
.wunschpanel.wunsch-inaktiv .panel-body img {
  opacity: 0.65;
}

/* Issue #190: geöffnetes Aktions-Dropdown über nachfolgende Wunsch-Cards legen
   (sonst liegt „Löschen“ unter der nächsten Card und ist kaum treffbar). */
.wunschpanel:has(.btn-group.open),
.wunschpanel:has(.dropdown.open) {
  position: relative;
  z-index: 30;
}

/* Issue #164: Innere Panel-Tabellen — Text-Spalte darf durch lange Token nicht die Icon-/Sortier-Spalte aus dem Viewport schieben */
.mowz-panel-meta-table {
  table-layout: fixed;
  width: 100%;
}

.mowz-panel-meta-table .mowz-panel-meta-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Issue #46: Flex-Toolbar; schrumpfbare Spacer statt gap — gap ist fix und triggert
   Umbruch früher. Spacer zuerst auf 0, dann erst Zeilenumbruch; Controls flex-shrink:0. */
.wuensche-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
  clear: both;
}

.wuensche-toolbar > .btn-group,
.wuensche-toolbar > .wish-sort-dir-btn {
  flex-shrink: 0;
}

.wuensche-toolbar-gap {
  flex: 0 0 6px;
  min-width: 0;
  pointer-events: none;
}

/* compact-Modus wird per JS gesetzt, sobald Container + 2*Spacer nicht mehr
   reichen wuerden — Spacer auf 0, dadurch passt es nochmal eine Stufe weiter.
   Erst wenn auch ohne Spacer kein Platz mehr ist, wrappt flex-wrap. */
.wuensche-toolbar.wuensche-toolbar-compact .wuensche-toolbar-gap {
  flex-basis: 0;
}

/* Toolbar-Dropdowns mit gleichem Radius wie Buttons (.btn = 10px), passend zur
   restlichen UI. Override des globalen .form-control { border-radius: 0 }
   bewusst nur lokal, damit andere Eingabefelder unveraendert bleiben. */
.wuensche-toolbar .form-control {
  border-radius: 10px;
}

/* Schmale Viewports: Sortier-/Filter-Zeile bevorzugt eine Zeile; nur wenig horizontaler Raum
   (max-width in app.js + Input-Padding), optisch kaum spürbar. */
.wuensche-toolbar .form-control.input-sm {
  padding-left: 4px;
  padding-right: 3px;
}

.wuensche-toolbar .wish-sort-dir-btn.btn-sm {
  padding-left: 8px;
  padding-right: 8px;
}

/*Body soll nicht scrollbar sein */
html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
    
}

/*Scrollbars für Touchdevice*/
::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 5px;
}

::-webkit-scrollbar:horizontal {
    height: 0px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 0px;
    border: 1px solid #ffffff;

}

::-webkit-scrollbar-track {
    border-radius: 2px;  
    background-color: #ffffff; 
}



.hidescrollbar::-webkit-scrollbar { width: 0 !important }


table.table-bordered {
   border: 01px solid black;
}

 /* Damit das erste Modal scrollbar ist wenn das zweite geschlossen wurde */
.modal { overflow: auto !important; }       

.btn{
   border-radius: 10px;
   border-width: 1px;
} 



.btn-block {
    padding: 8px;
    /* define values in pixels / Percentage or em. whatever suits */
    /* your requirements */
}

button,
button:active,
button:focus, 
button:hover,
.btn,
.btn:active, 
.btn:focus, 
.btn:hover{
  outline:none !important;   
}

/* Icons in Buttons vertikal zentrieren (nur bei Icon+Text-Buttons mit pull-right/left):
   Verschiebt das Icon per top leicht nach unten, damit es mittig zum Text steht.
   Aendert NICHT die line-height, damit die Button-Hoehe unveraendert bleibt. */
.btn .glyphicon.pull-right,
.btn .glyphicon.pull-left {
    top: 3px;
}

.btn .fa.pull-right,
.btn .fa.pull-left,
.btn .fa-solid.pull-right,
.btn .fa-solid.pull-left,
.btn .fa-regular.pull-right,
.btn .fa-regular.pull-left,
.btn .fa-brands.pull-right,
.btn .fa-brands.pull-left {
    position: relative;
    top: 2px;
}

/* jquery-confirm: Button-Beschriftung nicht in Großbuchstaben (z. B. „Link kopieren“, „Ok“) */
.jconfirm .btn,
.jconfirm button {
  text-transform: none !important;
}

.form-control{
   border-radius: 0px;
}

/* ======================== */
/* Buttons Outline */


/* primary */
.btn-outline-primary {
  color: var(--color-brand-dark); /* var(--color-brand-darker) */
  background-color: white; /* rgb(243,243,243); #ffffff   rgb(240,240,240)     #e7f0f5 */
  border-color: var(--color-brand-darker);
  /* border-radius: 17px; */
  border-width: 0px;
}

.btn-outline-primary { /* muss zweimal da stehen, keine Ahnung warum ??? */
  color: var(--color-brand-dark); /* var(--color-brand-darker) */
  background-color: white; /* rgb(243,243,243); */
  border-color: var(--color-brand-darker);
  /* border-radius: 17px; */
  border-width: 0px;
}

.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary:hover{
  color: #ffffff;        
  background-color: var(--color-brand-darker);    
  border-color: var(--color-dark);
}


/* secondary */
.btn-outline-secondary {
  color: rgb(176,176,176) !important;
  background-color: white; /* rgb(243,243,243); #ffffff   rgb(240,240,240)     #e7f0f5 */
  border-color: rgb(176,176,176) !important;
  border-radius: 17px;
  border-width: 1px;
}

.btn-outline-secondary { /* muss zweimal da stehen, keine Ahnung warum ??? */
  color: rgb(176,176,176) !important;
  background-color: white; /* rgb(243,243,243); */
  border-color: rgb(176,176,176) !important;
  border-radius: 17px;
  border-width: 1px;
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus,
.btn-outline-secondary:hover{
  color: #ffffff;        
  background-color: var(--color-brand-darker);    
  border-color: var(--color-dark);
}

.btn-outline-secondary:disabled{
  color: rgb(176,176,176);        
  background-color: #ffffff;  
  border-color: var(--color-brand-darker);
}

/* info */
.btn-outline-info {
  color: var(--color-brand-dark);
  background-color: #ffffff;
  border-color: var(--color-brand-dark);
  /* border-radius: 17px; */
  border-width: 2px;
}

.btn-outline-info { /* muss zweimal da stehen, keine Ahnung warum ??? */
  color: var(--color-brand-dark);
  color: var(--color-brand-dark);
  background-color: #ffffff;
  border-color: var(--color-brand-dark);
  /* border-radius: 17px; */
  border-width: 2px;
}


.btn-outline-info:focus,
.btn-outline-info.focus,
.btn-outline-info:hover{
  color: var(--color-brand-dark);        
  background-color: rgb(247,247,247);
  border-color: var(--color-dark);
}

/* success */
.btn-outline-success {
  color: var(--color-accent);
  background-color: #ffffff;
  border-color: var(--color-accent);
  border-radius: 17px;
  border-width: 2px;
}

.btn-outline-success { /* muss zweimal da stehen, keine Ahnung warum ??? */
  color: var(--color-accent);
  color: var(--color-accent);
  background-color: #ffffff;
  border-color: var(--color-accent);
  border-radius: 17px;
  border-width: 2px;
}


.btn-outline-success:focus,
.btn-outline-success.focus,
.btn-outline-success:hover{
  color: var(--color-accent);        
  background-color: rgb(247,247,247);
  border-color: var(--color-dark);
}




/* gekauft: von anderem markiert („wurde bereits gekauft“) – CI Sky Blue, nicht Brand-Dunkelgruen */
.btn-outline-gekauft {
  color: #ffffff;
  background-color: var(--color-primary);
  border-color: var(--color-primary-medium);
  /* border-radius: 17px; */
  border-width: 0px;
}
.btn-outline-gekauft { /* Bootstrap-Spezifitaet wie bei anderen Outline-Overrides */
  color: #ffffff;
  color: #ffffff;
  background-color: var(--color-primary);
  border-color: var(--color-primary-medium);
  /* border-radius: 17px; */
  border-width: 0px;
}

.btn-outline-gekauft:focus,
.btn-outline-gekauft.focus,
.btn-outline-gekauft:hover,
.btn-outline-gekauft:active {
  color: #ffffff !important;
  background-color: var(--color-link-hover) !important;
  border-color: var(--color-primary-medium) !important;
}

/* gekauft Button von mir */
.btn-outline-gekauft-mir {
  color: #ffffff;
  background-color: var(--color-accent);  /* var(--color-danger) */
  border-color: var(--color-danger);
  /* border-radius: 17px; */
  border-width: 0px;
}
.btn-outline-gekauft-mir { /* muss zweimal da stehen, keine Ahnung warum ??? */
  color: #ffffff;
  color: #ffffff;
  background-color: var(--color-accent);  /* var(--color-danger) */
  border-color: var(--color-danger);
  /* border-radius: 17px; */
  border-width: 0px;
}





.divider{
    position: relative;
    width: 100%;
    height: 1px;
    background: #ddd;
    margin: 30px auto;
}
.divider:after{
  content: 'oder';
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  font-size: 12px;
  color: #666;
  background: #fff;
  border:1px solid #f0f0f0;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
  text-align: center;
}

.icon-size{
   font-size:26px; 
}

 /* Add Button rechts unten*/
.overlaybutton {
    position: fixed; /* Stay in place */   
    height: 54px ;
    width: 54px;    
    z-index: 10; /* Sit on top */    
    right: 14px;
    bottom: 14px;
    border-radius: 25px;
    /*background-color: rgb(255,255,255);  */
    text-align: center;    
    /*box-shadow: 3px 3px 10px -2px rgb(160,160,160);  */
    box-shadow: var(--shadow-md);
    /* border:0.3px solid rgb(186,186,186); */

}
.overlaybutton-innen {
    font-size:25px; 
    position: relative; 
    top:15px;
    /*top: 5px;   */
}


 /* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    /*transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    transition-delay: 500ms; /*Ladesymbol nur anzeigen wenn die Ladezeit länger als 0,5 sek ist*/
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

 /* loadbutton2*/
.loadsymbol2overlay {
  margin-left: auto;
  margin-right: auto;
    height: 31px;
    width: 31px;
    border-radius: 20px;
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 50%;
    margin-left: -15px;
    top: 65px;
    background-color: rgb(255,255,255); /* Black fallback color */
    border: 1px solid rgb(224,224,224); 
    /* overflow-x: hidden; Disable horizontal scroll */
}

/* Position the content inside the overlay */
.loadsymbol2overlay-content {
    position: relative;
    left: 6px;
    top: 5px;
    color:var(--color-brand-dark);
}

/* Panel Collapse Icon hoch und runter */
.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
    
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

/*keine Abrundung der Boxen (Radius/Schatten-CI: brand.css, hier nur Rand) */
.panel {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    padding:0px;
}


/* Damit die Navbar immer Collapsed ist */
body {
	padding-top:70px;
}

/* Unterer Rand fuer alle Content-Container:
   Verhindert, dass Inhalte/Popups am unteren Bildschirmrand abgeschnitten werden.
   Ersetzt die bisherigen <br><br>-Hacks in den Subpages. */
.container {
    padding-bottom: 80px;
}

.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
}
.navbar-nav>li {
  float: none;
}
.navbar-collapse.collapse.in{
  display:block !important;    
}   
ul.navbar-nav li {
  margin: 8px;
  padding: 0px;
}                         


/* Damit die Nav scrollbar ist */
#bs-example-navbar-collapse-1
{
 overflow-y: scroll !important;
/* max-height: 400px !important; */
}


/* Für das x beim search feld*/
::-ms-clear {
  display: none;
}

.form-control-clear {
  z-index: 10;
  pointer-events: auto;
  cursor: pointer; 

}

/*Popup Image Container */
.bigimagecontaineroverlay {
    height: 100%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity */
    overflow: hidden; /* Disable  scroll */
    padding: 15px;
}

.bigimagecontaineroverlay img{
  position: relative;
  top: 50%;
  transform: translate(0%, -50%);
  max-width: 100%;
  max-height: calc(100vh - 30px);
  height: auto;
  object-fit: contain;
}

/* Page Scroll */
.pagescroll {
  position: relative;
  overflow-y:auto; 
  height:calc(100vh - 55px);
  top:-15px;
  border: 0px solid blue; 
  margin-bottom: -10px;
  /*scrollbar-width: none;   Gilt nur für Firefox */
  -webkit-overflow-scrolling: touch;  
    
}

/* Page Headline */
.pageheadline {
  position: relative;
  background-color: white; 
  margin: 0 auto;
  max-width:850px;
  top:0px;
  text-align: center;
  padding: 5px; 
  border: 1px solid var(--color-border); 
  margin-bottom:8px;
}

/* Page Submenu */
.pagesubmenu{
    position: relative; 
    top:0px; 
    margin: 0 auto;
    max-width:850px;
    height:52px;   /* 52 */ 
/*    z-index: ;  /* 10000 */   
    padding: 8px; 
    overflow-x: auto; 
    overflow-y: hidden; 
    white-space:nowrap; 
    margin-bottom:10px; 
    border: 0px solid silver; 
    text-align: center; /* Buttons horizontal zentrieren */
    /*scrollbar-width: none;   Gilt nur für Firefox */
    /*-webkit-overflow-scrolling: touch;   */
}

/* Buttons Shop*/
.shopbuttons {
  width:100%; 
  max-width:350px;
  height:100px;  
  background-color: white; 
  padding:5px; 
  margin-bottom:5px;
  border: 1px solid var(--color-border); 
  /*overflow: /*hidden;  Disable  scroll */
}
/* Buttons Shop*/
.shopbuttons img {
  position: relative;
  max-width: 180px; 
  max-height: 54px;

}

/* Shopbrowser-Modal: Favoriten-Zeile — Ellipsis-Button kompakt, vertikal zum Shop-Logo ausgerichtet */
#modal-shopbrowser .mowz-shopbrowser-fav-card {
  min-height: 65px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 42px 8px 8px;
  box-sizing: border-box;
}

#modal-shopbrowser .mowz-shopbrowser-fav-card > .mowz-shopbrowser-fav-kebab {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  margin: 0;
  float: none;
  width: auto;
  height: auto;
  background-color: transparent;
}

#modal-shopbrowser .mowz-shopbrowser-fav-kebab__btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: 1px solid var(--color-border, #d4e3f0);
  border-radius: 8px;
  background-color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
}

#modal-shopbrowser .mowz-shopbrowser-fav-kebab__btn:focus {
  outline: thin dotted;
  outline-offset: 1px;
}

#modal-shopbrowser .mowz-shopbrowser-fav-kebab__icon {
  font-size: 14px;
  color: #606060;
  line-height: 1;
  position: static;
}

#modal-shopbrowser .mowz-shopbrowser-fav-card > .mowz-shopbrowser-fav-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
}

/* ***************************************** */
/* Side Navigagion */
/* ***************************************** */

 /* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 260px; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    white-space: nowrap;
    z-index: 20000; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #ffffff; /* Black #111   */
    /* overflow-y explizit hidden: sonst wird overflow-x:hidden + Y-visible
       per Spec zu overflow-y:auto — iOS scrollt die Sidebar dann 2-achsig. */
    overflow-x: hidden;
    overflow-y: hidden;
    
    scrollbar-width: none;
    
    /*padding-top: 20px; /* Place content 60px from the top */
    /*padding-left: 10px; /* Place content 60px from the top */
    display: none;
    /*transition: 0.3s;  0.5 second transition effect to slide in the sidenav */
}

.sidenav::-webkit-scrollbar {
    display: none;
}

.navbarcolorfade{
    background-image: linear-gradient(to bottom right, var(--color-brand-darker), var(--color-brand-dark));  /* var(--color-brand-dark)*/
}

/* The navigation menu links 
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}       */

/* When you mouse over the navigation links, change their color  */
.sidenav a:hover {
    color: #f1f1f1;
}    
.sidenav a:link {
    color: rgb(64,64,64);
}  
.sidenav a:visited {
    color: rgb(64,64,64);
}  
.sidenav a:active  {
    color: rgb(64,64,64);
}      

small {
    color: var(--color-text-muted);
    font-size: 11px;
}

/* ***************************************** */
/* Kommentare, Nachrichten, Chat */
/* ***************************************** */
.divmessage1 {
    background-color: rgb(240,240,240);    
    border-radius: 12px;
    padding:5px;
    width: auto;
}
.divmessage2 {
    background-color:  rgb(240,240,240); 
    border-radius: 12px;
    padding:5px;
    width: auto;
    /* einen Tick kleiner als Fließtext (Body ~14px) — kompakter Kommentarbalken */
    font-size: 13px;
    line-height: 1.35;
}

.messagedate {
    color:rgb(128,128,128);
    font-size: 11px;
}

/* Rahmen „neu angelegt“: siehe brand.css (.borderaktiv — box-shadow + radius wie WZ-Karte, Issue #141) */

/* Text Selection verhindern  ->>> in disableselect.css           Nur ausgeben wenn App-Version
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none; 
}

[contenteditable="true"] , input, textarea {
    -webkit-user-select: auto !important;
    -khtml-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    -o-user-select: auto !important;
    user-select: auto !important;  
}      */         

.row{
    margin: 0px;
}

.container{
    max-width:850px;
}


hr{
    height:1px;
    margin-top:-5px; 
    margin-bottom:-5px; 
    margin:5px auto;
}


.btn-round{
border-radius: 15px;
}

/* Ladeanimation für Submenü Buttons */
.loadanimation {

    animation:myfirst 2s;
  -moz-animation:myfirst 2s infinite; /* Firefox */
-webkit-animation:myfirst 2s infinite; /* Safari and Chrome */
  }


  @-moz-keyframes myfirst /* Firefox */
{
0%   {background:#95a5a6; border-color: #95a5a6;}
50%  {background:var(--color-brand-darker); border-color: var(--color-brand-darker);}
100%   {background:#95a5a6; border-color: #95a5a6;}
}
 
    @-webkit-keyframes myfirst /* Firefox */
{
0%   {background:#95a5a6; border-color: #95a5a6;}
50%  {background:var(--color-brand-darker); border-color: var(--color-brand-darker);}
100%   {background:#95a5a6; border-color: #95a5a6;}
}




/* Checkboxen */
.form-check-input{
  position: relative;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #95a5a6;
}

.form-check-label{
  position: relative;
  top: -6px;
  left: 0;
}

/* Dropdown Navbar Menu rechts */
.navbar-dropdown{
  position: absolute;
  top: 55px;
  right:5px;
  /*width: 100px;*/
  /*height: 50px;*/
  border:1px solid rgb(204, 201, 201);
  border-radius: 5px;
  background: white;
  z-index: 200001; /* Sit on top */   
  padding:10px;
}

.divhinderclick{
  position: fixed; /* Stay in place */  
  height: 100%;
  width: 100%;
  z-index: 200000; /* Sit on top */  
}

.affiliatelink{

}

/* Amazon Produkt Suche */

.card-img-top {
    flex-grow: 1;
    object-fit:contain;
}
.card-body{
    flex-grow:0;
}

.price{
    font-weight: bold;
}



.heartbutton{
    /* color:#fa2c4d; */
    font-size:22px;
}

.textmaxlines{
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}

 /* amazonproductpage */
.amazonproductpage {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 0;
    top: 0;
    background-color: white; /* Black fallback color */

    overflow-x: hidden; /* Disable horizontal scroll */
    overflow-y:auto; 
    -webkit-overflow-scrolling: touch;  
}

/* Buttons "zum Shop" und "+ übernehmen": sichtbarer Rand */
#page-amazonproductpage .btn-outline-primary {
    border: 1px solid var(--color-brand-darker) !important;
}
#page-amazonproductpage .btn-outline-primary:hover,
#page-amazonproductpage .btn-outline-primary:focus {
    border-color: var(--color-dark) !important;
}

 /* Add Button rechts unten*/
.scrollupbutton {
    position: fixed; /* Stay in place */   
    height: 54px ;
    width: 54px;    
    z-index: 10001; /* Sit on top */    
    right: 14px;
    bottom: 14px;
    border-radius: 25px;
    background-color: rgb(255,255,255);  
    text-align: center;    
    border:0.3px solid rgb(186,186,186);

}
.scrollupbutton-innen {
    font-size:25px; 
    position: relative; 
    top:15px;
    color:rgb(168, 168, 168);
    /*top: 5px;   */
}

  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }

/* Wunschzettelübersicht: Gesamtwertzeile als Platzhalter reservieren, damit Buttons bei 2/3 Spalten parallel sind */
.panel-primary.wz-reserve-gesamtwert .wz-gesamtwert-row {
  min-height: 1.5em;
}

/* Wunschzettelübersicht: Float-Grid (Bootstrap 3) bricht bei unterschiedlichen Kartenhöhen fehlerhaft um (#100).
   Flex + wrap: korrektes Zeilen-Wrapping und gleiche Höhe pro Zeile (wie .row.equal). */
#listewz {
  display: flex;
  flex-wrap: wrap;
}

/* Wunschzettelübersicht: Oberer und unterer Rand der Box gleich */
#listewz .panel.panel-primary {
  margin-top: 10.5px;
  margin-bottom: 10.5px;
  display: flex;
  flex-direction: column;
}

/* Kein min-height – Box immer nur so hoch wie der Inhalt, kein unnötiger Abstand vor den Buttons */
#listewz .panel.panel-primary .panel-body {
  display: flex;
  flex-direction: column;
  padding: 15px;
}

/* WZ-Kopfzeile: Icon-Spalte (Drag/Auge) wie früher am rechten Rand der Inhaltsfläche, ohne extra Zellenabstand */
#listewz .panel.panel-primary .panel-body > table:first-child tr > td:last-child {
  padding-right: 0;
}

/* Wunschzettel-Auswahl-Modal: unterhalb der Top-Navbar (50px) positionieren */
#modal-selectwz .modal-dialog {
  margin-top: 60px;
}

/* Wunschzettel wählen: Header wie App-Navbar (Brand Dark), Mint-Streifen als Brand-Bridge */
#modal-selectwz .mowz-selectwz-modal-header {
  padding: 14px 15px 13px;
  background-color: var(--color-brand-dark);
  border-bottom: 3px solid var(--color-trust);
  border-radius: 5px 5px 0 0;
}

#modal-selectwz .mowz-selectwz-modal-header .close {
  color: #fff;
  opacity: 0.88;
  text-shadow: none;
  font-weight: 300;
}

#modal-selectwz .mowz-selectwz-modal-header .close:hover,
#modal-selectwz .mowz-selectwz-modal-header .close:focus {
  color: #fff;
  opacity: 1;
}

#modal-selectwz .mowz-selectwz-heading {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff !important;
}

#modal-selectwz #listcontent .list-group {
  margin-bottom: 0;
}

#modal-selectwz .mowz-selectwz-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Bootstrap a.list-group-item erzwingt Link-Blau — gleiche Spezifität + !important wie übrige App-Listen */
  color: var(--color-text) !important;
  border-color: var(--color-primary-medium);
}

#modal-selectwz a.mowz-selectwz-item,
#modal-selectwz a.mowz-selectwz-item:visited,
#modal-selectwz a.mowz-selectwz-item:active {
  color: var(--color-text) !important;
}

#modal-selectwz .mowz-selectwz-item:hover,
#modal-selectwz .mowz-selectwz-item:focus {
  color: var(--color-text) !important;
  background-color: var(--color-primary-light);
}

#modal-selectwz .mowz-selectwz-name {
  flex: 1;
  min-width: 0;
  padding-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}

/* Sky-Blue Badge (gleiche Primärfarbe wie CI Primary) */
#modal-selectwz .mowz-selectwz-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.28em 0.62em;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 10px;
  background-color: var(--color-primary);
  color: #fff;
}

#modal-selectwz .modal-footer .btn-default {
  color: var(--color-text);
}

#modal-selectwz .mowz-selectwz-empty {
  padding: 8px 2px;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Hervorhebung wenn Modal über "Shop-Link hinzufügen" geöffnet */
#modal-wunsch .link-field-highlight,
#modal-wunsch .link-field-highlight:focus {
  background-color: var(--color-primary-light);
  border-color: var(--color-accent);
}
#modal-wunsch .shopbrowser-highlight {
  background-color: var(--color-primary-light) !important;
  border: 2px solid var(--color-accent) !important;
  color: var(--color-accent) !important;
}

/* Button "Shop-Link hinzufügen": Breite nach Inhalt, rechts in der Zelle ausgerichtet */
.btn-shoplink-hinzufuegen {
  background-color: #ffffff;
  color: var(--color-accent);
  border-color: var(--color-accent);
  width: auto;
  display: inline-block;
  box-sizing: border-box;
}
/* Hover: wie .btn-info / Akzent-CTA — volle Peach-Fläche, heller Text (siehe brand.css) */
.btn-shoplink-hinzufuegen:hover,
.btn-shoplink-hinzufuegen:focus,
.btn-shoplink-hinzufuegen.focus {
  background-color: var(--color-accent) !important;
  color: #fff !important;
  border-color: var(--color-accent) !important;
}
.btn-shoplink-hinzufuegen:hover .fa,
.btn-shoplink-hinzufuegen:focus .fa,
.btn-shoplink-hinzufuegen.focus .fa {
  color: #fff !important;
}
.btn-shoplink-hinzufuegen:active,
.btn-shoplink-hinzufuegen:active:hover,
.btn-shoplink-hinzufuegen:active:focus {
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  color: #fff !important;
}
.btn-shoplink-hinzufuegen:active .fa {
  color: #fff !important;
}
.btn-cell-shoplink-right {
  text-align: right;
}

/* Modal „QR-Code zum Teilen“: Library setzt img/canvas block — .text-center zentriert das nicht */
#qrcodeteilen img,
#qrcodeteilen canvas {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* Menü-Button („drei Punkte") in der Gruppen-Übersicht: flach, ohne Kasten.
   Er trug nur .btn und die Phantomklasse .btn-Light — die es in Bootstrap 3
   nicht gibt (dort .btn-default; .btn-light stammt aus Bootstrap 4/5). Ohne
   Variante setzte keine Regel einen Hintergrund, sodass der Browser-Standard
   ButtonFace (#f0f0f0) durchschlug und zusammen mit dem globalen .btn-Schatten
   wie ein Rahmen wirkte. */
.mowz-kebab-flat {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 8px;
}

.mowz-kebab-flat:hover,
.mowz-kebab-flat:focus,
.mowz-kebab-flat:active,
.open > .mowz-kebab-flat.dropdown-toggle {
  background: transparent !important;
  box-shadow: none !important;
}
/* Issue #40: Kennzeichnung „(Anzeige: Partnerlink*)" und die zugehörige Fußnote
   optisch wie das Datum des Wunsches — gedämpft statt Link-Blau.

   Zwei Regeln stehen dagegen und erklären die Bauweise hier:
   brand.css setzt `a { color: var(--color-primary) !important }` global, das
   laesst sich nur mit !important bei hoeherer Spezifitaet schlagen.
   bootstrap-overrides.css unterstreicht `table a:not(.btn)` — dagegen genuegt
   eine spezifischere Auswahl ohne !important. */
.mowz-affiliate-hint,
.mowz-affiliate-hint:visited,
.mowz-affiliate-hint:hover,
.mowz-affiliate-hint:focus {
  color: var(--color-text-muted) !important;
}

table a.mowz-affiliate-hint,
table a.mowz-affiliate-hint:visited {
  text-decoration: none;
}

/* Beim Darueberfahren unterstrichen, damit die Antippbarkeit erkennbar bleibt. */
table a.mowz-affiliate-hint:hover,
table a.mowz-affiliate-hint:focus {
  text-decoration: underline;
}

/* Polsterung und Radius liegen dauerhaft hier, nicht erst in .is-hervorgehoben:
   sonst waechst der Block beim Hervorheben um 12px, der Text bricht neu um und
   springt nach 1,8s wieder zurueck — das wirkt, als wuerde sich die Schrift
   aendern. So bleibt die Geometrie konstant, es wechselt nur die Farbe. */
.mowz-affiliate-foot {
  color: var(--color-text-muted);
  /* Deutlich mehr Luft nach oben als zwischen den Karten (dort 21px): sonst
     liest sich die Aufloesung wie ein Anhaengsel der letzten Karte statt wie
     der Abschluss der Liste. */
  margin: 44px 0 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: transparent;
}

/* Kurzes Hervorheben der Fußnote, wenn das Sternchen angetippt wurde —
   sonst ist nach dem Sprung nicht erkennbar, worauf verwiesen wurde.
   Nicht --color-primary-light: das ist exakt die Hintergrundfarbe der App
   (.mowz-app-body in brand.css), die Hervorhebung waere unsichtbar. */
.mowz-affiliate-foot.is-hervorgehoben {
  background: var(--color-primary-medium, #c5ddef);
  transition: background 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .mowz-affiliate-foot.is-hervorgehoben { transition: none; }
}

/* Sammelhinweis oberhalb der Inspirationsliste (Issue #40).
   Traegt die Kennzeichnung fuer saemtliche Eintraege der Seite, weil dort
   ausnahmslos Partnerlinks stehen. Bewusst ruhig gestaltet — als Zeile im
   Seitenkopf, nicht als Einblendung. Er muss sichtbar sein, nicht laut.
   Nicht ausblendbar machen: § 5a Abs. 4 UWG verlangt, dass der kommerzielle
   Zweck erkennbar *ist*, solange die Inhalte angezeigt werden — anders als
   eine Einwilligung, die einmalig erteilt wird. Ein weggeklickter Hinweis
   liesse wiederkehrende Nutzer auf einer rein kommerziellen Seite ohne
   Kennzeichnung zurueck und verstiesse zugleich gegen Amazon Ziffer 5. */
.mowz-affiliate-sammelhinweis {
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 12px;
  line-height: 1.45;
}

/* "Anzeige:" bleibt in voller Textfarbe und fett. Das ist der Teil, der die
   Kennzeichnung nach § 5a Abs. 4 UWG traegt — er darf zuruecktreten, aber
   nicht mit dem Fliesstext verschwimmen. */
.mowz-affiliate-sammelhinweis b {
  color: var(--color-text);
}

/* <small> landet auf dieser Seite bei 11px — das ist die kleinste Schrift der
   Oberflaeche. Fuer eine Pflichtkennzeichnung ("klar und deutlich") ist das die
   falsche Stufe, deshalb ein Schritt darueber. Optisch kaum ein Unterschied,
   in der Bewertung schon. */
.mowz-affiliate-sammelhinweis small {
  font-size: 12px;
}