/*@font-face {
	font-family: 'Segoe';
  src: url('../fonts/Segoe Fluent Icons.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}*/

@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url("../fonts/fa-regular-400.woff2") format("woff2");
}
@font-face {
  font-family: "FontAwesomeS";
  font-display: block;
  src: url("../fonts/fa-solid-900.woff2") format("woff2");
}
@font-face {
  font-family: "FontAwesomeB";
  font-display: block;
  src: url("../fonts/brands.woff2") format("woff2");
}

/* Buttons */
.icon.button,
a.button, label.button, button.button, a.link.icon
  {
  display: inline-block; width: auto; height: auto; min-width: 20px; min-height: 20px;
  margin: 4px 0 0 6px; padding-left: 2px;
  text-align: center;  background: transparent; background-repeat: no-repeat;
  color: var(--nb-color);
}
a.link.icon{margin:0}
a.link.icon.no-hover{color: var(--nb-color) !important}

.icon.button > span,
a.button > p, label.button > span, button.button > p{
  color: var(--nb-color);
  display:none; /* ohne Text */
}
a.icon.icon-only{
  white-space: nowrap;
  overflow: hidden;
  width:0;
  padding-left:0;
  margin-right:1rem;
}
a.icon.icon-only:before{ width: 1.28571429rem;}

/* Elusive */
.icon.button:before,
a.button:before, label.button:before, button.button:before, a.icon:before {
  font: var(--nb-icon-font);
  /*transform: translate(0, -1px);*/
  vertical-align: middle;
  display:inline-block;
  text-align: center;
  margin-right: 6px;
  text-indent: 0;
  color: var(--nb-gray-color);
  position: relative;
}

/* Highlight */
a.button:hover:before, label.button:hover:before, button.button:hover:before, a.icon:hover:before,
a.button:active:before, label.button:active:before, button.button:active:before, a.icon:active:before,
a.button:focus:before, label.button:focus:before, button.button:focus:before, a.icon:focus:before {color: var(--nb-color); }


/* verwendete Buttons */
.ok.button:before{font-family: 'FontAwesomeS';content: "\f00c";}
.close.button:before{font-family: 'FontAwesomeS'; content: "\f00d"; font-weight: 900;}
.burger.button:before{font-family: 'FontAwesomeS'; content: "\f0c9";font-size: 2rem; line-height: 1.8rem}

a.icon.icon-edit:before{content: "\f044";}
a.icon.icon-facebook:before{content: "\f082"; font-family: 'FontAwesomeB'; top:-1px}
a.icon.icon-twitter:before{content: "\e61b"; font-family: 'FontAwesomeB';}/*"\"*/
/*.icon-mail:before{content: "\f14b";}*/
a.icon.icon-mail{min-width: 21px;}
a.icon.icon-mail:before{content: "\f2b6"; }
a.icon.icon-print:before{font-family: 'FontAwesomeS'; content: "\f02f";} a.icon.icon-only.icon-print{margin-left: 1rem; margin-right: 0}
a.icon.icon-newsletter:before{content: "\f1ea";}
a.icon.icon-html5:before{content: "\f13b"; font-family: 'FontAwesomeB'; color: coral;}
a.icon.icon-css3:before{content: "\f38b"; font-family: 'FontAwesomeB'; color: dodgerblue;}
a.icon.icon-rss:before{content: "\f09e"; font-family: 'FontAwesomeS'; color: darkorange;}
a.icon.icon-top:before{content: "\2bc5";}

/*Links*/

a.paragraf:before, a.mail:before, a.fabrik:before, a.service:before, a.content:before, a.ext:before, a.newsletter:before, a.form:before, a.archiv:before{color: var(--nb-gray-color); font-size: 1rem; position: relative;  top: 2px;}
a.paragraf:hover:before, a.mail:hover:before, a.fabrik:hover:before, a.service:hover:before, a.content:hover:before, a.ext:hover:before, a.newsletter:hover:before, a.form:hover:before, a.archiv:hover:before{color: var(--nb-color);}
a.paragraf:before{font-family: 'FontAwesomeS';content: "\e447\00a0"; top: 0;}
a.mail:before{font-family: 'FontAwesomeS';content: "\f0e0\00a0"; top: 0;}
a.fabrik:before{font-family: 'FontAwesomeS'; content: "\f275\00a0"; top: 0;}
a.newsletter:before{font-family: 'FontAwesomeS'; content: "\f1ea\00a0";}
a.service:before{font-family: 'FontAwesome'; content: "\f27a\00a0";}
a.content:before{font-family: 'FontAwesome'; content: "\f15c\00a0";}
a.form:before{font-family: 'FontAwesomeB'; content: "\f298\00a0"; font-weight: bold;}
a.ext:before{font-family: 'Elusive'; content: "\f177\00a0";}
a.archiv:before{font-family: 'FontAwesomeS'; content: "\f187\00a0";}

li.admin a{font-weight: var(--nb-font-weight) !important; color:gray}
li.active_menu.admin a, li.open_menu.admin a {color:silver !important}
li.admin a:before{font-family: 'FontAwesomeS'; content: "\f521\00a0";}

/* verwendete Buttons mit Animationen*/
.search.button:before{content: "\f002"; font-family: 'FontAwesomeS';}
.search.button:hover:before, .search.button:focus:before{animation: wink .8s ease-out;}

.settings.button:before{content: "\f013"; transform: translate(0, -2px); font-family: 'FontAwesomeS';}
.settings.button:hover:before, .settings.button:focus:before{animation: spin 1s ease-out;}/*spin 2s infinite linear*/

.icon.button.user:before{content: "\f007"; transform: translate(0, -2px); font-family: 'FontAwesomeS';}
.icon.button.user:hover:before, .icon.button.user:focus:before{animation: spinY 2s ease-out;}

.kontakt.button:before{content: "\f0e0"; font-family: 'FontAwesomeS';}
.kontakt.button:hover:before, .kontakt.button:focus:before{animation: wobble .8s;}

.news.button:before{content: "\f1ea";}
.news.button:hover:before, news.button:focus:before, .kontakt.button:focus:before{font-family: 'FontAwesome';}


/* ------------------------------------------------------------------------ Animationen */
@keyframes spin {
  from{transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
@keyframes spinY{
  0%, 100% {transform: rotateY(0deg);}
  20% {transform: rotateY(360deg);}
}

@keyframes wink {
  0%,100% {transform: rotate(0deg);}
  25% {transform: rotate(45deg);}
  50% {transform: rotate(0deg);}
  75% {transform: rotate(-45deg);}
}

@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.5);}
  100% {transform: scale(.75);}
  100% {transform: scale(1);}
}

@keyframes wobble {
  0%,100% {transform: translateX(0%);}
  15% {transform: translateX(-25%) rotate(-5deg);}
  30% {transform: translateX(20%) rotate(3deg);}
  45% {transform: translateX(-15%) rotate(-3deg);}
  60% {transform: translateX(10%) rotate(2deg);}
  75% {transform: translateX(-5%) rotate(-1deg);}
}