html {
    scroll-behavior: smooth; 
    }
body   { 
     /* color: rgba(6,6,6,.7);    */
     color: #000  ;
    }
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}   
main {
  flex: 1 0 auto;
}
/* 
 body, wrapper, main {min-height:100vh;}
    .flex-fill{flex:1 1 auto} */


/* NAVIGATION */ 
 /* wegen logos links jetzt mehr Abstand der Navi-Einträge */
 /* aber nur ab bestimmter Breite ... ist so semi */ 
@media (min-width: 1100px)  
    {  
   .navbar-header {margin-right:50px; }
    }   
 a.nav-link   {
      color: #000 !important; 
  }

  .nav-link { font-size:14pt !important;}
  /*  Startseite Aufzählung weiterführende Links*/  
.ohne_punkt   {list-style-type:none;   }  
.startseite li {display:inline-block; margin-right: 25px ;margin-left:0px; }



footer {
  flex-shrink: 0;
}

/* Footer - Navigation */
footer .navbar-expand-sm .navbar-nav .nav-link {font-size:1em !important} 
/* footer {margin-bottom:30px; }  */
/* .nav-footer{ height:60px !important;  }  */
/* Farbschemen - jedes Ziel hat eine Farbgruppe ; vgl. Tabelle 01-ziele */
 


/* weiss  */
.hg.weiss {background-color:#fff;color:#000;}
.schrift.weiss {color:#fff;}
 
/* gelb  */
.hg.gelb {background-color:#ffcc00; color:#000;}
.schrift.gelb {color:#ffcc00;}
.projektbild.gelb {border-bottom:15px #fc0 solid}
.srch.gelb {background-color:#ffcc00; color:#fc0;}
/* hellgrau */
.hg.hellgrau {background-color:#ccc;color:#000;}
.schrift.hellgrau {color:#ccc;}
.projektbild.hellgrau {border-bottom:15px #ccc solid}
.srch.hellgrau {background-color:#ccc;color:#ccc;}

/* umbragrau */
.hg.umbragrau {background-color:#333; color:#fff;}
.schrift.umbragrau {color:#333;}
.projektbild.umbragrau {border-bottom:15px #333 solid} 


/* rot  */
.hg.rot {background-color:#f00; color:#fff;}
.schrift.rot {color:#f00;}
.projektbild.rot {border-bottom:15px #f00 solid}
.srch.rot {background-color:#f00; color:#f00;}


/* blau */

/* Neu: #2c4395; R 44 G 67 B 149   // Vorher #306 */
.hg.blau {background-color:#2c4395;color:#fff;}
.schrift.blau {color:#2c4395;}
.projektbild.blau {border-bottom:15px #2c4395 solid}
.srch.blau {background-color:#2c4395;color:#2c4395;}



/* Projektübersicht - > Stufenweise Darstellung 
   Stufe1 - Ziele
   Stufe2 - Projektbereich
   Stufe3 - MBQ-Projekt */
.stufe1 {margin-left:10px;font-weight:bold}
.stufe2 {margin-left:-30px;font-weight:normal}
.stufe3 {margin-left:50px;} 
.erste.stufe3 {margin-left:50px;margin-bottom:5px}  
.btnReadMore {text-decoration:underline;}
.hidden {display:none}

/* ul a {  color: rgba(0,0,0,.7);   } */
ul a, ol a {  color: #000;   }
ul a:hover,  ol a:hover { color: rgba(0,0,0,.9);
          background-color:moccasin ;
       }
 

/* SUCHE */
.themen, .kategorien,.zielgruppen, .gewerke {margin-bottom:5px}       
 
/* Steckbrief */       
table.adressblock tr td:first-child ,   
table.ansprechpartner tr td:first-child  {font-weight:bold}

.top_ziel {font-weight:bold;margin-top:15px; }
div .top_bereich {font-size:0.8em; }
.topic { margin-top:30px;margin-bottom:25px;}
.top-kategorien { margin-bottom:15px;}
.projekt-beschreibung { margin-bottom:25px;}

.blaettern {margin-top:25px;margin-bottom:25px;}
.weitere-infos {margin-top:20px;margin-bottom:35px;}

.projektbereich h5, .steckbrief h5 {margin-top:30px;margin-bottom:20px;}
.projektbereich.titel,
.steckbrief.titel,
  h3 span.steckbrief ,
  h3 span.projektbereich ,
  h4 span.steckbrief, 
  h4 span.projektbereich, 
  h5 span.steckbrief ,
  h5 span.projektbereich {background-color: rgb(123, 121, 121);color:white; padding-left:10px; padding-right:20px;padding-bottom:2px; } 
  /*  h5 span.projektbereich {  padding-left:10px; padding-right:20px;padding-bottom:2px; }*/
  .kat {  display: inline; 
          margin:5px 2px; 
          padding-left:10px; padding-right:10px;padding-bottom:2px; 
          line-height:2em;}
  .pdf-print {margin:6px 0px}
  .pb_ziele {margin-left:20px;margin-bottom:15px;}
  /* .projektbild - s.o. bei Farbschema !! */
  .fotonachweis {font-size:8pt;}


.Off {display:none}

  img {
  max-width: 100%;
  height: auto;
}  


#myBtnScrollTop {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
 /*    border: none; Remove borders */
  /*   outline: none; Remove outline */
  /*  background-color: red;  Set a background color */
 /*    color: white; Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding:  10px 14px;
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
  }

/* DATATABLES --> ALLGEMEIN */

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: grey  ;
  border-color:  grey  ;
}

.page-item.active:hover .page-link {
  z-index: 3;
  color: #fff;
  background-color: lightgrey  ;
  border-color:  lightgrey ;
}


/* -- accordion für faq */

.buttonFAQ {
  background-color: #fff;
  color: #000;
  cursor: pointer;
  padding: 8px;
  width: 100%;
  border: 1px solid #fff;
  border-radius: 15px;
  text-align: left;
  outline: none;
  font-size: 14pt;
  transition: 0.4s;
  margin:0px;    
  /* margin-bottom:10px; */
}

.accordion {
  background-color: #fff;
  color: #000;
  cursor: pointer;
  padding: 16px;
  width: 100%;
  border: 1px solid #fecc00;
  border-radius: 15px;
  text-align: left;
  outline: none;
  font-size: 14pt;
  transition: 0.4s;
  margin:0px;    
  margin-bottom:12px;
}


.active, .accordion:hover {
  background-color: moccasin ; 
}

.panel {
  padding: 0 18px;
  background-color: white;
   /* max-height: 0;    */
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  margin-bottom:18px;  
}
  

.accordion:after {
  /* content: "\F229"; Unicode character for "plus" sign (+) */
  content: '\f107';
  font-family: FontAwesome;
  font-size: 16pt;  /*  */
  font-weight:bold;
  color: #777;
  float: right;
  margin-left: 5px;
  margin-bottom:0px; padding-bottom:0px;
 
}

.active:after {
 /* content: "\f106"; Unicode character for "minus" sign (-) */
  content: '\f106';
  font-family: FontAwesome;
  font-family: "FontAwesome"
}

:target:before {
	content: "";
	display: block;
	height: 120px; /* same as your fixed header height */
	margin: -120px 0 0; /* negative fixed header height */
}

#TEILA h3 , #TEILB h3 , #TEILC h3  {color:#000; font-weight:bold; font-size: 16pt;background-color:moccasin ; line-height:20pt;padding:15px;border-radius:12px}
/* ul a {  color: rgba(0,0,0,.7);   } */
ul a, ol a {  color: #000;   }
ul a:hover,  ol a:hover { color: rgba(0,0,0,.9);
          background-color:moccasin ;
       }
 
/* styling für den Login-Bereich */ 
h1 .loginfrm {font-size:1em;font-family:'Arial Narrow',sans-serif; text-transform:uppercase; color: #999999;font-weight:normal;}
.center {text-align:center}
/* body {border:0px} */
a.login {font-weight:bold;}
.wrapper .login {text-align:center} 

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
   
body.edit {background-color:bisque}

 
::placeholder
{  
  color: lightgray !important; font-style:italic
}
 
/* Aktualisierung 2025 >  neue Klassen fürs Paging etc */
  .dataTables_wrapper .dt-paging {
      display: flex;
      justify-content: flex-end;
    }


    /* Aktualisierung 2025 >  numerische spalten linksbündig erzwingen. */
    
    /* Text links – das bleibt */
th.dt-type-numeric,
td.dt-type-numeric {
  text-align: left !important;
}