body,html {font-family:"TT Norms W01 Regular";margin:0!important;padding:0!important; font-size:18px;line-height:140%;}
h1,h2,h5 {font-family:"TT Norms W01 Bold";line-height:100%;}
p {font-family:"TT Norms W01 Regular";}

h1 {font-size:20px;}
p.subtitle {font-size:12px;}


/*Menü*/
.navbar {position:absolute;right:0; top:0;z-index:11;}
.navbar-collapse-content {font-family:"TT Norms W01 Bold";
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;max-width:500px; /* Breite des Menüs */
    height: 100%;
    background-color: white; /* Hintergrundfarbe des Menüs */
    z-index: 1000; /* Stellen Sie sicher, dass das Menü über anderen Elementen liegt */
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
.navbar-toggler {padding:0 5px;}
.collapse.show .navbar-collapse-content { transform: translateX(0); }
.menueicon {color:#fff;font-size:34px;}
.navbar-collapse-content {background-color:transparent;}
#navbarContent .close { line-height:100%; margin:10px ; background-color: #3c1e6e;color: #fff;opacity:1;line-height: 100%;
                        padding:30px 28px 20px 28px ;text-shadow:none;}
#navbarContent .close span {font-size:60px;}
#navlinks {}
#navlinks ul,#navlinks ul li {list-style:none;margin:0; padding:0;}

#navbarContent #navlinks ul li a {color:#fff;display:block;}
#navbarContent #navlinks ul li {padding:10px 15px ; margin:10px -10px  0px 0px ;background-color:#3c1e6e;color:#fff;}
#navbarContent #navlinks ul li:hover {background-color:#fff!important;color:#3c1e6e!important;}
#navbarContent #navlinks ul li:hover a {color:#3c1e6e;}


#logo {padding:10px;font-family:"TT Norms W01 Bold";background-color:#3c1e6e;color:#fff;}
#logo #l1 h1 {font-size:28px;text-transform:uppercase;margin:0;padding:0;}
#logo #l1 h2 {  font-size:12px;}
#footer  { position:absolute;  right:10px; bottom:10px;z-index:10;    }
#footer .inner { padding:9px 15px 1px 15px;  background-color:#3c1e6e;color:#fff;font-size:20px;}
#footer h3 { font-size:12px;font-family:"TT Norms W01 Bold";}

/*Modal*/
.modal-title {line-height: 100%;}
.modal-header {background-color: #3c1e6e;color:#fff;border-radius:0;}
.modal-header .close {background-color: #3c1e6e;color: #f00;opacity:1;line-height: 100%;padding:10px 8px;}
.modal-header .close span {color: #fff;font-size: 50px;}
.modal-content {border-radius:0;}




/*Beiträge*/
#beitrag h2 {line-height:100%!important;}


.custom-icon {
    position: relative;
    width: 40px; /* Breite des Icons */
    height: 60px; /* Höhe des Icons */
    text-align: center;
}

.custom-icon img {
    width: 100%; /* Bild nimmt die gesamte Breite des Icons ein */
    height: 100%; /* Bild nimmt die gesamte Höhe des Icons ein */
    object-fit: contain; /* Sorgt dafür, dass das Bild proportional skaliert */
}

.icon-id {
    position: absolute;
    top: 10px; /* Anpassen, um die Position der ID zu ändern */
    left: 0;
    right: 0;
    color: black; /* Textfarbe der ID */
    font-size: 12px; /* Größe des ID-Textes */
    font-weight: bold;
}


/*Sprechblase*/
/* Bubble with an isoceles triangle
------------------------------------------ */
/*  position: absolute;
  right:100px; top:100px;z-index:999999;
*/

.triangle-right {
  position: absolute;
  right:100px; top:100px;z-index:999999;
  padding:15px;
  margin:1em 0 3em;
  color:#fff;
  background:#075698; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
  background:-moz-linear-gradient(#2e88c4, #075698);
  background:-o-linear-gradient(#2e88c4, #075698);
  background:linear-gradient(#2e88c4, #075698);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

/* Variant : for top positioned triangle
------------------------------------------ */

.triangle-right.top {
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#075698), to(#2e88c4));
  background:-moz-linear-gradient(#075698, #2e88c4);
  background:-o-linear-gradient(#075698, #2e88c4);
  background:linear-gradient(#075698, #2e88c4);
}

.triangle-right:after {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:50px; /* controls horizontal position */
  border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:#075698 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* Variant : top
------------------------------------------ */

.triangle-right.top:after {
  top:-20px; /* value = - border-top-width - border-bottom-width */
  right:50px; /* controls horizontal position */
  bottom:auto;
  left:auto;
  border-width:20px 20px 0 0; /* vary these values to change the angle of the vertex */
  border-color:transparent #075698;
}

/* ============================================================================================================================
== BLOCKQUOTE WITH RIGHT-ANGLED TRIANGLE
** ============================================================================================================================ */

.example-right {
   font-family:"TT Norms W01 Bold";line-height:110%;
  position:relative;
   position: absolute;
  right:90px; top:180px;
   z-index: 101; 
  padding:15px 20px;
  margin:0;
  color:#3c1e6e;
  background:#fff; /* default background for browsers without gradient support */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  border:5px solid #3c1e6e;
  width:200px;
  box-shadow: -9px 8px 26px 0px rgba(0,0,0,0.59);
-webkit-box-shadow: -9px 8px 26px 0px rgba(0,0,0,0.59);
-moz-box-shadow: -9px 8px 26px 0px rgba(0,0,0,0.59);
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
.example-right + p {margin:15px 0 2em 85px; font-style:italic;}

/* creates the triangle */
.example-right:after {
  content: "";
  position: absolute;
  top: -92px; /* Adjusted to top instead of bottom */
  right: 0px;
  border-width: 90px 20px 0 0; /* Adjusted border-width */
  border-style: solid;
  border-color: #3c1e6e transparent; /* Adjusted border-color */
  transform: rotate(190deg); /* Rotate the triangle by 180 degrees */
  display: block;
  width: 0;
  z-index:1;
}
 

.btn-success { }
.btn-dark {background-color:#ccc;color:rgba(0,0,0,0.6); border-color:rgba(0,0,0,0.1)}

.example-bottom {
    font-family:"TT Norms W01 Bold";line-height:110%;
   position:relative;
   position: absolute;
  left:20px; top:400px;
   z-index: 101; 
  padding:15px 20px 0px 20px;
  margin:0;
  color:#3c1e6e;
  background:#fff; /* default background for browsers without gradient support */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  border:5px solid #3c1e6e;
  width:calc(100% - 80px); max-width:500px;
  box-shadow: -9px 8px 26px 0px rgba(0,0,0,0.59);
-webkit-box-shadow: -9px 8px 26px 0px rgba(0,0,0,0.59);
-moz-box-shadow: -9px 8px 26px 0px rgba(0,0,0,0.59);
}
.example-bottom p {   font-family:"TT Norms W01 Bold";line-height:110%;}
.example-bottom p a {  color:#3c1e6e;}

/* display of quote author (alternatively use a class on the element following the blockquote) */
.example-bottom + p {margin:15px 0 2em 85px; font-style:italic;}

/* creates the triangle */
.example-bottom:after {
  content: "";
  position: absolute;
  bottom: -72px; /* Adjusted to top instead of bottom */
  right: -42px;
  border-width: 90px 20px 0 0; /* Adjusted border-width */
  border-style: solid;
  border-color: #3c1e6e transparent; /* Adjusted border-color */
  transform: rotate(310deg); /* Rotate the triangle by 180 degrees */
  display: block;
  width: 0;
  z-index:1;
}